สร้างข้อความ In-App แบบเนทีฟ

In-App แบบเนทีฟใช้เลย์เอาต์สำเร็จรูปที่ Pushwoosh SDK เรนเดอร์โดยตรงบนอุปกรณ์ แทนที่จะเป็นหน้า HTML ที่ In-App แบบกำหนดเองโหลด ซึ่งทำให้โหลดได้เร็วขึ้นและเคลื่อนไหวได้อย่างราบรื่นยิ่งขึ้น และคุณไม่จำเป็นต้องมีทักษะด้านการออกแบบหรือการพัฒนาเพื่อสร้างมันขึ้นมา

เลือกใช้ In-App แบบเนทีฟเมื่อคุณต้องการเปิดตัวโปรโมชั่น การแจ้งเตือน หรือการประกาศฟีเจอร์อย่างรวดเร็ว และไม่จำเป็นต้องใช้เลย์เอาต์ที่กำหนดเองทั้งหมด หากคุณต้องการควบคุมการออกแบบอย่างเต็มที่ ให้สร้าง in-app ที่เป็น HTML แทน

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

ต้องการความช่วยเหลือจากนักพัฒนา

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

ก่อนที่คุณจะสร้างเทมเพลต In-App แบบเนทีฟ ตรวจสอบให้แน่ใจว่า:

• Pushwoosh SDK ได้รับการผสานรวมในแอปของคุณเพื่อให้ข้อความ In-App สามารถปรากฏขึ้นได้ เรียนรู้เพิ่มเติม
• แอปของคุณรัน iOS SDK 7.2.0+ หรือ Android SDK 6.10.0+ สำหรับ modal, fullscreen และ stories ส่วน Sheet, carousel และ banner ต้องการ iOS SDK 7.2.1+ หรือ Android SDK 6.10.1+ สำหรับ Video ขณะนี้รองรับเฉพาะ iOS เท่านั้น

สร้างเทมเพลต In-App แบบเนทีฟ

1. ไปที่ Content → In-apps
2. คลิก Create in-app
3. ป้อนชื่อเทมเพลต
4. เลือก Create native rich media
5. ใน DISPLAY TYPE เลือกประเภทการแสดงผล: modal, fullscreen, stories, sheet, carousel, banner หรือ video
6. คลิก Create in-app

ตัวแก้ไขจะเปิดขึ้นพร้อมตัวอย่างบนมือถือแบบสดทางด้านขวาและฟิลด์เทมเพลตทางด้านซ้าย ซึ่งจัดกลุ่มเป็น Content, Config และ Actions สิ่งที่คุณเห็นในแต่ละกลุ่มขึ้นอยู่กับประเภทการแสดงผลที่คุณเลือก

กำหนดค่าประเภทการแสดงผล

ข้อควรระวัง

ดรอปดาวน์ Display type ที่ด้านบนของตัวแก้ไขช่วยให้คุณสามารถสลับประเภทได้ตลอดเวลา แต่การสลับจะรีเซ็ตฟิลด์ Content, Config และ Actions ทั้งหมดด้านล่างเป็นค่าเริ่มต้นสำหรับประเภทใหม่ กรอกเนื้อหาหลังจากที่คุณตัดสินใจเลือกประเภทแล้วเท่านั้น

Modal

การ์ดที่อยู่ตรงกลาง ซึ่งสามารถเลือกแสดงบนพื้นหลังที่หรี่แสงได้

1. ใต้ Content เพิ่มชื่อและข้อความ โดยแต่ละส่วนมีสีข้อความของตัวเอง พร้อมรูปภาพเสริม ดูที่ เพิ่มรูปภาพ
2. ใต้ Config ตั้งค่าสีพื้นหลังของการ์ด ซึ่งจะเติมพื้นที่การ์ดด้านหลังข้อความและรูปภาพของคุณ
3. เปิด Close button หากคุณต้องการให้มีปุ่มควบคุม ✕ เพื่อให้ผู้ใช้สามารถปิด In-App ได้โดยไม่ต้องแตะปุ่ม
4. เปิด Dim background เพื่อทำให้หน้าจอด้านหลังการ์ดมืดลงและให้ความสนใจกับข้อความของคุณ
5. ใต้ Actions เพิ่มปุ่มอย่างน้อยหนึ่งปุ่ม ดูที่ กำหนดค่าปุ่ม

Fullscreen

รูปภาพปกแบบเต็มขอบพร้อมข้อความและปุ่มอยู่ด้านบน กรอกฟิลด์เหล่านี้ในแผงด้านซ้าย:

1. ใต้ Content เพิ่มรูปภาพปก พร้อมชื่อและข้อความ โดยแต่ละส่วนมีสีข้อความของตัวเอง ดูที่ เพิ่มรูปภาพ
2. ใต้ Config ตั้งค่าสีปก ซึ่งจะแสดงในขณะที่รูปภาพปกกำลังโหลด หรือแสดงเดี่ยวๆ หากคุณเว้นว่างรูปภาพไว้
3. เปิด Close button หากคุณต้องการให้มีปุ่มควบคุม ✕ เพื่อให้ผู้ใช้สามารถปิด In-App ได้โดยไม่ต้องแตะปุ่ม
4. ใต้ Actions เพิ่มปุ่มอย่างน้อยหนึ่งปุ่ม ดูที่ กำหนดค่าปุ่ม

Stories

ลำดับของสไลด์เต็มหน้าจอพร้อมแถบความคืบหน้าที่ด้านบน คล้ายกับสตอรี่ในโซเชียลมีเดีย แต่ละสไลด์เป็นรายการ Stories ของตัวเองภายใต้ Content

1. กรอก Image, Title และ Message ของสไลด์แรก (แต่ละส่วนมีสีข้อความของตัวเอง) ดูที่ เพิ่มรูปภาพ
2. ตั้งค่า Seconds เป็นระยะเวลาที่สไลด์จะแสดงบนหน้าจอก่อนที่จะเลื่อนไปสไลด์ถัดไป ค่าเริ่มต้นคือ 5 ป้อนค่าระหว่าง 1 ถึง 30 ค่าที่อยู่นอกช่วงนี้จะบล็อกการ Save ด้วยข้อผิดพลาดการตรวจสอบความถูกต้อง
3. หรือคลิก Add ภายในสไลด์เพื่อเพิ่มปุ่ม CTA ของตัวเอง ดูที่ กำหนดค่าปุ่ม

4. คลิก Add ใต้สไลด์สุดท้ายเพื่อเพิ่มสไลด์อีกอัน จากนั้นทำซ้ำขั้นตอนที่ 1-3
5. ใต้ Config เปิด Loop หากคุณต้องการให้สตอรี่เริ่มใหม่อีกครั้งจากสไลด์แรกหลังจากสไลด์สุดท้ายจบลง
6. เปิด Close button หากคุณต้องการให้มีปุ่มควบคุม ✕ เพื่อให้ผู้ใช้ออกจากสตอรี่ก่อนที่สไลด์ทั้งหมดจะเล่นจนจบ

ตัวอย่างของสตอรี่ที่เสร็จสมบูรณ์จะปรากฏต่อผู้ใช้

Sheet

แผ่นด้านล่างที่เลื่อนขึ้นมาจากขอบล่างของหน้าจอ มีที่จับที่ด้านบนเพื่อให้ผู้ใช้ลากลงเพื่อปิด

กรอกฟิลด์เหล่านี้ในแผงด้านซ้าย:

1. ใต้ Content เพิ่มชื่อและข้อความ โดยแต่ละส่วนมีสีข้อความของตัวเอง พร้อมรูปภาพเสริม ดูที่ เพิ่มรูปภาพ
2. ใต้ Config ตั้งค่าสีพื้นหลังของแผ่น ซึ่งจะเติมแผงด้านหลังข้อความและรูปภาพของคุณ
3. เปิด Close button หากคุณต้องการให้มีปุ่มควบคุม ✕ เพื่อให้ผู้ใช้สามารถปิดแผ่นได้โดยไม่ต้องแตะปุ่ม
4. ใต้ Actions เพิ่มปุ่มอย่างน้อยหนึ่งปุ่ม ดูที่ กำหนดค่าปุ่ม

Carousel

ข้อความเต็มหน้าจอพร้อมการ์ดหลายใบที่ผู้ใช้สามารถปัดผ่านได้ จุดที่ด้านล่างจะแสดงว่าการ์ดใดกำลังทำงานอยู่ ใต้ Content แต่ละการ์ดเป็นรายการ Cards แยกกัน

1. กรอก Image, Title และ Message ของการ์ดแรก (แต่ละส่วนมีสีข้อความของตัวเอง) ดูที่ เพิ่มรูปภาพ
2. ตั้งค่า Action สำหรับการ์ด เลือก close เพื่อปิด In-App เมื่อผู้ใช้แตะการ์ด หรือ url เพื่อเปิดลิงก์ (ตัวเลือกเดียวกับ กำหนดค่าปุ่ม)
3. คลิก Add ใต้การ์ดสุดท้ายเพื่อเพิ่มอีกอัน จากนั้นทำซ้ำขั้นตอนที่ 1-2
4. เปิด Close button หากคุณต้องการให้มีปุ่มควบคุม ✕ เพื่อให้ผู้ใช้ออกจาก carousel ได้โดยไม่ต้องแตะการ์ด

ข้อควรระวัง

หากคุณปิด Close button และตั้งค่า Action ของทุกการ์ดเป็น url ผู้ใช้จะไม่มีปุ่มควบคุมบนหน้าจอเพื่อปิด carousel การแตะจะเปิดลิงก์เสมอแทนที่จะปิด

Banner

แถบขนาดกะทัดรัดที่ปักหมุดไว้ที่ขอบบนหรือล่างของหน้าจอ สำหรับข้อความที่ไม่ควรบล็อก UI ทั้งหมด

1. ใต้ Content เพิ่มชื่อและข้อความ โดยแต่ละส่วนมีสีข้อความของตัวเอง พร้อมรูปภาพขนาดเล็กเสริม ดูที่ เพิ่มรูปภาพ
2. ใต้ Config ตั้งค่า Position เป็น top หรือ bottom เพื่อปักหมุดแบนเนอร์ที่ขอบหน้าจอที่คุณต้องการ
3. ตั้งค่า Auto-dismiss, sec เพื่อปิดแบนเนอร์โดยอัตโนมัติหลังจากผ่านไปหลายวินาที เว้นว่างไว้เพื่อให้แบนเนอร์อยู่จนกว่าผู้ใช้จะปิด
4. ตั้งค่าสีพื้นหลังสำหรับแถบ
5. เปิด Close button หากคุณต้องการให้มีปุ่มควบคุม ✕ บนแบนเนอร์
6. ใต้ Actions ตั้งค่า Action เป็น close หรือ url แบนเนอร์ไม่มีปุ่มแยกต่างหาก การแตะที่ใดก็ได้บนแบนเนอร์จะดำเนินการนี้ ดู กำหนดค่าปุ่ม สำหรับพฤติกรรมของ close และ url

ข้อควรระวัง

หากคุณปิด Close button ตั้งค่า Action เป็น url และเว้นว่าง Auto-dismiss แบนเนอร์จะยังคงอยู่บนหน้าจอโดยไม่มีวิธีปิด การแตะจะเปิดลิงก์เสมอแทนที่จะปิด

Video

เครื่องเล่นเต็มหน้าจอสำหรับลิงก์สตรีมมิ่ง HLS (.m3u8) หรือไฟล์ .mp4 โดยตรง พร้อมชื่อ ข้อความ และปุ่มเสริมอยู่ด้านบน

หมายเหตุ

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

1. ใต้ Content ตั้งค่า Video URL (จำเป็น) เป็นลิงก์ HTTPS แบบสมบูรณ์ไปยังไฟล์ .m3u8 หรือ .mp4 หรือเพิ่มรูปภาพ Poster ที่แสดงก่อนเริ่มเล่น และ Fallback image ที่แสดงหากวิดีโอไม่สามารถเล่นได้
2. เพิ่มชื่อและข้อความ โดยแต่ละส่วนมีสีข้อความของตัวเอง
3. ใต้ Config เปิด Loop เพื่อเริ่มวิดีโอใหม่หลังจากจบ
4. เปิด Muted เพื่อเริ่มเล่นโดยปิดเสียง
5. เปิด Close button หากคุณต้องการให้มีปุ่มควบคุม ✕ เพื่อให้ผู้ใช้สามารถปิด In-App ได้โดยไม่ต้องรอให้วิดีโอจบ
6. ใต้ Actions เพิ่มปุ่มอย่างน้อยหนึ่งปุ่ม ดูที่ กำหนดค่าปุ่ม

กำหนดค่าฟิลด์ข้อความ

ฟิลด์ข้อความไม่รองรับข้อความหลายบรรทัด หากคุณกด Enter ตัวแก้ไขอาจแสดงการขึ้นบรรทัดใหม่ แต่ Pushwoosh จะบันทึกเป็นช่องว่างแทน บนอุปกรณ์ ข้อความจะปรากฏเป็นบรรทัดเดียว

หากต้องการเพิ่มอิโมจิ ให้คลิก Emoji ถัดจากแถบเครื่องมือของฟิลด์ อิโมจิได้รับการสนับสนุนในฟิลด์ข้อความเดียวกับข้อความธรรมดา ตรวจสอบตัวอย่างสดเพื่อดูว่ามีลักษณะอย่างไรบนเลย์เอาต์

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

ทุกฟิลด์ข้อความรองรับการปรับแต่งส่วนบุคคลด้วยแท็กและ User ID

1. คลิก Personalization ถัดจากแถบเครื่องมือของฟิลด์
2. ใต้ Tag เลือกแท็กหรือ User ID
3. เลือกตัวแก้ไขรูปแบบ (เช่น CapitalizeFirst หรือ regular)
4. หรือป้อน Default Tag Value
5. คลิก Insert

แท็กที่แทรกจะแสดงเป็นชิปในฟิลด์ คุณสามารถเปลี่ยนแท็ก ตัวแก้ไข และค่าเริ่มต้นก่อนที่จะคลิก Insert การปรับแต่งส่วนบุคคลใช้แท็ก ตัวแก้ไข และค่าเริ่มต้นเดียวกับ เนื้อหาแบบไดนามิก

เคล็ดลับ

สำหรับตรรกะแบบมีเงื่อนไข (เช่น แสดงข้อความนี้เฉพาะเมื่อแท็กเท่ากับค่าที่ระบุ) ให้พิมพ์ Liquid syntax โดยตรงลงในฟิลด์

เมื่อคุณคลิก Save Pushwoosh จะตรวจสอบเนื้อหาแบบไดนามิกและ Liquid ในทุกฟิลด์ข้อความ หากฟิลด์ไม่สามารถแยกวิเคราะห์ได้ (เช่น แท็ก {% if %} ที่ไม่ได้ปิด) การ Save จะถูกบล็อกและข้อความแจ้ง Dynamic content contains errors จะระบุชื่อฟิลด์และภาษาที่เสีย แก้ไขที่นั่น จากนั้นคลิก Save อีกครั้ง

หมายเหตุ

การตรวจสอบ Liquid เมื่อบันทึกจะจับข้อผิดพลาดทางไวยากรณ์ เช่น แท็กที่ไม่ได้ปิด มันอาจยังคงผ่านนิพจน์ที่ไม่สมบูรณ์ซึ่งจะล้มเหลวเมื่อส่งข้อความเท่านั้น ส่งการทดสอบให้ตัวเองหากคุณใช้อะไรที่นอกเหนือจากแท็กธรรมดา

กำหนดค่าปุ่ม

Modal, fullscreen, แต่ละสไลด์ของ stories, sheet และ video ใช้ฟิลด์ปุ่มเดียวกัน:

• Button text และสีของมัน
• Background, Border color และ Border radius
• Action: เลือกสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้แตะปุ่ม:
  • close: ปิด In-App
  • url: เปิดลิงก์ที่คุณป้อนในฟิลด์ที่ปรากฏขึ้น ใช้ที่อยู่เว็บ (เช่น https://example.com) หรือ deep link ไปยังแอปของคุณ (เช่น myapp://product/123)

คลิก Add เพื่อเพิ่มปุ่มอีกอัน หรือ × บนปุ่มเพื่อลบออก

ข้อควรระวัง

หากคุณปิด Close button และไม่เพิ่มปุ่มใดๆ ผู้ใช้จะไม่มีปุ่มควบคุมบนหน้าจอเพื่อปิด In-App

เพิ่มรูปภาพ

ทุกฟิลด์รูปภาพ (image, cover image และรูปภาพของการ์ดหรือสไลด์แต่ละอัน) ทำงานในลักษณะเดียวกัน วาง URL ของรูปภาพที่โฮสต์โดยตรงลงในฟิลด์ หรือคลิก Choose from Media storage ถัดจากนั้นเพื่อเปิด Media store และเลือกรูปภาพที่คุณอัปโหลดแล้ว การเลือกรูปภาพจาก Media store จะแทนที่ URL ใดๆ ที่มีอยู่ในฟิลด์ปัจจุบัน

เพิ่มการแปลภาษา

โดยค่าเริ่มต้น In-App แบบเนทีฟมีหนึ่งภาษา หากต้องการเพิ่ม:

หมายเหตุ

ตัวเลือกภาษาที่นี่นับเฉพาะอุปกรณ์บนแพลตฟอร์มที่เรนเดอร์เนื้อหา In-App ค่าภาษาที่ตั้งค่าผ่านแท็กระดับผู้ใช้ไม่ได้ผูกกับแพลตฟอร์มอุปกรณ์ ดังนั้นจึงไม่ปรากฏที่นี่

1. คลิก + ถัดจากตัวเลือกภาษาในแถบด้านบน
2. เลือกภาษาที่จะเพิ่มและคลิก Apply

3. ใช้ตัวเลือกภาษาในแถบด้านบนเพื่อสลับระหว่างภาษาและกรอกฟิลด์ข้อความสำหรับแต่ละภาษา

หมายเหตุ

เมื่อคุณเพิ่มภาษา Pushwoosh จะคัดลอกเนื้อหาของภาษาเริ่มต้นเข้าไป: ข้อความ, รูปภาพ และป้ายกำกับปุ่ม สลับไปที่ภาษานั้นและแก้ไขฟิลด์เหล่านี้อย่างอิสระ

บันทึกเทมเพลต

คลิก Save ที่มุมขวาบนเพื่อบันทึกการเปลี่ยนแปลงของคุณ

จากนั้นเทมเพลตจะปรากฏใน Content → In-apps พร้อมกับเทมเพลต In-App อื่นๆ ของคุณ

ใช้ในแคมเปญ

เทมเพลต In-App แบบเนทีฟจะปรากฏในตัวเลือกเทมเพลตพร้อมกับเทมเพลต In-App อื่นๆ ของคุณ

คุณสามารถใช้เพื่อ:

• ส่ง In-App ทันที
• เพิ่มขั้นตอน In-App ใน Customer Journey
• เปิด In-App เมื่อผู้ใช้แตะ push

หมายเหตุ

การตั้งค่าการจัดส่ง เช่น วันที่เริ่มต้นและสิ้นสุด และการจำกัดความถี่ ทำงานเหมือนกับ In-App อื่นๆ และไม่ได้เป็นส่วนหนึ่งของตัวแก้ไขนี้