FLEX MESSAGE SIMULATOR

การสรา้ ง FLEX MESSAGE SIMULATOR

1. เขา้ เวบ็ ไซต์ https://developers.line.biz/console/fx/
หรือดาวน์โหลดโปรแกรมที่เวบ็ ไซต์ https://developers.line.biz/en/services/bot-designer/

2. จากน้ันทาการ Login เขา้ สู่ระบบ โดยใช้ Username และ Password ของไลนท์ า่ น
3. ระบบจะเขา้ สหู่ น้าหลัก FLEX MESSAGE SIMULATOR ดงั รูป

4. จากนนั้ ให้ท่านกดเลอื กรปู แบบ FLEX MESSAGE ทีป่ ุ่มเมนู “Showcase” เลอื กรปู แบบท่ตี ้องการสร้าง

แล้วคลิก “Create” 1. กดปมุ่ Showcase

2. เลอื กรปู แบบ
Flex message

3. กดคลกิ Create

5. ระบบจะเขา้ สหู่ น้าสร้าง FLEX MESSAGE ทีท่ า่ นเลือกรูปแบบไว้ ซึ่งการทา FLEX MESSAGE
ประกอบด้วย 3 ส่วน ดังนี้
5.1 Header : ส่วนหัว สามารถสรา้ งรูปภาพ Cover หรือขอ้ ความต่างๆ ได้
5.2 Body : ส่วนกลาง สามารถสร้างข้อความ ไอคอน รปู ภาพ ต่างๆ ได้
5.3 Footer : สว่ นท้าย สามารถสรา้ งข้อความ รปู ภาพ หรอื ปุม่ ได้

6. สว่ น Header การสร้างรปู ภาพ Cover
จากตวั อย่างรูปแบบทเี่ ลือก ใหค้ ลกิ ที่ “Image” จะข้นึ แถบให้ใส่ขอ้ มูล Image (ด้านขวามอื ) ดงั รปู

ให้ทา่ นกรอกรายละเอียดดังนี้
- url :
ให้ทา่ น Copy link จากไฟลภ์ าพ โดยทา่ นสามารถอัพโหลดภาพลง google drive แล้ว
คัดลอกลิงกม์ าตามตัวอยา่ ง ดงั รูป

เม่อื ทา่ น Copy ลิงกด์ า้ นบนเรยี บรอ้ ยแลว้ ให้นามาวางต่อท้าย ขอ้ ความดา้ นลา่ ง
https://drive.google.com/uc?id=1iJUutFUmtsT3K5dPQ-ExTGWW1fYVNsj0
จากน้นั Copy link ใสล่ งในชอ่ ง url ระบบจะแสดงตัวอยา่ งภาพใหด้ ู ดังรปู

Copy link ใส่วางในช่อง url

ระบบแสดงตัวอย่างภาพ
ใน flex message

- size : เลือกประเภทแบบ Full
- aspectRatio : ท่านสามารถปรบั ขนาดของภาพได้ ตัวอยา่ ง ปรบั ขนาด = 16:9
- aspectMode : เลือกประเภทแบบ Cover

7. สว่ น Body การสร้างขอ้ ความ แลว้ เลอื ก box ดงั รูป
7.1 ใหท้ า่ น คลกิ ท่ี “body” แลว้ กดไอคอน

7.2 จากน้นั คลิกที่ “box” แลว้ กดไอคอน หากต้องการสร้างข้อความ ให้เลือก text ดงั รปู

7.3 ระบบจะแสดงแถบ “text” ให้ใส่ขอ้ มูล text (ด้านขวามือ) ดังรปู

ให้ท่านกรอกรายละเอยี ดดงั นี้
- Text : กรอกข้อความทตี่ ้องการแสดง เช่น ศนู ยต์ ดิ ตามสนิ เช่ือ
- Margin : เลือกระยะหา่ ง ระหวา่ งขอ้ ความกบั สว่ นของ Header
- Size : เลอื กขนาดตวั อกั ษร
- Color : ทา่ นสามารถใส่รหัส Code สตี า่ งๆ ได้ จะแสดงสบี นตวั อักษร เชน่ #333366
- Weight : เลอื กน้าหนกั ตัวอักษร (regular/bold)
- Style : เลือกลักษณะตัวอกั ษร (none/normal/italic)
- Decoration : เลอื กลกั ษณะการตกแต่งตวั อกั ษร (none/underline/line through)
- Align : เลอื กลักษณะการจดั วางตัวอกั ษร (start/end/center)
- Gravity : เลอื กลักษณะการจัดวางตัวอกั ษร (top/bottom/center)

7.4 เมอื่ กรอกเรียบร้อยแลว้ ระบบจะแสดงตัวอยา่ งภาพ ใน flex message ดังรปู

ระบบแสดงตวั อย่างภาพ
ใน flex message

8. สว่ น Footer การสร้างปุม่ ตา่ งๆ
8.1 ให้ทา่ น คลกิ ที่ “footer” แล้วกดไอคอน แล้วเลือก box
8.2 จากนั้น คลกิ ที่ “box” แลว้ กดไอคอน หากต้องการสรา้ งปุ่ม ใหเ้ ลอื ก botton
8.3 ระบบจะแสดงแถบ “botton” ให้ใส่ขอ้ มูล botton (ด้านขวามือ) ดงั รูป

กรณี สร้างปุม่ การโทรออก ให้ทา่ นกรอกรายละเอียดดังนี้
 Bottom
- Height : เลอื กระยะความกว้างของปมุ่
- Style : เลอื กลกั ษณะปมุ่ (link/primary/secondary) **สีตัวอักษร
- Color : ท่านสามารถใส่รหสั Code สตี ่างๆ ได้ จะแสดงสบี นปมุ่
- Gravity : เลอื กลกั ษณะการจัดวางของปมุ่ (top/bottom/center)
 Action
- Type : เลอื ก uri
- Lebel : กรอกรายละเอียดข้อความ/เบอร์โทร ทีจ่ ะแสดงบนปุ่ม เชน่ โทร 1357
- Uri : tel:+66(ตามด้วยหมายเลขโทรศัพท์) เช่น tel:+661357

กรณี สรา้ งป่มุ เช่อื มโยงลงิ กเ์ วบ็ ไซต์ ให้ทา่ นกรอกรายละเอยี ดดังนี้
 Bottom
- Height : เลือกระยะความกว้างของปุม่
- Style : เลอื กลักษณะปุ่ม (link/primary/secondary) **สีตัวอกั ษร
- Color : ทา่ นสามารถใส่รหัส Code สีต่างๆ ได้ จะแสดงสีบนปมุ่
- Gravity : เลอื กลกั ษณะการจดั วางของปมุ่ (top/bottom/center)
 Action
- Type : เลือก uri
- Lebel : กรอกรายละเอียดข้อความ ท่จี ะแสดงบนปุ่ม เชน่ แบบฟอร์มแนะนาตชิ ม
- Uri : Copy link ของเว็บไซตม์ าวาง

8.4 เมอ่ื สรา้ งขอ้ มูลเรียบรอ้ ยแล้ว ระบบจะแสดงตวั อย่างภาพ ใน flex message ดงั รปู

ระบบแสดงตวั อย่างภาพ
ใน flex message

8.5 หากตอ้ งการย้ายข้อมลู ให้คลิกข้อมลู ทต่ี อ้ งการยา้ ย แล้วกดปุ่ม
8.6 หากตอ้ งการลบข้อมูล ให้คลิกข้อมูลท่ตี อ้ งการลบ แล้วกดป่มุ

9. การนา Code flex message ลงบนระบบ cloud.aiya.ai
9.1 กดปุ่ม “</> View as JSON”

9.2 ระบบจะแสดง Code flex message จากนน้ั คลกิ ที่ “Copy”

9.3 เข้าสรู่ ะบบ cloud.aiya.ai จากน้นั เลอื กแถบเมนู “ไลน์” กดปมุ่ “เพม่ิ กล่องขอ้ ความ” และ
เลือกแบบ Flex message และวาง Code flex message ลง ระบบจะแสดงขอ้ มูลขน้ึ ให้ ดังรูป