Flex Message คือรูปแบบข้อความที่สามารถจัดเลย์เอาต์ได้อย่างอิสระด้วย JSON สามารถจัดวางข้อความ รูปภาพ และปุ่มได้อย่างละเอียด แต่การสร้างจำเป็นต้องเขียน JSON
หากต้องการสร้างข้อความที่ออกแบบประณีตแบบไม่ต้องเขียนโค้ด ข้อความประเภทการ์ดหรือ Rich Message จะสะดวกกว่า เพียงบอกเป้าหมายให้ Marketing Agent ของ Lumo ก็สามารถมอบหมายได้ตั้งแต่การเลือกรูปแบบข้อความที่เหมาะกับวัตถุประสงค์ไปจนถึงการสร้างร่าง กรุณาใช้ขั้นตอนในบทความนี้เมื่อต้องการควบคุมเลย์เอาต์ของ Flex Message อย่างละเอียดด้วยตนเอง
สิ่งที่ทำได้ด้วย Flex Message
Flex Message สามารถระบุขนาด การจัดวาง และสีขององค์ประกอบได้อย่างละเอียด เพื่อแสดงข้อความที่ออกแบบเองในข้อความเดียว
เหมาะกับเลย์เอาต์ที่เทมเพลตสำเร็จรูปแสดงได้ไม่ครบถ้วน เช่น การ์ดแนะนำสินค้า การยืนยันการจอง ใบเสร็จ และคูปอง อีกทั้งยังสามารถสร้างโครงสร้างที่เรียงการ์ดหลายใบในแนวนอนให้ปัดดูได้
| ตัวอย่างการใช้งาน | เหตุผลที่เหมาะสม |
|---|---|
| การ์ดแนะนำสินค้า | สามารถจัดวางรูปภาพ ราคา และปุ่มไว้ในการ์ดเดียว |
| ยืนยันการจอง/คำสั่งซื้อ | จัดเรียงรายการในแนวตั้งให้ดูเหมือนใบแสดงรายละเอียด |
| คูปอง/แจ้งสิทธิพิเศษ | ปรับขนาดและสีของข้อมูลที่ต้องการเน้นได้อย่างอิสระ |
มอบหมายให้ Marketing Agent
เมื่อลังเลเรื่องเนื้อหาหรือรูปแบบข้อความ การปรึกษา Marketing Agent ก่อนคือทางลัด
เมื่อบอกเป้าหมาย เช่น "อยากสร้างข้อความแนะนำสินค้าใหม่" เอเจนต์ AI จะเลือกรูปแบบที่เหมาะกับวัตถุประสงค์และเตรียมร่างให้ เนื่องจากเอเจนต์จะเสนอรวมถึงว่าจำเป็นต้องใช้รูปแบบที่มีอิสระสูงอย่าง Flex Message หรือไม่ จึงสามารถกำหนดทิศทางได้ก่อนที่จะเขียน JSON เอง
เนื้อหาที่เอเจนต์สร้างขึ้นสามารถตรวจสอบได้ในหน้าจออนุมัติก่อนการส่ง หากไม่มีปัญหาให้เลือก ดำเนินการ หากต้องการทบทวนให้เลือก ยกเลิก
สร้าง Flex Message ด้วยตนเอง
Flex Message สร้างโดยตรงในแต่ละการส่งจากหน้าจอสร้างการส่งข้อความ ไม่ได้จัดการเป็นไอเท็มที่บันทึกไว้ใช้ซ้ำ
- เปิดหน้าจอสร้างหรือหน้าจอแก้ไขการส่งข้อความ
- เลือก Flex Message จากประเภทข้อความ
- วาง JSON ของข้อความลงในช่องกรอก Flex JSON
- กรอก ข้อความทางเลือก (จะแสดงในการแจ้งเตือนแบบ Push และรายการแชท)
- ตรวจสอบการแสดงผลด้วยตัวอย่าง
JSON เขียนด้วยโครงสร้าง Bubble (การ์ด 1 ใบ) หรือ Carousel (เรียงการ์ดหลายใบในแนวนอน) จะมีประสิทธิภาพมากขึ้นหากจัดเลย์เอาต์ด้วยซิมูเลเตอร์ที่ LINE ให้บริการ แล้ววาง JSON ที่สร้างขึ้นลงในช่องกรอก
โครงสร้างพื้นฐานของ JSON
JSON ของ Flex Message ประกอบขึ้นโดยใช้ Bubble (การ์ด 1 ใบ) หรือ Carousel (กลุ่มการ์ดหลายใบ) เป็นหน่วยพื้นฐาน
Bubble หนึ่งใบสร้างขึ้นโดยการรวมพื้นที่ต่อไปนี้ ไม่จำเป็นต้องใช้ทุกพื้นที่ ระบุเฉพาะพื้นที่ที่ต้องการ
| พื้นที่ | บทบาท |
|---|---|
| header | พื้นที่หัวข้อที่แสดงด้านบนของการ์ด |
| hero | พื้นที่แสดงรูปภาพหลัก |
| body | พื้นที่เนื้อหาหลัก เช่น ข้อความและปุ่ม |
| footer | พื้นที่ส่วนท้ายที่แสดงด้านล่างของการ์ด |
เมื่อรวม Bubble หลายใบไว้ใน Carousel ผู้รับจะสามารถปัดในแนวนอนเพื่อดูการ์ดหลายใบได้
ตรวจสอบด้วยตัวอย่าง
เมื่อกรอก JSON จะสามารถแก้ไขพร้อมตรวจสอบการแสดงผลบน LINE ด้วยตัวอย่างได้
ก่อนการส่ง กรุณาตรวจสอบในตัวอย่างว่าตำแหน่งการแสดงรูปภาพ การตัดบรรทัดของตัวอักษร และการจัดวางปุ่มเป็นไปตามที่ตั้งใจหรือไม่ เนื่องจากแสดงในรูปแบบใกล้เคียงกับหน้าจอแชท LINE จริง จึงสามารถพบเลย์เอาต์ที่ผิดเพี้ยนได้ก่อนส่ง
เมื่อทำไม่สำเร็จ
เนื่องจาก Flex Message ขึ้นอยู่กับการเขียน JSON ปัญหาส่วนใหญ่จึงมีสาเหตุมาจากรูปแบบ JSON
| อาการ | สิ่งที่ต้องตรวจสอบ |
|---|---|
| แสดงข้อผิดพลาดเกี่ยวกับรูปแบบ JSON | ตรวจสอบว่าวงเล็บและจุลภาคจับคู่ถูกต้องหรือไม่ ตัวแก้ไขจะแสดงตำแหน่งที่ผิดพลาด |
| ตัวอย่างไม่แสดง | ตรวจสอบว่าตั้งค่ารายการที่จำเป็น (type, altText ฯลฯ) ถูกต้องหรือไม่ |
| แสดงผลผิดเพี้ยนบน LINE | ตรวจสอบว่าขนาดรูปภาพและจำนวนตัวอักษรอยู่ในขอบเขตข้อกำหนดของ Flex Message หรือไม่ |
หากเขียน JSON เองได้ยาก กรุณาพิจารณาเปลี่ยนไปใช้ข้อความประเภทการ์ดหรือ Rich Message ทั้งสองแบบนี้สามารถสร้างเลย์เอาต์ที่ดูดีได้โดยไม่ต้องเขียนโค้ด