หลายธุรกิจที่ใช้ LINE ในการปิดการขายสินค้า คงเคยประสบปัญหาเหล่านี้ การใช้งานมีข้อจำกัดทางด้านการสื่อสารที่อาจไม่ตอบโจทย์ ในแต่ละแคมเปญ เพราะฟีเจอร์ที่มีมาให้นั้นไม่สามารถปรับแต่ง หรือไม่สามารถใส่ข้อมูลให้ลูกค้าออกไปได้ครบ บทความนี้ SPARK Factor จะพาทุกคนมาทำความรู้จักกับ วิธีการสร้าง Flex Message สำหรับ LINE API จาก Flex Message Simulator ที่จะช่วยให้ธุรกิจสามารถสื่อสารกับลูกค้าได้อย่างตรงจุดมากกว่าเดิม มาฝากกัน
LINE API คืออะไร ?
LINE API นั้นคือ เครื่องมือที่เป็นสื่อกลางเชื่อมกันระหว่าง ช่องแชตของผู้ใช้งาน กับ Data Base Server ที่ทางธุรกิจได้ทำการเขียนโปรแกรม เพื่อสร้างสิ่งที่ต้องการตอบโต้กับผู้ใช้งาน พูดให้เห็นภาพก็คือเป็นการสร้าง Chat Bot ขึ้นมาเองโดยที่สามารถปรับแต่งการส่งข้อความถามตอบได้ตามที่ต้องการ ซึ่งในส่วนนี้จะต่างกันกับ Auto Response ที่ทำได้แค่ตั้งค่าคำตอบตามคีย์เวิร์ดที่เซตไว้เพียงอย่างเดียว
อย่างที่เราทราบกันดีว่า การส่ง Message ของ LINE นั้นจะมี ภาพ หรือ วิดีโอ ที่เป็นรูปแบบ (Template) ตายตัวซึ่งก็อาจจะไม่ได้สร้างความโดดเด่นหรือความน่าสนใจมากนัก อีกทั้งยังมีข้อจำกัดในการสื่อสาร เช่น ด้วยรูปแบบการส่งข้อความที่มีมาให้อาจไม่ตอบโจทย์ในการสื่อสารเพื่อปิดการขายครั้งนี้ ใส่ CTA (Call To Action) ลงไปไม่ได้ หรือ ช่องที่จะใส่รูปภาพไม่พอทำให้ข้อมูลไม่ครบ เป็นต้น การนำ Flex Message มาใช้จะช่วยธุรกิจสร้างสรรค์การสื่อสาร รูปแบบการส่งข้อความที่แปลกใหม่ สวยงามเป็นตัวของตัวเอง และมีประสิทธิภาพสูงได้
Flex Message คืออะไร ?
ประเภทข้อความที่ธุรกิจสามารถออกแบบและปรับแต่งได้ตามต้องการ โดยแสดงผลในรูปแบบแนวตั้งหรือแนวนอนได้ รวมถึงสามารถเพิ่มองค์ประกอบต่าง ๆ เช่น ปุ่มกด, ไอคอน, รูปภาพ หรือ ข้อความ อีกทั้งยังสามารถสร้าง Action จากปุ่ม (ฺBottom) และ รูปภาพ ให้ผู้ใช้งานสามารถกดเข้าไปได้ด้วย โดยวิธีการทำงานของ Flex Message นั้น จะคล้ายกันกับ การพัฒนาข้อความประเภทอื่น ๆ โดยการสร้าง JSON (JavaScript Object Notation) Format ของข้อความ เพื่อส่งเข้าไปยัง Messaging API โดยประเภทที่จะส่งไป คือ Flex Message นั่นเอง
โครงสร้างของ Flex Message ประกอบด้วยกันทั้งหมด 3 ขั้น
1. Container
โครงสร้างของFlex Message: Container
ภาพจาก LINE Developers
โครงสร้างส่วนนอกสุด ของ Flex Message มี 2 ประเภท ได้แก่
1. Bubble Container คือ ข้อความที่มีเพียง 1 การ์ด
โครงสร้างของFlex Message: Bubble Container
ภาพจาก LINE Developers
2. Carousel Container คือ ข้อความที่มีมากกว่า 1 การ์ด หรือ มากกว่า 1 Bubble ซึ่งผู้ใช้งานสามารถเลื่อนซ้ายขวาเพื่อดูแต่ละ bubble ได้
โครงสร้างของFlex Message: Carousel Container
ภาพจาก LINE Developers
2. Block
โครงสร้างของFlex Message: Block
ภาพจาก LINE Developers
โครงสร้างชั้นกลางที่แสดงองค์ประกอบของ Flex Message ประกอบไปด้วย 4 ส่วน ได้แก่
- Header ส่วนที่แสดงหัวข้อหรือส่วนหัวของข้อความ
- Hero ส่วนที่แสดงรูปภาพหลัก
- Body ส่วนที่แสดงข้อความหลัก
- Footer ส่วนที่แสดงปุ่มและข้อมูลเสริมอื่น ๆ
ซึ่งทั้งหมดนี้สามารถแสดงได้เพียงอย่างละ 1 Bubble เท่านั้น
3. Component
โครงสร้างชั้นในสุด ที่นำหลายส่วนมาประกอบกันแล้วกลายเป็น 1 บล็อก โดย Component แบ่งออกเป็น 2 ประเภท ได้แก่
- Component สำหรับสร้างข้อความ
- Component สำหรับการปรับแต่งโครงสร้าง (Layout)
ซึ่งภายใน Component จะประกอบไปด้วย
1. Box: ส่วนประกอบนี้เป็นตัวกำหนดโครงร่างของส่วนอื่น ๆ
2. Button: ส่วนประกอบที่แสดงถึงปุ่ม ที่ให้ผู้ใช้งานได้กดและดำเนินการได้ขั้นถัดไป
ส่วนของ Button ใน Component
ภาพจาก LINE Developers
3. Image: ส่วนประกอบที่แสดงรูปภาพ
ส่วนของ Image ใน Component
ภาพจาก LINE Developers
4. Video: ส่วนประกอบที่แสดงวิดีโอ
ส่วนของ Video ใน Component
ภาพจาก LINE Developers
5. Icon: ส่วนประกอบที่แสดงไอคอน ที่มีข้อความ (Text) ประกอบอยู่ด้านข้าง
ส่วนของ Icon ใน Component
ภาพจาก LINE Developers
6. Text: ส่วนประกอบที่แสดงข้อความในแถวเดียว ซึ่งสามารถกำหนดสี ขนาด และน้ำหนักของฟอนต์ได้
ส่วนของ Text ใน Component
ภาพจาก LINE Developers
7. Span: ส่วนประกอบที่แสดงข้อความที่มีหลากหลายรูปแบบในแถวเดียว ซึ่งสามารถกำหนดสีตัวอักษร ขนาด น้ำหนัก และการตกแต่งได้
ส่วนของ Span ใน Component
ภาพจาก LINE Developer
8. Separator: ส่วนประกอบที่แสดงเส้นแบ่งส่วน
ส่วนของ Separator ใน Component
ภาพจาก LINE Developers
สามารถใช้ Flex Message ส่งไปยังผู้ใช้งานได้ในกรณีไหนบ้าง
- ลูกค้าทักมาคุยกับแชตบอท และให้ตอบคำถาม (Reply Message) ด้วยFlex Message
- การส่งข้อความ Push Message ไปหาผู้ใช้งานบางคน (Personalize)
- การส่งข้อความ Narrowcast เป็นการส่งข้อความไปหาผู้ใช้งานบางกลุ่ม
- การส่งข้อความ Broadcast ไปหาผู้ติดตาม
- การใช้ฟังก์ชัน liff.sendMessages() เพื่อส่งข้อความไปหาคนที่เปิด LIFF* อยู่
- การใช้ฟังก์ชัน liff.shareTargetPicker() เพื่อแชร์ข้อความไปหาเพื่อนของคนที่เปิด LIFF*
* LIFF คือ การเปิดหน้าเว็ปไซต์ (Web View) บนแอปพลิเคชัน LINE โดยตรง เช่น การสร้างแบบฟอร์มลงทะเบียน หรือ การแสดงสินค้าหลายรายการ ของธุรกิจ eCommerce เป็นต้น
ข้อดีของFlex Message คือ ผู้พัฒนานั้นไม่จำเป็นต้องเขียนโค้ด (Code) ก็สามารถใช้งานได้เลย รวมไปถึงยังช่วยให้ธุรกิจ สามารถตรวจสอบรูปแบบการแสดงผลของข้อความก่อนนำไปใช้จริงบน LINE API ได้อีกด้วย ซึ่งเครื่องมือที่ใช้ทำ Flex Message นั้นเรียกว่าFlex Message Simulator ที่เรากำลังจะอธิบายวิธีการทำในขั้นต่อไป
วิธีการสร้าง Flex Message ผ่านFlex Message Simulator ในรูปแบบ Bubble*
1. เข้าไปยังเว็บไซต์ https://developers.line.biz/flex-simulator/
หน้าเว็บไซต์Flex Message Simulator
ภาพจาก LINE Developers
2. กดปุ่ม New และ เลือก ประเภท Container ที่ต้องการ ในตัวอย่างนี้จะเลือกเป็น Bubble
วิธีการสร้างFlex Message Container ประเภท Bubble
ภาพจาก LINE Developers
3. หน้าจอจะแสดง Bubble โดยภายในจะมี Header, Hero, Body, และ Footer ในขั้นนี้ ส่วนของ Component จะยังไม่มีอะไร
วิธีการสร้างFlex Message ส่วนประกอบภายใน Bubble
ภาพจาก LINE Developers
4. กดเข้าไปที่ Bubble เพื่อกำหนดคุณสมบัติ (Property) ของ Flex Message ซึ่งได้แก่
- Direction: กำหนดให้ Component เรียงจาก ซ้ายไปขวา หรือ ขวาไปซ้าย)
- Size: กำหนดขนาดของ Bubble เช่น ขนาด Giga จะเป็นขนาดที่เต็มจอ เป็นต้น)
- Action: เมื่อผู้ใช้งานกด Bubble จะเกิดอะไรขึ้น แนะนำให้เว้นว่างไว้ เนื่องจากจะนำไปใส่ Action ใน Block แทน
5. กำหนดค่าของ Block Header
การสร้างFlex Message วิธีการกำหนดค่าภายใน Header
ภาพจาก LINE Developers
6. ใส่ Component ใน Block Header ดังนี้
การสร้างFlex Message วิธีสร้าง Component
ภาพจาก LINE Developers
- กดเข้าไปที่ปุ่ม + เพื่อสร้าง Box (1)
การสร้างFlex Message วิธีสร้าง Component การเพิ่ม Box
ภาพจาก LINE Developers
- เลือกส่วนประกอบของ Component ในที่นี้จะเลือกเป็น Text (2)
การสร้างFlex Message วิธีสร้าง Component การตั้งค่า Text และ การแสดงผล
ภาพจาก LINE Developers
- ปรับแต่ง Text ตามที่ต้องการ (3) และ ดูการแสดงผลที่ด้านซ้ายมือ (4)
*ใช้วิธีการตั้งค่า Component เช่นเดียวกันนี้กับทุก Block
7. กำหนดค่าของ Block Hero
การสร้างFlex Message วิธีการกำหนดค่าภายใน Hero
ภาพจาก LINE Developers
8. ใส่ Component ใน Block Hero เลือกได้แค่ รูป หรือ วิดีโอ
9. กำหนดค่าของ Block Body
การสร้างFlex Message วิธีการกำหนดค่าภายใน Body
ภาพจาก LINE Developers
10. ใส่ Component ใน Body
11. กำหนดค่าของ Block Footer
การสร้างFlex Message วิธีการกำหนดค่าภายใน Footer
ภาพจาก LINE Developers
12. ใส่ Component ใน Footer
13. สามารถดูตัวอย่างข้อความ Flex Message บนมือถือได้โดยการกดปุ่ม Send Message
การสร้างFlex Message วิธีดูตัวอย่างข้อความด้วยการส่ง Send Message
ภาพจาก LINE Developers
การสร้างFlex Messageวิธีดูตัวอย่างข้อความด้วยการส่ง Send Message
ภาพจาก LINE Developers
14. หากตรวจสอบความเรียบร้อยแล้ว สามารถ Save JSON Code เพื่อนำไปใช้งานต่อได้โดยการกดไปที่ View as JSON เราก็จะได้ Code JSON เพื่อนำมาทำการ Broadcast ต่อไป ทั้งนี้สามารถเข้าไปศึกษาวิธีการนำ Code ไปใช้งานได้ที่ บทความ ปลดล็อกลิมิต LINE Rich Menu!! 5 ขั้นตอนง่ายๆ สร้าง LINE Rich Menu 8 ช่อง
*ทั้งนี้การสร้าง Flex Messageในรูปแบบ Carousel มีการใช้วิธีสร้างที่คล้ายกัน
สรุป วิธีการสร้างFlex Messageสำหรับ LINE API จาก Flex Message Simulator
การนำ Flex Messageเข้ามาใช้ถือเป็นอีกหนึ่งตัวเลือกที่ดีที่จะช่วยให้ธุรกิจสามารถสื่อสารไปยังผู้ใช้งานได้อย่างตรงจุด และเพิ่มประสิทธิภาพของข้อมูลหรือสิ่งที่ต้องการสื่อสารได้อย่างครบถ้วน ผ่านข้อความ รูปภาพ หรือวิดีโอ ที่ได้ทำการปรับแต่งรูปแบบที่เหมาะสมแก่กลุ่มเป้าหมายเป็นการเพิ่มโอกาสในการปิดการขายและช่วยให้ธุรกิจบรรลุเป้าหมายในการทำแคมเปญครั้งนี้
สุดท้ายนี้หากใครอยากรู้วิธีการใช้ ขั้นตอนการทำ JSON Code
หรือ บทความดี ๆ เกี่ยวกับ LINE API และการตลาด
คุณสามารถอ่านคอนเทนต์อื่น ๆ จากทาง Spark Factor ได้ที่นี่
หรือ หากคุณกำลังมองหา Digital Marketing Agency ที่สามารถ
ช่วยให้ แบรนด์ของคุณถูกสื่อสารไปหาลูกค้า และ เพื่อนำไปสู่
การสร้างยอดขายได้คุณสามารถติดต่อมาหาเราได้ที่นี่ Spark Factor
