สร้างข้อความ In-App ในเครื่องมือแก้ไขในตัว

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

หมายเหตุ

ก่อนที่คุณจะเริ่ม ให้ผสานรวม Pushwoosh SDK เพื่อให้ข้อความ In-App สามารถปรากฏในแอปของคุณได้ เรียนรู้เพิ่มเติม

สร้างเทมเพลต In-App ใหม่

เทมเพลต In-App คือดีไซน์ที่ใช้ซ้ำได้ซึ่งคุณสร้างขึ้นครั้งเดียวแล้วนำไปแสดงให้ผู้ใช้เห็นในแคมเปญต่างๆ คุณสามารถสร้างเทมเพลตในเครื่องมือแก้ไขในตัว, อัปโหลดไฟล์ HTML ZIP ที่กำหนดเอง, หรือสร้างเทมเพลต rich media แบบเนทีฟ บทความนี้จะครอบคลุมการสร้างเทมเพลตตั้งแต่ต้นในเครื่องมือแก้ไขในตัว ทำตามขั้นตอนเดียวกันเพื่อปรับแต่งเทมเพลตที่มีอยู่

1. ไปที่ Content → In-apps
2. คลิก Create in-app

3. ป้อนชื่อเทมเพลต
4. เลือกวิธีสร้างเทมเพลต:
   • Create new template: สร้างเทมเพลตในเครื่องมือแก้ไขในตัว
   • Upload ZIP: อัปโหลดไฟล์ ZIP พร้อมข้อความ In-App แบบ HTML ของคุณ
   • Create native rich media: สร้าง In-App แบบเนทีฟที่แสดงผลโดย SDK เรียนรู้เพิ่มเติม
5. เลือก Create new template
6. คลิก Create in-app

สำรวจเลย์เอาต์ของเครื่องมือแก้ไข

เครื่องมือแก้ไขในตัวมีสี่ส่วน แต่ละส่วนมีหน้าที่ชัดเจน

แถบด้านบน

แถบด้านบนเป็นที่ที่คุณจัดการเทมเพลตโดยรวม: ชื่อ, ประวัติการเลิกทำ, สถานะการบันทึก, ลักษณะที่ปรากฏบนอุปกรณ์ (In-app settings), ภาษา (Auto-translate และตัวสลับภาษา), ความกว้างของการแสดงตัวอย่างบนโทรศัพท์หรือเดสก์ท็อป (โทรศัพท์มีให้เลือก 360, 390, 393, หรือ 430 px ซึ่งตรงกับความกว้างทั่วไปของอุปกรณ์), และตัวสลับผ้าใบสว่าง/มืด (ไอคอนพระอาทิตย์/พระจันทร์) ดู กำหนดค่าลักษณะที่ In-App ปรากฏบนอุปกรณ์ และ ปรับเทมเพลตให้เป็นภาษาท้องถิ่น

เปิดเมนู ⋮ ในแถบด้านบนเพื่อดูการดำเนินการเพิ่มเติม:

Preview

Preview ให้คุณลองใช้ข้อความก่อนที่จะบันทึก: แตะปุ่ม, เลื่อนดูโฟลว์หลายหน้าจอ, และตรวจสอบเลย์เอาต์บนโทรศัพท์หรือเดสก์ท็อป

สิ่งที่ทำงานในโหมด preview:

• ปุ่มและโฟลว์หลายหน้าจอทำงานจริง
• ลิงก์และ deep links จะถูกรายงาน แต่ไม่เปิด
• การเรียก SDK และสถิติการเปิด/คลิกจะยังคงปิดอยู่
• ภาษาจะตรงกับตัวสลับภาษา Merge Tags จะยังคงเป็นตัวยึดตำแหน่ง

ในส่วนหัวของ preview, สลับระหว่างโทรศัพท์และเดสก์ท็อป, และระหว่างสว่างและมืด, เพื่อดูเลย์เอาต์ผลลัพธ์ทั้งหมด คลิก Restart เพื่อแสดงข้อความตั้งแต่ต้นอีกครั้ง หากต้องการออกจาก preview, กด Esc หรือคลิกนอกแผง

Check

Check เปิด Smart check และสแกนเทมเพลตเพื่อหาปัญหาทั่วไป

Smart check จะมองหา:

• ปุ่ม, รายการเมนู, และลิงก์รูปภาพที่ไม่มี URL, หรือมี URL ที่ไม่ใช่ที่อยู่ http(s), mailto:, tel:, หรือ deep link (เช่น myapp://promo)
• บล็อกตัวยึดตำแหน่ง AI ที่ยังไม่เสร็จ
• ช่องรูปภาพหรือวิดีโอที่ว่างเปล่าและข้อความ alt ที่หายไป
• การ์ดผลิตภัณฑ์ที่มีลิงก์ที่หายไปหรือไม่ถูกต้อง
• คอนทราสต์ของข้อความที่ไม่เป็นไปตาม WCAG AA
• เนื้อหาที่ยังไม่ได้แปล
• ตัวนับถอยหลังที่วันสิ้นสุดผ่านไปแล้ว
• display condition ที่มีกฎที่เสียหรือว่างเปล่า, สาขาที่สูญเสียบล็อกที่เชื่อมโยงไป, หรือเงื่อนไขที่จะไม่ถูกนำไปใช้เนื่องจากเนื้อหาไดนามิกถูกปิดใช้งานสำหรับบัญชี

คลิกที่ผลการค้นหาเพื่อข้ามไปยังองค์ประกอบที่ได้รับผลกระทบบน canvas ทันที หากไม่มีอะไรผิดพลาด แผงจะแสดง All checks passed — the content looks ready to save.

Brand book

• Brand book: เปิด Brand book ของบัญชีคุณ
• Apply brand book styles: จัดสไตล์เทมเพลตใหม่ให้ตรงกับ Brand book ของคุณ (หลังจากที่คุณตั้งค่าแล้ว)
• Reset custom styles: ลบการแทนที่สไตล์ที่กำหนดเองบนเทมเพลตและกลับไปเป็นค่าเริ่มต้น

Download .zip

Download .zip บันทึกเทมเพลตเป็นไฟล์ ZIP จะดาวน์โหลดเวอร์ชันที่บันทึกล่าสุด ดังนั้นควรบันทึกการเปลี่ยนแปลงของคุณก่อน รายการเมนูจะปรากฏขึ้นหลังจากที่เทมเพลตถูกบันทึกอย่างน้อยหนึ่งครั้งเท่านั้น — เทมเพลตใหม่ที่ยังไม่ได้บันทึกจะไม่แสดงรายการนี้

Canvas

แก้ไขข้อความบน canvas: คลิกข้อความ, รูปภาพ, และปุ่มเพื่อเปลี่ยนแปลง ใช้ตัวสลับโทรศัพท์/เดสก์ท็อปในแถบด้านบนเพื่อตรวจสอบว่าเลย์เอาต์มีลักษณะอย่างไรในแต่ละความกว้าง ตัวสลับจะเปลี่ยนเฉพาะการแสดงตัวอย่างเท่านั้น ไม่ใช่ตัวเลย์เอาต์เอง

ใช้ ไอคอนพระอาทิตย์/พระจันทร์ ในแถบด้านบนเพื่อแก้ไข canvas ต่อไปในขณะที่แสดงผลในโหมดสว่างหรือมืด มันทำงานได้แม้ว่าจะไม่ได้ตั้งค่า Dark mode variant — สีเข้มจะถูกสร้างขึ้นโดยอัตโนมัติจนกว่าคุณจะตั้งค่าของคุณเอง นี่คือมุมมองการแก้ไขสด ไม่ใช่แผง Preview ที่อ่านได้อย่างเดียว

Layers

แผง Layers จะแสดงรายการทุกบล็อกในเทมเพลตของคุณเป็นโครงสร้างต้นไม้ ในลำดับเดียวกับบน canvas เปิดจากขอบด้านซ้ายเพื่อเลือกบล็อกที่ซ้อนกัน (เช่น ปุ่มภายในกลุ่ม) หรือลากแถวเพื่อจัดลำดับเนื้อหาใหม่

แผงด้านขวา

สลับระหว่างสามแท็บ:

• Blocks: เพิ่มเนื้อหาลงในข้อความ ดู การอ้างอิงบล็อกของเครื่องมือแก้ไข In-App
• Settings: ใช้สไตล์กับเทมเพลตทั้งหมดในครั้งเดียว ดู กำหนดค่าการตั้งค่าเทมเพลต In-App
• AI: แชทกับผู้ช่วย AI เพื่อสร้างหรือแก้ไขเนื้อหาจาก prompt

เพิ่มบล็อกเนื้อหา

1. เปิดแท็บ Blocks ในแผงด้านขวา
2. ลากบล็อกลงบน canvas, หรือคลิกบล็อกเพื่อเพิ่มที่ท้ายเทมเพลต
3. เพิ่มบล็อกต่อไปจนกว่าเลย์เอาต์จะพร้อม

บล็อกแต่ละประเภทมีวัตถุประสงค์ที่แตกต่างกันในข้อความ:

• Heading: หัวข้อและหัวเรื่องสั้นๆ
• Text: เนื้อหาหลักและคำอธิบายที่ยาวขึ้น
• Button: call to action ที่สามารถแตะได้
• Image: รูปภาพจาก Media store, การอัปโหลด, หรือ URL
• Video: ภาพขนาดย่อของวิดีโอที่สามารถแตะได้ซึ่งจะเปิดวิดีโอ YouTube หรือ Vimeo
• Card: รูปภาพพร้อมหัวเรื่อง, ข้อความ, และปุ่มในเลย์เอาต์เดียว
• Divider: เส้นที่แบ่งส่วนต่างๆ
• Columns: เลย์เอาต์แบบเคียงข้างกัน (2, 3, หรือ 4 คอลัมน์เท่ากัน, หรือแบ่ง 33/67 และ 67/33)
• Timer: การนับถอยหลังสำหรับข้อเสนอและกำหนดเวลา
• Menu: แถวหรือคอลัมน์ของลิงก์การนำทางหรือการติดต่อ
• Social: ไอคอนที่เชื่อมโยงไปยังโปรไฟล์โซเชียลของคุณ
• HTML: HTML ที่กำหนดเอง เช่น แบบฟอร์ม, แบบสำรวจ, หรือวิดีโอที่ฝังไว้
• Products: ตารางของการ์ดผลิตภัณฑ์จาก Product Catalog ของคุณหรือตะกร้าสินค้าที่ถูกทิ้งของผู้ใช้

ดู การอ้างอิงบล็อกของเครื่องมือแก้ไข In-App สำหรับการตั้งค่าของแต่ละบล็อก, และ วิธีบันทึกและนำบล็อกกลับมาใช้ใหม่

แสดงบล็อกให้ผู้ใช้เฉพาะกลุ่ม

ไม่ใช่ผู้ใช้ทุกคนที่ต้องเห็นบล็อกเดียวกัน ตั้งค่า display condition บนบล็อกเพื่อให้แสดงหรือซ่อนตาม Tags ของผู้ใช้ คุณยังคงส่งเทมเพลตเดียว แต่แต่ละคนจะเห็นเฉพาะส่วนที่เกี่ยวข้องกับพวกเขาเท่านั้น

เลือกบล็อกบน canvas, เปิด Display condition ในแผงด้านขวา, และเปิด Show this block conditionally เรียนรู้เพิ่มเติม

ปรับเทมเพลตให้เป็นภาษาท้องถิ่น

เทมเพลตหลายภาษาจะเก็บสำเนาที่แปลเป็นภาษาท้องถิ่นสำหรับแต่ละภาษาไว้ในดีไซน์ In-App เดียว สำหรับวิธีการทำงานของการส่งข้อความหลายภาษาในช่องทางต่างๆ ดู Multi-language messaging

หมายเหตุ

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

ในการตั้งค่าเนื้อหาหลายภาษา:

1. คลิกตัวสลับภาษาในแถบด้านบนเพื่อเปิดรายการภาษา
2. เลือกภาษาที่คุณต้องการเพิ่ม จากนั้นคลิก Apply
3. ใช้ตัวสลับภาษาเพื่อสลับไปมาระหว่างภาษาและแก้ไขเนื้อหาของแต่ละบล็อกสำหรับภาษาที่เลือก
4. คลิก Auto-translate เพื่อเติมคำแปลที่ขาดหายไปโดยอัตโนมัติ — ตรวจสอบข้อความที่สร้างโดย AI ก่อนบันทึก

หมายเหตุ

บล็อกใดๆ ที่คุณเพิ่มจะปรากฏพร้อมเนื้อหาเดียวกันสำหรับทุกภาษา อย่าลืมแปลข้อความใหม่และป้ายกำกับปุ่มสำหรับทุกภาษาที่คุณใช้ในเทมเพลตของคุณ

กำหนดค่าการตั้งค่าเทมเพลต

ใช้สองที่ในการจัดสไตล์และวางตำแหน่งข้อความ:

• แท็บ Settings (แผงด้านขวา): ขนาดเอกสาร, สี, การพิมพ์, และสไตล์เริ่มต้นสำหรับบล็อก
• In-app settings (แถบด้านบน): ตำแหน่งบนหน้าจอ, แอนิเมชัน, และปุ่มปิด

เรียนรู้เพิ่มเติม

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

คลิก Save ในแถบด้านบนเพื่อบันทึกการเปลี่ยนแปลงของคุณ ใช้ Undo/Redo ในแถบด้านบนเพื่อย้อนกลับและเดินหน้าผ่านการแก้ไขของคุณ

หมายเหตุ

การบันทึกจะเก็บเทมเพลต In-App ของคุณไว้ใน Content → In-apps จากที่นั่นคุณสามารถดูตัวอย่าง, แก้ไข, และจัดการเทมเพลตได้ เรียนรู้เพิ่มเติม