ไวยากรณ์เทมเพลต In-app แบบเนทีฟ

In-app แบบเนทีฟจะถูกแสดงผลโดยตรงโดย SDK ไม่มีการใช้ WebView เข้ามาเกี่ยวข้อง แทนที่จะเป็นหน้า index.html ทรัพยากร ZIP จะมีไฟล์ native-config.json ที่อธิบายข้อความในรูปแบบข้อมูลที่มีโครงสร้าง (ประเภทเลย์เอาต์, ข้อความ, สี, รูปภาพ, ปุ่ม) SDK จะอ่านไฟล์นี้และวาดวิวแบบเนทีฟที่ตรงกัน ซึ่งให้แอนิเมชันที่ราบรื่นและประสิทธิภาพที่ดีกว่าหน้าเว็บที่ฝังไว้

คู่มือนี้จะอธิบายสคีมาของ native-config.json: ฟิลด์, ประเภท และตัวอย่างสำหรับแต่ละประเภทการแสดงผล สำหรับรูปแบบที่ใช้ HTML แบบคลาสสิก โปรดดูที่ ไวยากรณ์เทมเพลต Rich media

ข้อกำหนดเบื้องต้น

In-app แบบเนทีฟต้องการ:

• iOS: SDK 7.2.0 หรือใหม่กว่า (7.2.1+ สำหรับ banner, carousel และ sheet)
• Android: SDK 6.10.0 หรือใหม่กว่า (6.10.1+ สำหรับ banner, carousel และ sheet)

ยังไม่มีประเภทการแสดงผลทุกประเภทให้บริการบนทั้งสองแพลตฟอร์ม ตรวจสอบ การรองรับแพลตฟอร์ม ก่อนที่คุณจะใช้รูปแบบเฉพาะ

การรองรับแพลตฟอร์ม

ประเภทการแสดงผล	iOS	Android
modal	✅ 7.2.0+	✅ 6.10.0+
fullscreen	✅ 7.2.0+	✅ 6.10.0+
stories	✅ 7.2.0+	✅ 6.10.0+
banner	✅ 7.2.1+	✅ 6.10.1+
carousel	✅ 7.2.1+	✅ 6.10.1+
sheet	✅ 7.2.1+	✅ 6.10.1+
video	✅	✅ 6.11.0+
pip	✅	ยังไม่มีให้บริการ
scratchcard	✅	ยังไม่มีให้บริการ
spinwheel	✅	ยังไม่มีให้บริการ

ข้อควรระวัง

ไฟล์ native-config.json ที่มี displayType ที่เวอร์ชัน SDK ปัจจุบันของแอปของคุณไม่รองรับ จะถูกถือว่าเป็น config ที่ไม่ถูกต้องเช่นเดียวกัน SDK จะข้ามไปแทนที่จะแสดงเลย์เอาต์ที่เสียหาย กำหนดเป้าหมายแคมเปญไปยังเวอร์ชันแอปที่ถูกต้องหากคุณใช้ประเภทที่ยังไม่มีให้บริการในทุกที่

โครงสร้างเทมเพลต

เทมเพลต in-app แบบเนทีฟคือไฟล์ ZIP archive เช่นเดียวกับเทมเพลต Rich Media ทั่วไป ยกเว้นว่าในรูทจะมีไฟล์ native-config.json แทนที่จะเป็น index.html:

<template>.zip
├── native-config.json   ← required, layout and content
├── pushwoosh.json        ← optional, localization (see below)

รูปภาพและวิดีโอที่อ้างอิงจาก native-config.json (image, poster, fallback, url บน pip/video) ต้องเป็น URL แบบ HTTPS สมบูรณ์ SDK จะโหลดข้อมูลเหล่านี้ผ่านเครือข่าย จะไม่อ่านไฟล์ในเครื่องจาก archive

config เองเป็นอ็อบเจกต์ JSON เดียว:

{ "displayType": "<type>", "<type>": { /* content block for this type */ } }

displayType จะเลือกหนึ่งในสิบรูปแบบด้านล่าง อ็อบเจกต์ภายใต้คีย์ที่ตรงกันจะเก็บเนื้อหาของรูปแบบนั้น config ที่มี displayType ที่ไม่รู้จัก, บล็อกเนื้อหาที่ขาดหายไป หรือรายการที่จำเป็นว่างเปล่า (items สำหรับ carousel/stories, segments สำหรับ spinwheel) จะไม่ถูกต้อง SDK จะข้ามการแสดงผลแทนที่จะแสดงเลย์เอาต์ที่เสียหาย

การตั้งค่าการจัดส่ง (วันที่เริ่มต้น/สิ้นสุด และ frequency capping) ไม่ได้เป็นส่วนหนึ่งของ native-config.json ซึ่งจะถูกกำหนดค่าในลักษณะเดียวกับ in-app อื่นๆ ในขั้นตอน การตั้งค่าการแสดงผล ของแคมเปญ

นอกจากนี้ Frequency capping ยังต้องการการ opt-in อย่างชัดเจนทางฝั่ง SDK เพื่อให้มีผลกับ in-app แบบเนทีฟ โปรดดูที่ การผสานรวม SDK

สี

ค่าสีทุกค่าเป็นสตริงเลขฐานสิบหกของ CSS: #RGB, #RGBA, #RRGGBB หรือ #RRGGBBAA จำเป็นต้องมี # นำหน้าในทั้งสี่รูปแบบ

บล็อกการสร้างที่ใช้ร่วมกัน

อ็อบเจกต์ขนาดเล็กเหล่านี้ถูกนำมาใช้ซ้ำในประเภทการแสดงผลหลายประเภท

ข้อความ

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
text	string	ใช่	เนื้อหาข้อความ
color	string	ใช่	สีข้อความ

{ "text": "Spin for a garage perk", "color": "#FFFFFFFF" }

เส้นขอบ

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
color	string	ใช่	สีเส้นขอบ
radius	number	ใช่	รัศมีมุม, เป็นพอยต์

{ "color": "#0E72E5FF", "radius": 12 }

หน้าปก

รูปภาพเสริมบนสีพื้นหลัง ใช้โดย fullscreen และ scratchcard

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
image	string	ไม่	URL รูปภาพหน้าปก
background	string	ใช่	สีพื้นหลังที่แสดงใต้ (หรือแทน) รูปภาพ

{ "image": "https://example.com/cover.jpg", "background": "#1A1A1EFF" }

การกระทำ

discriminated union บน type:

รูปแบบ	ฟิลด์	คำอธิบาย
{ "type": "close" }	ไม่มี	ปิด in-app
{ "type": "url", "url": string }	url จำเป็น	เปิด URL หรือ deep link

{ "type": "url", "url": "pushwoosh://sale" }

ปุ่ม

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
text	Text	ใช่	ป้ายกำกับปุ่ม
background	string	ใช่	สีเติมปุ่ม
border	Border	ใช่	เส้นขอบปุ่ม
action	Action	ใช่	การกระทำที่เกิดขึ้นเมื่อแตะ

spinButton (spinwheel) และ revealButton (scratchcard) ใช้รูปทรงเดียวกัน โดยไม่มี action พฤติกรรมของมัน (หมุนวงล้อ, เปิดการ์ด) ถูกสร้างไว้ในตัวแล้ว

{
  "text": { "text": "Book a test drive", "color": "#FFFFFFFF" },
  "background": "#0E72E5FF",
  "border": { "color": "#0E72E5FF", "radius": 12 },
  "action": { "type": "url", "url": "pushwoosh://sale" }
}

รางวัล

แผงรางวัลที่แสดงโดย scratchcard และ spinwheel รางวัลที่ถูกต้องจะต้องมี title หรือ code

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
title	Text	ไม่	หัวข้อรางวัล
message	Text	ไม่	คำอธิบายรางวัล
code	string	ไม่	รหัสโปรโมชัน, แสดงผลพร้อมปุ่มคัดลอก
button	Button	ไม่	ปุ่มยืนยันพร้อมการกระทำของตัวเอง

{
  "title": { "text": "20% off detailing", "color": "#111111FF" },
  "message": { "text": "Valid for any full-detail booking this month.", "color": "#555555FF" },
  "code": "APEX20",
  "button": {
    "text": { "text": "Book detailing", "color": "#FFFFFFFF" },
    "background": "#B3227CFF",
    "border": { "color": "#B3227CFF", "radius": 12 },
    "action": { "type": "url", "url": "pushwoosh://detailing" }
  }
}

ประเภทการแสดงผล

banner

แถบขนาดกะทัดรัดที่ยึดติดกับขอบบนหรือขอบล่างของหน้าจอ

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
position	top | bottom	ใช่	ขอบหน้าจอ
background	string	ใช่	สีพื้นหลังของแถบ
image	string	ไม่	ภาพขนาดย่อทางด้านซ้าย
title	Text	ไม่	หัวข้อบรรทัดเดียว, ถูกตัดด้วยเครื่องหมายจุดไข่ปลา
message	Text	ไม่	ข้อความเนื้อหา, สูงสุด 2 บรรทัด
action	Action	ใช่	เกิดขึ้นเมื่อแตะที่แถบเอง
autoDismiss	number	ไม่	ปิดอัตโนมัติหลังจากผ่านไปหลายวินาที ละเว้นเพื่อคงไว้จนกว่าจะปิด

{
  "displayType": "banner",
  "banner": {
    "showClose": true,
    "position": "bottom",
    "background": "#4B5057FF",
    "image": "https://example.com/thumb.jpg",
    "title": { "text": "Alpine A110 just dropped", "color": "#FFFFFFFF" },
    "message": { "text": "The featherweight icon — tap to see the build", "color": "#FFFFFFFF" },
    "action": { "type": "url", "url": "pushwoosh://product/x6f" },
    "autoDismiss": 6
  }
}

carousel

ชุดการ์ดแบบเต็มหน้าจอที่สามารถปัดได้พร้อมจุดแสดงหน้า

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
items	Item[]	ใช่	การ์ด (อย่างน้อย 1 ใบ)

รายการ Carousel:

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
title	Text	ไม่	หัวข้อการ์ด
message	Text	ไม่	หัวข้อย่อยการ์ด
image	string	ไม่	รูปภาพการ์ด
action	Action	ไม่	เกิดขึ้นเมื่อแตะที่การ์ด

{
  "displayType": "carousel",
  "carousel": {
    "showClose": true,
    "items": [
      {
        "image": "https://example.com/card-1.jpg",
        "title": { "text": "AMG GT R", "color": "#FFFFFFFF" },
        "message": { "text": "585 hp biturbo V8 — just landed", "color": "#FFFFFFFF" },
        "action": { "type": "url", "url": "pushwoosh://product/n6fx" }
      },
      {
        "image": "https://example.com/card-2.jpg",
        "title": { "text": "Alpine A110", "color": "#FFFFFFFF" },
        "message": { "text": "Featherweight icon — limited allocation", "color": "#FFFFFFFF" },
        "action": { "type": "url", "url": "pushwoosh://product/x6f" }
      }
    ]
  }
}

fullscreen

รูปภาพหน้าปกแบบขอบชนขอบพร้อมข้อความและปุ่มด้านบน

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
cover	Cover	ใช่	รูปภาพพื้นหลังและสี
title	Text	ไม่	หัวข้อ
message	Text	ไม่	ข้อความเนื้อหา
buttons	Button[]	ใช่	ปุ่มที่ด้านล่าง (สามารถเว้นว่างได้)

{
  "displayType": "fullscreen",
  "fullscreen": {
    "showClose": true,
    "cover": { "image": "https://example.com/hero.jpg", "background": "#1A1A1EFF" },
    "title": { "text": "Pure Maranello", "color": "#FFFFFFFF" },
    "message": { "text": "The prancing horse, reimagined.", "color": "#EBEBEBFF" },
    "buttons": [
      {
        "text": { "text": "Reserve now", "color": "#FFFFFFFF" },
        "background": "#0E72E5FF",
        "border": { "color": "#0E72E5FF", "radius": 8 },
        "action": { "type": "url", "url": "pushwoosh://sale" }
      },
      {
        "text": { "text": "Not now", "color": "#FFFFFFFF" },
        "background": "#00000000",
        "border": { "color": "#FFFFFF99", "radius": 8 },
        "action": { "type": "close" }
      }
    ]
  }
}

modal

การ์ดที่อยู่ตรงกลาง

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
dimBackground	boolean	ใช่	หรี่แสงหน้าจอด้านหลังการ์ด
background	string	ใช่	สีพื้นหลังการ์ด
image	string	ไม่	รูปภาพหน้าปก
title	Text	ไม่	หัวข้อ
message	Text	ไม่	ข้อความเนื้อหา
buttons	Button[]	ใช่	ปุ่มใต้ข้อความ (สามารถเว้นว่างได้)

{
  "displayType": "modal",
  "modal": {
    "showClose": true,
    "dimBackground": true,
    "background": "#FFFFFFFF",
    "image": "https://example.com/cover.jpg",
    "title": { "text": "The GT R has landed", "color": "#4B5057FF" },
    "message": { "text": "585 hp — now in the showroom.", "color": "#4B5057FF" },
    "buttons": [
      {
        "text": { "text": "Book a test drive", "color": "#FFFFFFFF" },
        "background": "#0E72E5FF",
        "border": { "color": "#0E72E5FF", "radius": 12 },
        "action": { "type": "url", "url": "pushwoosh://sale" }
      },
      {
        "text": { "text": "Not now", "color": "#4B5057FF" },
        "background": "#FFFFFFFF",
        "border": { "color": "#4B5057FF", "radius": 12 },
        "action": { "type": "close" }
      }
    ]
  }
}

pip

หน้าต่างวิดีโอ picture-in-picture แบบลอยที่ยึดติดกับมุมหน้าจอ

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
position	bottom-right | bottom-left | top-right | top-left	ใช่	มุมหน้าจอ
loop	boolean	ใช่	เล่นวนซ้ำ
muted	boolean	ใช่	เริ่มแบบปิดเสียง
url	string	ใช่	URL วิดีโอ
poster	string	ไม่	โปสเตอร์ที่แสดงก่อนเริ่มเล่น
fallback	string	ไม่	รูปภาพที่แสดงหากวิดีโอเล่นไม่สำเร็จ
width	number	ใช่	ความกว้างของหน้าต่างเป็นเปอร์เซ็นต์ของความกว้างหน้าจอ, จำกัดที่ 15–70
aspectRatio	number	ใช่	อัตราส่วนความสูงต่อความกว้างของหน้าต่าง
borderRadius	number	ไม่	รัศมีมุมหน้าต่าง, เป็นพอยต์
action	Action	ไม่	เกิดขึ้นเมื่อแตะที่หน้าต่างเอง

ไม่มีปุ่มที่สามารถกำหนดค่าได้บน pip การควบคุมหน้าต่าง (ขยายเต็มหน้าจอ, ปิดเสียง, ปิด) เป็นสิ่งที่ระบบจัดหาให้

{
  "displayType": "pip",
  "pip": {
    "showClose": true,
    "position": "bottom-right",
    "loop": true,
    "muted": true,
    "url": "https://example.com/teaser.mp4",
    "poster": "https://example.com/poster.jpg",
    "width": 40,
    "aspectRatio": 0.5625,
    "action": { "type": "url", "url": "pushwoosh://product/x6f" }
  }
}

scratchcard

การ์ดที่มีรางวัลซ่อนอยู่ใต้ชั้นฟอยล์ที่สามารถขูดได้

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
background	string | string[]	ใช่	สีพื้นหลังการ์ด, หรือจุดหยุดการไล่ระดับสี
revealThreshold	number	ใช่	ส่วนของฟอยล์ที่ต้องขูดออก (0–1) ก่อนที่รางวัลจะปรากฏ
cover	Cover	ใช่	ชั้นฟอยล์ หากไม่มี image จะมีคำใบ้ “ขูดที่นี่” แสดงบนสีพื้นหลัง
revealButton	Button (no action)	ไม่	ปุ่ม “เปิดเผยทันที”
title	Text	ไม่	หัวข้อ
message	Text	ไม่	ข้อความเนื้อหา
reward	Reward	ใช่	รางวัลที่ซ่อนอยู่ใต้ฟอยล์

{
  "displayType": "scratchcard",
  "scratchcard": {
    "showClose": true,
    "background": ["#3A1C71FF", "#B3227CFF", "#E0503AFF"],
    "revealThreshold": 0.55,
    "cover": { "background": "#C9CDD6FF" },
    "revealButton": {
      "text": { "text": "Reveal without scratching", "color": "#3A1C71FF" },
      "background": "#F2DFF5FF",
      "border": { "color": "#F2DFF5FF", "radius": 10 }
    },
    "title": { "text": "Your loyalty reward", "color": "#FFFFFFFF" },
    "message": { "text": "Scratch the foil to reveal this week's garage perk.", "color": "#F2DFF5FF" },
    "reward": {
      "title": { "text": "20% off detailing", "color": "#111111FF" },
      "message": { "text": "Valid for any full-detail booking this month.", "color": "#555555FF" },
      "code": "APEX20",
      "button": {
        "text": { "text": "Book detailing", "color": "#FFFFFFFF" },
        "background": "#B3227CFF",
        "border": { "color": "#B3227CFF", "radius": 12 },
        "action": { "type": "url", "url": "pushwoosh://detailing" }
      }
    }
  }
}

sheet

การ์ดที่ปักหมุดไว้ที่ขอบด้านล่าง, พร้อมที่จับสำหรับลาก

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
dimBackground	boolean	ใช่	หรี่แสงหน้าจอด้านหลังชีต
background	string	ใช่	สีพื้นหลังชีต
image	string	ไม่	รูปภาพหน้าปก
title	Text	ไม่	หัวข้อ
message	Text	ไม่	ข้อความเนื้อหา
buttons	Button[]	ใช่	ปุ่มใต้ข้อความ (สามารถเว้นว่างได้)

{
  "displayType": "sheet",
  "sheet": {
    "showClose": true,
    "dimBackground": true,
    "background": "#FFFFFFFF",
    "image": "https://example.com/cover.jpg",
    "title": { "text": "Your quote is ready", "color": "#000000FF" },
    "message": { "text": "Guaranteed buyout for your A110: $68,500.", "color": "#000000FF" },
    "buttons": [
      {
        "text": { "text": "Get guaranteed quote", "color": "#FFFFFFFF" },
        "background": "#0E72E5FF",
        "border": { "color": "#0E72E5FF", "radius": 12 },
        "action": { "type": "url", "url": "pushwoosh://sale" }
      }
    ]
  }
}

spinwheel

วงล้อเสี่ยงโชคพร้อมส่วนต่างๆ ที่มีน้ำหนักและปุ่มดุมกลาง

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
background	string | string[]	ใช่	สีพื้นหลังการ์ด, หรือจุดหยุดการไล่ระดับสี
winIndex	number	ใช่	ดัชนี (เริ่มต้นที่ 0) ของส่วนที่ชนะ
spinButton	Button (no action)	ใช่	ปุ่มดุมกลาง
title	Text	ไม่	หัวข้อ
message	Text	ไม่	ข้อความเนื้อหา
reward	Reward	ใช่	รางวัลสำหรับการหมุนที่ชนะ (สำรองสำหรับส่วนที่ไม่มีรางวัลของตัวเอง)
loseTitle	Text	ไม่	หัวข้อที่แสดงเมื่อแพ้
segments	Segment[]	ใช่	ส่วนของวงล้อ (SDK คาดว่าจะมี 2–12 ส่วน)

ส่วน:

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
message	Text	ใช่	ป้ายกำกับส่วน
color	string	ไม่	สีของส่วน ละเว้นเพื่อใช้พาเลทสีสำรองที่ใช้รอบวงล้อ
weight	number	ใช่	ขนาดส่วนสัมพัทธ์
reward	Reward	ไม่	รางวัลเฉพาะส่วน

{
  "displayType": "spinwheel",
  "spinwheel": {
    "showClose": true,
    "background": ["#1B1B46FF", "#5B2B8FFF", "#B0338AFF"],
    "winIndex": 1,
    "spinButton": {
      "text": { "text": "SPIN", "color": "#1B1B46FF" },
      "background": "#F2C94CFF",
      "border": { "color": "#D9A02BFF", "radius": 36 }
    },
    "title": { "text": "Spin for a garage perk", "color": "#FFFFFFFF" },
    "message": { "text": "One spin — every slice wins this week.", "color": "#E3D9F2FF" },
    "reward": {
      "title": { "text": "You won a garage perk!", "color": "#FFFFFFFF" },
      "code": "APEXPERK",
      "button": {
        "text": { "text": "Claim", "color": "#FFFFFFFF" },
        "background": "#5B2B8FFF",
        "border": { "color": "#5B2B8FFF", "radius": 12 },
        "action": { "type": "close" }
      }
    },
    "segments": [
      { "message": { "text": "5% off", "color": "#FFFFFFFF" }, "color": "#5856D6FF", "weight": 1 },
      {
        "message": { "text": "20% off", "color": "#FFFFFFFF" },
        "color": "#30B0C7FF",
        "weight": 1,
        "reward": {
          "title": { "text": "20% off your next service", "color": "#FFFFFFFF" },
          "code": "SPIN20",
          "button": {
            "text": { "text": "Claim service deal", "color": "#FFFFFFFF" },
            "background": "#30B0C7FF",
            "border": { "color": "#30B0C7FF", "radius": 12 },
            "action": { "type": "url", "url": "pushwoosh://service" }
          }
        }
      },
      { "message": { "text": "Free wash", "color": "#FFFFFFFF" }, "color": "#FF2D55FF", "weight": 1 }
    ]
  }
}

stories

สไลด์เต็มหน้าจอพร้อมแถบความคืบหน้าที่ด้านบน, คล้ายกับสตอรี่ในโซเชียลมีเดีย

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
loop	boolean	ใช่	เริ่มใหม่จากสไลด์แรกหลังจากสไลด์สุดท้าย
items	Item[]	ใช่	สไลด์ (อย่างน้อย 1 สไลด์)

รายการ Stories:

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
title	Text	ไม่	หัวข้อ
message	Text	ไม่	หัวข้อย่อย
image	string	ไม่	รูปภาพพื้นหลังสไลด์
buttons	Button[]	ใช่	ปุ่ม CTA ที่ด้านล่าง (สามารถเว้นว่างได้)
duration	number	ใช่	ระยะเวลาสไลด์, เป็นวินาที

{
  "displayType": "stories",
  "stories": {
    "showClose": true,
    "loop": false,
    "items": [
      {
        "image": "https://example.com/slide-1.jpg",
        "title": { "text": "AMG GT R", "color": "#FFFFFFFF" },
        "message": { "text": "The Green Hell special", "color": "#FFFFFFFF" },
        "buttons": [
          {
            "text": { "text": "Configure yours", "color": "#FFFFFFFF" },
            "background": "#0F0F0FFF",
            "border": { "color": "#0F0F0FFF", "radius": 26 },
            "action": { "type": "url", "url": "pushwoosh://product/n6fx" }
          }
        ],
        "duration": 4
      },
      {
        "image": "https://example.com/slide-2.jpg",
        "title": { "text": "Alpine A110", "color": "#FFFFFFFF" },
        "message": { "text": "The featherweight legend, reborn", "color": "#FFFFFFFF" },
        "buttons": [],
        "duration": 4
      }
    ]
  }
}

video

วิดีโอเต็มหน้าจอพร้อมข้อความและปุ่มด้านบน

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
showClose	boolean	ใช่	แสดงปุ่มปิด (✕)
loop	boolean	ใช่	เล่นวนซ้ำ
muted	boolean	ใช่	เริ่มแบบปิดเสียง
url	string	ใช่	URL วิดีโอ (HLS หรือ MP4)
poster	string	ไม่	โปสเตอร์ที่แสดงก่อนเริ่มเล่น
fallback	string	ไม่	รูปภาพที่แสดงหากวิดีโอเล่นไม่สำเร็จ
title	Text	ไม่	หัวข้อ
message	Text	ไม่	ข้อความเนื้อหา
buttons	Button[]	ใช่	ปุ่ม CTA ที่ด้านล่าง (สามารถเว้นว่างได้)

{
  "displayType": "video",
  "video": {
    "showClose": true,
    "loop": true,
    "muted": true,
    "url": "https://example.com/reveal.mp4",
    "poster": "https://example.com/poster.jpg",
    "title": { "text": "The reveal", "color": "#FFFFFFFF" },
    "message": { "text": "Watch it move before anyone else.", "color": "#EBEBEBFF" },
    "buttons": [
      {
        "text": { "text": "Shop the lineup", "color": "#FFFFFFFF" },
        "background": "#0E72E5FF",
        "border": { "color": "#0E72E5FF", "radius": 14 },
        "action": { "type": "url", "url": "pushwoosh://sale" }
      }
    ]
  }
}

การแปลเป็นภาษาท้องถิ่น

In-app แบบเนทีฟใช้กลไกการแปลเป็นภาษาท้องถิ่นแบบเดียวกับ HTML Rich Media: ค่าสตริงใน native-config.json สามารถมีตัวยึดตำแหน่ง {{key|type|default}} และคำแปลจะอยู่ในไฟล์ pushwoosh.json ที่อยู่ถัดไป ในรูปแบบเดียวกับที่อธิบายไว้ใน การเพิ่ม pushwoosh.json ตัวยึดตำแหน่งสามารถปรากฏในฟิลด์สตริงใดก็ได้, ในทุกระดับความลึก (หัวข้อ, ป้ายกำกับปุ่ม, URL รูปภาพ, URL การกระทำ)

หมายเหตุ

ตัวยึดตำแหน่งการแปลที่ยังไม่ได้รับการแก้ไขจะกลับไปใช้ค่าเริ่มต้น

เนื้อหาแบบไดนามิก

ฟิลด์ข้อความ — title, message, text ของปุ่ม, reward.title/reward.message และ message ของรายการ/ส่วน — ยังยอมรับ เนื้อหาแบบไดนามิก และ ไวยากรณ์ Liquid ด้วย: ตัวย่อ {Tag|modifier|default} และแท็ก Liquid {% %}/{{ }} เดียวกันที่ใช้ในเนื้อหา push และอีเมล Pushwoosh จะแก้ไขสิ่งเหล่านี้ต่อผู้รับก่อนที่ข้อความจะถูกส่ง, ในลักษณะเดียวกับที่ทำสำหรับ push และอีเมล

เมื่อสร้างเทมเพลตใน ตัวแก้ไข in-app แบบเนทีฟ ของ Control Panel โทเค็นที่แทรกจะแสดงเป็นชิปในการแสดงตัวอย่างสด และ บันทึก จะถูกบล็อกหาก Liquid ของฟิลด์ข้อความไม่สามารถแยกวิเคราะห์ได้

การผสานรวม SDK

เมื่อคุณเพิ่มโมดูล SDK in-app แบบเนทีฟลงในแอปของคุณ, ข้อความจะแสดงโดยอัตโนมัติ ไม่จำเป็นต้องใช้โค้ดเพิ่มเติมเพื่อแสดงข้อความที่ถูกกระตุ้นโดย push, Customer Journey, postEvent หรือ inbox

SDK ยังเปิดเผย API ขนาดเล็กสำหรับการควบคุมด้วยตนเอง:

• iOS: Pushwoosh.inApp (โมดูล PushwooshInApp)
• Android: PushwooshInAppUi (โมดูล pushwoosh-inapp-ui)

ความสามารถ	iOS	Android
แสดง config โดยตรง (การทดสอบ/การใช้งานด้วยตนเอง)	Pushwoosh.inApp.present(config)	PushwooshInAppUi.present(configJson)
สังเกตวงจรชีวิตและการคลิก	delegate (PWInAppMessageDelegate)	delegate (InAppMessageDelegate)
ตรวจสอบว่ามีบางอย่างอยู่บนหน้าจอหรือไม่	isPresenting	isPresenting
ปิดสิ่งที่แสดงอยู่ในปัจจุบัน	dismiss()	dismiss()
หยุดชั่วคราว / เล่นต่อการแสดงผล	isPaused	isPaused
บังคับใช้การจำกัด maxDisplays / cooldown	setFrequencyCapEnabled(_:)	setFrequencyCapEnabled(...)

ข้อควรระวัง

Frequency capping ที่กำหนดค่าไว้ใน การตั้งค่าการแสดงผล ของแคมเปญ จะไม่ถูกบังคับใช้โดยอัตโนมัติ สำหรับ in-app แบบเนทีฟ, ซึ่งแตกต่างจาก Rich Media แบบคลาสสิก SDK จะไม่สนใจ maxDisplays/cooldown จนกว่าคุณจะเรียก setFrequencyCapEnabled(true) อย่างชัดเจน วันที่เริ่มต้น/สิ้นสุดของข้อความจะถูกบังคับใช้เสมอโดยไม่คำนึงถึงการตั้งค่านี้

Delegate callbacks (ทั้งหมดทำงานบน main thread): shouldDisplay (ส่งคืน false เพื่อระงับข้อความหนึ่งก่อนที่จะแสดง, ตัวอย่างเช่นบนหน้าจอชำระเงิน), willPresent, didPresent, didClose และ clickedAction (ทำงานเมื่อผู้ใช้แตะการกระทำ url, ก่อนที่ URL จะเปิด)

นอกจากนี้ iOS ยังรายงาน rewardRevealed และ rewardClaimed สำหรับเทมเพลต scratchcard และ spinwheel ที่เป็นเกม

// iOS
Pushwoosh.inApp.delegate = self
Pushwoosh.inApp.setFrequencyCapEnabled(true)

// Android
PushwooshInAppUi.delegate = this
PushwooshInAppUi.setFrequencyCapEnabled(true)