วิธีการสร้าง Flex Message สำหรับ LINE API จาก Flex Message Simulator

หลายธุรกิจที่ใช้ 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 

Container โครงสร้างของ Flex Message

โครงสร้างของ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 

Block โครงสร้างของ Flex Message

โครงสร้างของFlex Message: Block 
ภาพจาก LINE Developers 

โครงสร้างชั้นกลางที่แสดงองค์ประกอบของ Flex Message ประกอบไปด้วย 4 ส่วน ได้แก่  

  1. Header ส่วนที่แสดงหัวข้อหรือส่วนหัวของข้อความ 
  1. Hero ส่วนที่แสดงรูปภาพหลัก 
  1. Body ส่วนที่แสดงข้อความหลัก 
  1. Footer ส่วนที่แสดงปุ่มและข้อมูลเสริมอื่น ๆ  

ซึ่งทั้งหมดนี้สามารถแสดงได้เพียงอย่างละ 1 Bubble เท่านั้น  

3. Component 

โครงสร้างชั้นในสุด ที่นำหลายส่วนมาประกอบกันแล้วกลายเป็น 1 บล็อก  โดย Component แบ่งออกเป็น 2 ประเภท ได้แก่  

  1. Component สำหรับสร้างข้อความ  
  1. Component สำหรับการปรับแต่งโครงสร้าง (Layout)  

ซึ่งภายใน Component จะประกอบไปด้วย  

1. Box: ส่วนประกอบนี้เป็นตัวกำหนดโครงร่างของส่วนอื่น ๆ 

2. Button: ส่วนประกอบที่แสดงถึงปุ่ม ที่ให้ผู้ใช้งานได้กดและดำเนินการได้ขั้นถัดไป 

Button ใน Component โครงสร้างของ Flex Message

ส่วนของ Button ใน Component 
ภาพจาก LINE Developers  

3. Image: ส่วนประกอบที่แสดงรูปภาพ

Image ใน Component โครงสร้างของ Flex Message

ส่วนของ Image ใน Component 
ภาพจาก LINE Developers  

4. Video: ส่วนประกอบที่แสดงวิดีโอ

Video ใน Component โครงสร้างของ Flex Message

ส่วนของ Video ใน Component 
ภาพจาก LINE Developers   

5. Icon: ส่วนประกอบที่แสดงไอคอน ที่มีข้อความ (Text) ประกอบอยู่ด้านข้าง  

Icon ใน Component โครงสร้างของ Flex Message

ส่วนของ Icon ใน Component 
ภาพจาก LINE Developers  

6. Text: ส่วนประกอบที่แสดงข้อความในแถวเดียว ซึ่งสามารถกำหนดสี ขนาด และน้ำหนักของฟอนต์ได้

Text ใน Component โครงสร้างของ Flex Message

ส่วนของ Text ใน Component 
ภาพจาก LINE Developers   

7. Span: ส่วนประกอบที่แสดงข้อความที่มีหลากหลายรูปแบบในแถวเดียว ซึ่งสามารถกำหนดสีตัวอักษร ขนาด น้ำหนัก และการตกแต่งได้  

Span ใน Component โครงสร้างของ Flex Message

 
ส่วนของ Span ใน Component 
ภาพจาก LINE Developer

8. Separator: ส่วนประกอบที่แสดงเส้นแบ่งส่วน

Separator ใน Component โครงสร้างของ Flex Message

ส่วนของ Separator ใน Component 
ภาพจาก LINE Developers 

สามารถใช้ Flex Message ส่งไปยังผู้ใช้งานได้ในกรณีไหนบ้าง   

  1. ลูกค้าทักมาคุยกับแชตบอท และให้ตอบคำถาม (Reply Message) ด้วยFlex Message 
  1. การส่งข้อความ Push Message ไปหาผู้ใช้งานบางคน (Personalize) 
  1. การส่งข้อความ Narrowcast เป็นการส่งข้อความไปหาผู้ใช้งานบางกลุ่ม   
  1. การส่งข้อความ Broadcast ไปหาผู้ติดตาม 
  1. การใช้ฟังก์ชัน liff.sendMessages() เพื่อส่งข้อความไปหาคนที่เปิด LIFF* อยู่ 
  1. การใช้ฟังก์ชัน 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 ผ่าน Flex Message Simulator

หน้าเว็บไซต์Flex Message Simulator 
ภาพจาก LINE Developers 

2. กดปุ่ม New และ เลือก ประเภท Container ที่ต้องการ ในตัวอย่างนี้จะเลือกเป็น Bubble 

วิธีการสร้าง Flex Message ผ่าน Flex Message Simulator

วิธีการสร้างFlex Message Container ประเภท Bubble 
ภาพจาก LINE Developers 

3. หน้าจอจะแสดง Bubble โดยภายในจะมี Header, Hero, Body, และ Footer ในขั้นนี้ ส่วนของ Component จะยังไม่มีอะไร  

วิธีการสร้าง Flex Message ผ่าน Flex Message Simulator

วิธีการสร้างFlex Message ส่วนประกอบภายใน Bubble 
ภาพจาก LINE Developers

4. กดเข้าไปที่ Bubble เพื่อกำหนดคุณสมบัติ (Property) ของ Flex Message ซึ่งได้แก่

  • Direction: กำหนดให้ Component เรียงจาก ซ้ายไปขวา หรือ ขวาไปซ้าย) 
  • Size: กำหนดขนาดของ Bubble เช่น ขนาด Giga จะเป็นขนาดที่เต็มจอ เป็นต้น) 
  • Action: เมื่อผู้ใช้งานกด Bubble จะเกิดอะไรขึ้น แนะนำให้เว้นว่างไว้ เนื่องจากจะนำไปใส่ Action ใน Block แทน 

5. กำหนดค่าของ Block Header 

วิธีการสร้าง Flex Message ผ่าน Flex Message Simulator

การสร้าง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 ผ่าน Flex Message Simulator

การสร้าง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 



Related Posts 

บทความเพิ่มเติม

Blog at WordPress.com.

%d bloggers like this: