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

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

หมายเหตุ

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

สร้างเทมเพลต in-app ใหม่

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

1. ไปที่ Content → In-apps
2. คลิก Create in-app เครื่องมือแก้ไขในตัวจะเปิดขึ้นทันที

คลิกลูกศรข้าง Create in-app เพื่อสร้างเทมเพลตด้วยวิธีอื่น:

• Upload ZIP: อัปโหลดไฟล์ ZIP พร้อมข้อความ in-app แบบ HTML ของคุณ
• Native in-app: สร้างข้อความที่แสดงผลโดย SDK โดยใช้เลย์เอาต์สำเร็จรูป เรียนรู้เพิ่มเติม

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

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

แถบด้านบน

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

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

Preview

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

สิ่งที่ทำงานใน preview:

• ปุ่มและโฟลว์หลายหน้าจอทำงานจริง
• ลิงก์และ deep link จะถูกรายงาน แต่ไม่เปิด
• การเรียก 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
• เนื้อหาที่ยังไม่ได้แปล
• ตัวจับเวลาถอยหลังที่วันสิ้นสุดผ่านไปแล้ว
• เงื่อนไขการแสดงผล ที่มีกฎเสียหรือว่าง, สาขาที่สูญเสียบล็อกที่เชื่อมโยงไป หรือเงื่อนไขที่จะไม่ถูกนำไปใช้เนื่องจากเนื้อหาไดนามิกถูกปิดใช้งานสำหรับบัญชี

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

พื้นที่ทำงาน

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

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

Layers

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

แผงด้านขวา

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

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

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

1. เปิดแท็บ Blocks ในแผงด้านขวา
2. ลากบล็อกไปยังพื้นที่ทำงาน หรือคลิกบล็อกเพื่อเพิ่มที่ท้ายเทมเพลต
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 ของผู้ใช้ คุณยังคงส่งเทมเพลตเดียว แต่แต่ละคนจะเห็นเฉพาะส่วนที่เกี่ยวข้องกับพวกเขาเท่านั้น

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

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

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

หมายเหตุ

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

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

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

หมายเหตุ

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

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

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

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

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

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

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

หมายเหตุ

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

อัปเดตคำแปลจากระบบของคุณเอง

ทีมพัฒนาของคุณสามารถอัปเดตคำแปลของเทมเพลตที่บันทึกไว้ผ่าน Pushwoosh API หรือไคลเอนต์ AI ที่เชื่อมต่อกับ เซิร์ฟเวอร์ ManyMoney AI MCP โดยไม่ต้องส่ง HTML หรือดีไซน์ของเทมเพลตซ้ำ

สิ่งนี้ใช้ได้กับเทมเพลตที่ถูกบันทึกไว้อย่างน้อยหนึ่งครั้งเท่านั้น (ดู บันทึกเทมเพลต ด้านบน) เทมเพลตที่ไม่มีเนื้อหาที่บันทึกไว้จะไม่มีอะไรให้รวมคำแปลเข้าไป

การอัปเดตจะรวมเฉพาะภาษาและคีย์ข้อความที่ส่งในฟิลด์ localization เท่านั้น ภาษา, คีย์ และดีไซน์ภาพอื่นๆ ทั้งหมดจะยังคงเหมือนเดิม

• การส่งคีย์ที่ไม่มีค่าจะลบคีย์นั้นออกจากภาษาของมัน
• การส่งภาษาที่ไม่มีค่าจะลบทั้งภาษานั้นออกจากเทมเพลต
• ภาษาเริ่มต้นสามารถเปลี่ยนเป็นภาษาใดก็ได้ที่เหลืออยู่ในเทมเพลตหลังจากการอัปเดต
• การอัปเดตจะถูกปฏิเสธหากเป็นการลบทุกภาษาออกจากเทมเพลต หรือหากภาษาเริ่มต้นที่ร้องขอไม่ใช่หนึ่งในภาษาที่เหลืออยู่หลังจากการรวม

สำหรับสิ่งนี้ คุณจะต้องได้รับความช่วยเหลือจากทีมพัฒนาของคุณ