สร้างข้อความ 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+

สร้างเทมเพลต 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
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 ไว้ แบนเนอร์จะยังคงอยู่บนหน้าจอโดยไม่มีทางปิดได้ การแตะจะเปิดลิงก์เสมอแทนที่จะปิด

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

ฟิลด์ข้อความไม่รองรับข้อความหลายบรรทัด หากคุณกด 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 ใช้ฟิลด์ปุ่มเดียวกัน:

• 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

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

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

หมายเหตุ

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

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 อื่นๆ และไม่ได้เป็นส่วนหนึ่งของตัวแก้ไขนี้