สร้างข้อความในแอปในตัวแก้ไขในตัว

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

หมายเหตุ

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

สร้างเทมเพลต 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 ซึ่งตรงกับความกว้างของอุปกรณ์ทั่วไป), และตัวสลับ canvas แบบสว่าง/มืด (ไอคอนพระอาทิตย์/พระจันทร์) ดู กำหนดค่าลักษณะที่ 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 text
• การ์ดผลิตภัณฑ์ที่ไม่มีลิงก์หรือลิงก์ไม่ถูกต้อง
• คอนทราสต์ของข้อความที่ไม่เป็นไปตามมาตรฐาน WCAG AA
• เนื้อหาที่ยังไม่ได้แปล
• ตัวจับเวลาถอยหลังที่วันสิ้นสุดผ่านไปแล้ว
• เงื่อนไขการแสดงผล ที่มีกฎเสียหรือว่าง, สาขาที่สูญเสียบล็อกที่เชื่อมต่อไป, หรือเงื่อนไขที่จะไม่ถูกนำไปใช้เนื่องจากเนื้อหาไดนามิกถูกปิดใช้งานสำหรับบัญชี

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