ไวยากรณ์เทมเพลต 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	✅	ยังไม่พร้อมใช้งาน
pip	✅	ยังไม่พร้อมใช้งาน
scratchcard	✅	ยังไม่พร้อมใช้งาน
spinwheel	✅	ยังไม่พร้อมใช้งาน

ข้อควรระวัง

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

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

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

<template>.zip
├── native-config.json   ← จำเป็น, เลย์เอาต์และเนื้อหา
├── pushwoosh.json        ← ไม่จำเป็น, การแปล (ดูด้านล่าง)

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

การกำหนดค่าเองเป็นอ็อบเจกต์ JSON เดียว:

{ "displayType": "<type>", "<type>": { /* บล็อกเนื้อหาสำหรับประเภทนี้ */ } }

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

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

การจำกัดความถี่ต้องการการเปิดใช้งานอย่างชัดเจนฝั่ง SDK เพื่อให้มีผลกับ In-App แบบเนทีฟ ดูที่ การผสานรวม SDK

สี

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

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

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

Text

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

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

Border

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

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

Cover

รูปภาพที่ไม่จำเป็นซึ่งอยู่บนสีพื้นหลัง ใช้โดย fullscreen และ scratchcard

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

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

Action

discriminated union บน type:

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

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

Button

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
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" }
}

Reward

แผงรางวัลที่แสดงโดย 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 (ไม่มี 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 (ไม่มี action)	ใช่	ปุ่มกลาง
title	Text	ไม่	หัวข้อ
message	Text	ไม่	ข้อความเนื้อหา
reward	Reward	ใช่	รางวัลสำหรับการหมุนที่ชนะ (สำรองสำหรับส่วนที่ไม่มีรางวัลของตัวเอง)
loseTitle	Text	ไม่	หัวข้อที่แสดงเมื่อแพ้
segments	Segment[]	ใช่	ส่วนของวงล้อ (SDK คาดหวัง 2–12)

Segment:

ฟิลด์	ประเภท	จำเป็น	คำอธิบาย
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 {% %}/{{ }} เดียวกันที่ใช้ในเนื้อหาพุชและอีเมล Pushwoosh จะแก้ไขสิ่งเหล่านี้ต่อผู้รับก่อนที่ข้อความจะถูกส่ง เช่นเดียวกับที่ทำกับพุชและอีเมล

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

การผสานรวม SDK

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

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

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

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

ข้อควรระวัง

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

การเรียกกลับของ Delegate (ทั้งหมดทำงานบนเธรดหลัก): 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)