เก่ง Rich Menu ใน LINE ให้ครบสูตร

Jirawatee
LINE Developers Thailand
8 min readJul 17, 2019

หากจะพูดถึง Chatbot แว๊บแรกที่คนจะนึกถึงก็คือการพิมพ์ข้อความ text คุยกัน ซึ่งแน่นอนว่าในการพัฒนา Chatbot เราจะต้องมี Keywords ที่ตั้งไว้สำหรับให้ Chatbot ทำงานอะไรบางอย่าง เช่นพิมพ์ว่า “โปรโมชันล่าสุด” แล้ว Chatbot จะทำหน้าที่ไปดึงข้อมูลโปรโมชันมาให้

แต่…การที่จะให้ผู้ใช้มานั่งจำ Keywords เหล่านั้นเองก็คงไม่ใช่เรื่องง่ายนัก ยิ่งถ้าผู้ใช้ไป Follow ตัว Chatbot หลายๆ Account ก็ยิ่งต้องจำมากขึ้นตามไปด้วย และ มันจะดีกว่าไหม ถ้าเราสามารถแนะนำคำสั่งต่างๆที่ใช้จะเรียกใช้บ่อยๆ หรือคำสั่งที่เราต้องการเน้นให้ผู้ใช้ได้เรียกใช้งานแบบง่ายๆโดยไม่ต้องจำ ด้วยการจิ้มๆผ่านเมนู

หมายเหตุ: ใครเผลอเข้ามาอ่านบทความนี้แล้วไม่เคยสร้าง LINE Chatbot มาก่อน แนะนำให้อ่านและทำตามบทความด้านล่างนี้ เพื่อความราบรื่นสำหรับเนื้อหาของบทความในลำดับถัดไป

เอาหละบทความนี้เราจะมาสร้าง Rich Menu เพื่อตอบโจทย์ปัญหาที่กล่าวไปในข้างต้นกัน โดยเนื้อหาทั้งหมดจะแบ่งออกเป็น

  1. สร้างรูป Rich Menu ด้วย Rich Menu Maker
  2. สร้าง Rich Menu ผ่าน LINE OA Manager
  3. เตรียม JSON สำหรับการสร้าง Rich Menu ผ่าน API ด้วย LINE Bot Designer
  4. บริหารจัดการ Rich Menu ผ่าน API
  5. ตัวอย่างการใช้งาน Rich Menu ผ่าน API
  6. ลำดับความสำคัญในการแสดงผล Rich Menu
  7. การโหลดและการเปลี่ยนแปลง Rich Menu
  8. ข้อจำกัดของ Rich Menu

1. สร้างรูป Rich Menu ด้วย Rich Menu Maker

Pain point ของคนสร้างรูป Rich menu ที่พบบ่อยๆคือมีทั้งเรื่องนามสกุลไฟล์ไม่ถูกต้อง หรือขนาดของรูป Rich menu ไม่ตรงตามที่ LINE กำหนด แต่ปัญหาเหล่านั้นจะหมดไปถ้าคุณใช้ Rich Menu Maker เครื่องมือในการสร้างรูป Rich menu ที่พัฒนาโดย LINE ประเทศไทย

การใช้งานมันก็ง่ายมากๆแค่ 3 ขั้นตอน

ขั้นตอนแรก: เลือก Template ของ Rich menu
ขั้นตอนถัดมา: ใส่รูปไอคอน(ตกแต่งเพิ่มเติมได้)
ขั้นตอนสุดท้าย: Save รูปออกมา

เพียงเท่านี้เราก็จะได้ไฟล์รูปที่มีนามสกุล JPG และขนาด 2500 x 1686px ออกมาตรงตามที่ระบบต้องการแล้ว

2. สร้าง Rich Menu ผ่าน LINE OA Manager (ไม่ต้องเขียนโค้ด)

เมื่อได้รูป Rich menu ตามต้องการแล้ว ก็เข้าไปที่ LINE Official Account Manager จากนั้นเลือก account ที่เราได้สร้างไว้ แล้วไปที่เมนูชื่อ Rich menus จะเจอปุ่ม Create new เขียวๆให้กดสร้าง ก็กดซะ

เมื่อกดปุ่มสร้างแล้ว ก็จะเจอหน้า Rich menus แบบนี้ ซึ่งเราจะต้องระบุข้อมูล 2 ส่วนหลักคือ Menu settings และ Menu content

Menu settings

  • Title: ชื่อของ Rich menu (ไม่ได้แสดงให้ผู้ใช้เห็น)
  • Status: เปิด/ปิด Rich menu ตัวนั้น
  • Display period: วันและเวลาในการเริ่มและสิ้นสุดการแสดงผล Rich menu
  • Menu bar label: ชื่อเมนูตรงบาร์ด้านล่าง (ผู้ใช้เห็น)
  • Default behavior: แสดง/ซ่อน Rich menu ตั้งแต่เปิดห้องแชท

Menu content

เริ่มจากเลือก Template ให้ตรงกับรูปที่สร้างมา โดยล่าสุดมี Rich menu ขนาดใหม่ออกมาแล้วด้วยชื่อ Compact(2500×843, 1200×405, 800×270) แต่รูปที่ได้จาก Rich Menu Maker ยังรองรับเฉพาะแบบ Large(2500×1686, 1200×810, 800×540) ดังนั้นใครอยากใช้แบบ Compact ก็ออกแบบเองกันไปก่อนนะจ๊ะ

เมื่อเลือกแบบแล้วก็ Upload รูปที่เตรียมมาได้เลย

สุดท้ายก็กำหนด Action ให้แต่ละปุ่ม โดยสามารถกำหนดได้ดังนี้

  • Link: เปิด URL ที่ขึ้นต้นด้วย http, https, line และtel
  • Text: ส่งข้อความตัวอักษรกลับไปในห้องแชท
  • Coupon: เปิดหน้าคูปอง
  • Reward cards: เปิดหน้าสะสมแสตมป์
  • No action: กดแล้วไม่เกิดอะไรขึ้น

หมายเหตุ: การสร้าง Rich menu จะต้องระบุข้อมูลให้ครบทุกช่องจึงจะกด Save ได้

กด Save แล้วมาเปิดหน้าแชทของ account ที่เราสร้างไว้กันเลย

3. เตรียม JSON สำหรับการสร้าง Rich Menu ผ่าน API ด้วย LINE Bot Designer

ตั้งแต่หัวข้อนี้ไป จะเป็นการสร้าง Rich Menu แบบ Advance โดยให้ทุกคนดาวน์โหลดโปรแกรม LINE Bot Designer จากลิงค์ด้านล่างนี้มาก่อน ซึ่งมีทั้ง Windows และ macOS

จากนั้นให้เปิดโปรแกรมขึ้นมา และให้ทำการ New project

เมื่อเข้ามาสู่หน้าหลักของโปรแกรม ผมจะขออธิบายตามตัวเลขด้านบนในแต่ละส่วนดังต่อไปนี้

ส่วนที่ 1 Bot Items

ส่วนนี้ให้เราโฟกัสที่ที่ช่องของ Rich Meu แล้วกด + เพื่อสร้าง Rich Menu

ส่วนที่ 2 Properties

ส่วนนี้ให้เรากำหนดค่าต่างให้กับ Rich Menu ที่ต้องการสร้างโดยมี

  • Name: ชื่อของ Rich Menu(ผู้ใช้ไม่เห็น)
  • Image: ไฟล์รูปที่มีขนาดตรงกับ Base Width และ Base Height
  • Base Width: ความกว้างของ Rich Menu ซึ่งตอนนี้มีให้เลือกแค่ 2500
  • Base Height: ความสูงของ Rich menu ซึ่งสามารถเลือกได้ 2 ขนาดคือ Large(1686px) และ Compact(843px)
  • Display Menu by Default: จะโชว์ตั้งแต่เปิดหน้าแชทเลยไหม
  • Chat Bar Title: ชื่อเมนูตรงบาร์ด้านล่าง (ผู้ใช้เห็น)
  • Action: จะถูกสร้างอัตโนมัติหลังจากเราเลือก Area ที่ให้คลิกได้ในส่วนที่ 3 ซึ่งเมื่อถูกสร้างแล้วเราสามารถกำหนดได้ว่าคลิกแล้วจะให้เกิดเหตุการณ์อะไร โดยสามารถกำหนด Action ได้ทั้ง Message, URI, Postback, Datetime Picker และ Web App Action หรือมันก็คือ LIFF นั่นเอง

หมายเหตุ: ใครไม่คุ้นชินกับ Action ใน LINE Messaging API อ่านบทความนี้ได้เลย

ส่วนที่ 3 Preview

รูปในส่วนนนี้จะแสดงหลังจากเราเลือกรูป Image ในส่วนที่ 2 ซึ่งเราสามารถ drag พื้นที่ที่เราต้องการให้คลิกได้สูงสุดถึง 20 จุดบนรูป(ไม่ต้องคำนวนหาจุด X, Y, ความกว้าง และความสูงเอง สะดวกจริงไปอี๊ก) ซึ่งจากตัวอย่างของผมจะเลือกไว้ 8 จุดคือดราก้อนบอล 7 ลูกและเทพเจ้ามังกร เมื่อเลือกแล้วจะก่อให้เกิด Action ในส่วนที่ 2 ให้เราระบุนั่นเอง

ส่วนที่ 4 JSON

ในส่วนนี้จะแสดงโค้ดที่เป็นรูปแบบของ JSON ซึ่งถูกสร้างมาจากจัดการในส่วนที่ 2 และ 3 ซึ่งเราจะ copy เอาไว้ใช้ในหัวข้อถัดไป ง่ายเนอะ

4. บริหารจัดการ Rich Menu ผ่าน Messaging API

หลายคนอาจยังไม่รู้ว่า API ที่ใช้สำหรับ Rich Menu นี่ถือว่าเยอะที่สุดในตระกูล Messaging API เลย โดยมีถึง 14 ตัวด้วยกัน โดยใครจะเขียนโปรแกรม หรือใช้ Postman ยิง ก็ได้ทั้งคู่ ถ้าพร้อมแล้วเราไปเริ่มกันเลย

4.1 Create Rich Menu

จุดเริ่มขบวน เราจะต้องสร้าง Rich Menu ขึ้นมาผ่าน API ก่อนโดยมีรายละเอียดดังนี้

Headers:
+ Authorization
: Bearer {channel access token}
+ Content-Type
: application/json
Endpoint: https://api.line.me/v2/bot/richmenu
Method: POST
Body:
+ size: ความกว้างความสูงของรูป Rich Menu ทั้งแบบ Large และ Compact
- size.width: ความกว้างของรูป Rich Menu หน่วยเป็น px
- size.height: ความสูงของรูป Rich Menu หน่วยเป็น px
+ selected: กำหนดค่า default ในการแสดงผล true หรือ false
+ name: ชื่อ Rich Menu ไม่เกิน 30 ตัวอักษร
+ chatBarText: ชื่อเมนูบาร์ของ Rich Menu ไม่เกิน 14 ตัวอัษร
+ areas: เป็น array ที่ประกอบไปด้วย bounds และ action
- areas.bounds.x: ตำแหน่งในแนวราบของรูป Rich Menu
- areas.bounds.y: ตำแหน่งในแนวดิ่งของรูป Rich Menu
- areas.bounds.width: ความกว้างจากตำแหน่ง x ไปทางขวา หน่วยเป็น px
- areas.bounds.height: ความสูงจากตำแหน่ง y ไปด้านล่าง หน่วยเป็น px
- areas.action: Message, URI, Postback แลพะ Datetime Picker
ตัวอย่างโครงสร้าง JSON สำหรับการสร้าง Rich Menu

เมื่อ Request ไป หากสำเร็จก็จะได้ richMenuId คืนกลับมา (แต่ Rich Menu ยังไม่แสดงในหน้าแชทนะ)

{
"richMenuId": "{richMenuId}"
}

แนะนำ: ให้สร้าง Rich Menu กับ LINE Bot Designer ในหัวข้อที่ 3 แล้วเอา JSON มาใช้ในส่วน Body เพราะมันง่ายที่สุดในสามโลกแล้ว

4.2 Upload Rich Menu Image

เมื่อเราได้ richMenuId จากข้อ 4.1 มาแล้ว ในขั้นตอนนี้เราจะอัพโหลดรูปให้กับ Rich Menu ผ่าน API นั้นมีรายละเอียดดังนี้

Headers:
+ Authorization
: Bearer {channel access token}
+ Content-Type
: image/jpeg หรือ image/png
Endpoint: https://api-data.line.me/v2/bot/richmenu/{richMenuId}/contentMethod: POST
Param:
+ richMenuId: ID ของ Rich Menu ที่ได้จากข้อ 4.1

สำหรับไฟล์รูปที่จะอัพโหลดจะมีเงื่อนไขดังนี้

  • ไฟล์รูปจะรองรับเฉพาะ JPEG, JPG และ PNG
  • Resolution รูปจะมี 2 รูปแบบคือ Large(2500×1686, 1200×810, 800×540) และ Compact(2500×843, 1200×405, 800×270)
  • ขนาดไฟล์รูปจะมีขนาดได้ไม่เกิน 1MB

เมื่อ Request ไป หากสำเร็จจะได้ status 200 แต่จะไม่ได้คืน JSON ใดๆกลับมา (แต่ Rich Menu ยังไม่แสดงในหน้าแชทนะ)

Postman ก็อัพโหลดรูปได้ สะดวกแท้

หมายเหตุ: การจะอัพเดทรูป Rich Menu หลังจาก Upload ไปแล้วนั้นยังไม่สามารถทำได้ วิธีเดียวคือจะต้องไปสร้าง Rich Menu ใหม่ในขั้นตอนที่ 4.1 เท่านั้น

4.3 Set Default Rich Menu

เมื่อผ่านขั้นตอนที่ 4.1 และ 4.2 บัดนี้ถือว่าเราพร้อมแล้วที่จะนำ Rich Menu ดังกล่าวไปสำแดง API ตัวนี้จะเป็นการผูก Rich Menu ให้กับ Followers ทุกคน

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint
: https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
Method: POST
Param:
+ richMenuId: ID ของ Rich Menu ที่ได้จากข้อ 4.1

เมื่อ Request ไป หากสำเร็จจะได้ status 200 แต่จะไม่ได้คืน JSON ใดๆกลับมา

Rich Menu จะสำแดงเมื่อเปิดเข้ามาในห้องแชทอีกครั้ง

หมายเหตุ: จะเห็นว่าเราสามารถคลิกบอลทั้ง 7 แยกกันได้ แถมกดเทพเจ้ามังกรก็เปิดเว็บขึ้นมาได้ด้วย(ถ้ากดแล้วมังกรออกมาจะเมพขิงๆเลย 555)

4.4 Get Default Rich Menu ID

สมมติว่าเราสร้าง Rich Menu ไว้เยอะเลย(สูงสุด 1,000 แบบ) แล้วบางครั้งเราอยากรู้ว่า richMenuId ไหนเหรอที่ใช้งานอยู่ ก็ให้มาใช้ API ตัวนี้เลย

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint
: https://api.line.me/v2/bot/user/all/richmenu
Method: GET

เมื่อ Request ไป หากสำเร็จก็จะได้ richMenuId คืนกลับมาละ

{
"richMenuId": "{richMenuId}"
}

4.5 Cancel Default Rich Menu

บางครั้งเราตั้งค่า Rich Menu ผิด หรือแคมเปญหมดอายุ แล้วเราต้องการจะยกเลิกการแสดงผล Rich Menu ที่เป็นแบบ Default เราก็สามารถใช้ API ตัวนี้ได้

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint
: https://api.line.me/v2/bot/user/all/richmenu
Method: DELETE

เมื่อ Request ไป หากสำเร็จจะได้ status 200 แต่จะไม่ได้คืน JSON ใดๆกลับมา

Rich Menu จะอันตรธานหายไปเมื่อเปิดห้องแชทอีกครั้ง

4.6 Link Rich Menu to a User

คราวนี้หากเราต้องการทำ Personalize ตัว Rich Menu ให้กับผู้ใช้ เช่นหาก Login ผ่านแล้วให้แสดง Rich Menu อีกแบบก็สามารถทำได้ แต่ก่อนอื่นเราต้องไปเตรียม Rich Menu อีกชุดมาซะก่อน โดยทำขั้นตอน 4.1 และ 4.2 อีกครั้ง เมื่อพร้อมแล้วก็ดูรายละเอียดการผูกกันเลย

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint: https://api.line.me/v2/bot/user/{userId}/richmenu/{richMenuId}Method: POST
Param:
+ richMenuId: ID ของ Rich Menu ที่ได้จากข้อ 4.1
+ userId: ID ของผู้ใช้ที่ได้จาก Webhook

เมื่อ Request ไป หากสำเร็จจะได้ status 200 แต่จะไม่ได้คืน JSON ใดๆกลับมา

Rich Menu จะเปลี่ยนแบบ Realtime ในกรณีนี้(ไม่ต้องออกไปแล้วกลับมาเข้ามาดู)

4.7 Link Rich Menu to Multiple Users

สมัยก่อนการจะผูก Rich Menu เราจะต้องผูกแบบ 1:1 เหมือนในข้อ 4.6 แต่ก็มีเสียงเรียกร้องจากนักพัฒนามาว่า กรณีที่เขามีลูกค้าเยอะๆ หลายแสน หรือหลายล้านคน การจะยิงแบบ 1:1 มันช้า และมีโอกาสเกิด timeout สูง จึงเป็นที่มาของ API นี้ที่จะให้บรรจุ userId ได้สูงสุดครั้งละ 500 userIds เพื่อยิงไปในครั้งเดียว

Headers:
+ Authorization
: Bearer {channel access token}
+ Content-Type: application/json
Endpoint: https://api.line.me/v2/bot/richmenu/bulk/link
Method: POST
Param:
+ richMenuId: ID ของ Rich Menu ที่ได้จากข้อ 4.1
+ userIds: Array ของ userId เช่น ["{userId1}","{userId2}"]

เมื่อ Request ไป หากสำเร็จจะได้ status 202 แต่จะไม่ได้คืน JSON ใดๆกลับมา และ Rich Menu จะเปลี่ยนแบบ Realtime ในกรณีนี้(ไม่ต้องออกไปแล้วกลับมาเข้ามาดู)

4.8 Get Rich Menu ID of a User

เมื่อเราทำการผูกตัว Rich Menu แบบ Multiple แล้วต้องการแน่ใจว่าการผูกครั้งนั้นสัมฤทธิ์ผลดี เราสามารถสุ่มเอา userId ของผู้ใช้ที่อยู่ในกลุ่มที่ผูกมาตรวจสอบกับ API ด้านล่างนี้

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint: https://api.line.me/v2/bot/user/{userId}/richmenu
Method: GET
Param:
+ userId: ID ของผู้ใช้ที่ได้จาก Webhook

เมื่อ Request ไป หากสำเร็จก็จะได้ richMenuId คืนกลับมา ก็ตรวจสอบดูว่าตรงตามที่ผูกไว้ไหม ถ้าตรงก็จบ ถ้าไม่ตรงก็ไม่จบไง 555

{
"richMenuId": "{richMenuId}"
}

4.9 Unlink Rich Menu from a User

กรณีที่ต้องการถอด Rich Menu ที่ผูกไว้แบบ Personalize เราสามารถใช้ API ด้านล่างนี้ โดยระบุ userId ของผู้ใช้ที่ต้องการถอดออก

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint
: https://api.line.me/v2/bot/user/{userId}/richmenu
Method: DELETE
Param:
+ userId: ID ของผู้ใช้ที่ได้จาก Webhook

เมื่อ Request ไป หากสำเร็จจะได้ status 200 แต่จะไม่ได้คืน JSON ใดๆกลับมา

Rich Menu จะเปลี่ยนแบบ Realtime ในกรณีนี้(ไม่ต้องออกไปแล้วกลับมาเข้ามาดู)

4.10 Unlink Rich Menus From Multiple Users

มีการผูกแบบ Multiple จะไม่มีการถอดแบบ Multiple สำหรับ Rich Menu แบบ Personalize ก็คงจะแปลกไป ดังนั้นเพื่อลด Request ก็บรรจุ userId ได้สูงสุดทีละ 500 กันไปเลย

Headers:
+ Authorization
: Bearer {channel access token}
+ Content-Type: application/json
Endpoint: https://api.line.me/v2/bot/richmenu/bulk/unlink
Method: POST
Param:
+ userIds: Array ของ userId เช่น ["{userId1}","{userId2}"]

เมื่อ Request ไป หากสำเร็จจะได้ status 202 แต่จะไม่ได้คืน JSON ใดๆกลับมา และ Rich Menu จะเปลี่ยนแบบ Realtime ในกรณีนี้(ไม่ต้องออกไปแล้วกลับมาเข้ามาดู)

4.11 Download Rich Menu Image

สำหรับ API นี้ผมว่ามันมีประโยชน์ 2 อย่างด้วยกันคือ ต้องการดึงไฟล์รูป Rich Menu กลับมา และตรวจสอบว่าขั้นตอนที่ 4.2 ทำงานได้สมบูรณ์หรือไม่

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint: https://api-data.line.me/v2/bot/richmenu/{richMenuId}/contentMethod: GET
Param:
+ richMenuId: ID ของ Rich Menu ที่ได้จากข้อ 4.1

เมื่อ Request ไป หากสำเร็จจะได้ status 200 พร้อม Binary ของรูปกลับคืนมา

ผ่าน Postman สะดวกตามเคย

4.12 Get Rich Menu

กรณีเราอยากกลับไปดูโครงสร้าง JSON ของ Rich Menu ที่เราสร้างไว้ในข้อ 4.1 เราสามารถ Request ตามรายละเอียดด้านล่างนี้

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint
: https://api.line.me/v2/bot/richmenu/{richMenuId}
Method: GET
Param:
+ richMenuId: ID ของ Rich Menu ที่ได้จากข้อ 4.1

เมื่อ Request ไป หากสำเร็จจะได้ status 200 พร้อมกับโครงสร้าง JSON กลับมา

4.13 Get Rich Menu List

อย่างที่รู้คือ Rich Menu ที่เราสร้างด้วย API มีได้มากถึง 1,000 แบบ ดังนั้นหากเราต้องการดึง Rich Menu ทั้งหมดที่เราสร้างออกมาดู ก็ให้ใช้วิธีนี้เลย

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint
: https://api.line.me/v2/bot/richmenu/list
Method: GET

เมื่อ Request ไป หากสำเร็จจะได้ status 200 พร้อมกับข้อมูล Rich Menu ทั้งหมดที่มีในรูปแบบ JSON

4.14 Delete Rich Menu

API ตัวสุดท้ายนี้จะมาช่วยเราในกรณีที่ต้องการจะลบ Rich Menu ที่ไม่ใช้แล้ว

Headers:
+ Authorization
: Bearer {channel access token}
Endpoint
: https://api.line.me/v2/bot/richmenu/{richMenuId}
Method: DELETE
Param:
+ richMenuId: ID ของ Rich Menu ที่ได้จากข้อ 4.1

เมื่อ Request ไป หากสำเร็จจะได้ status 200 แต่จะไม่ได้คืน JSON ใดๆกลับมา และ Rich Menu จะอันตรธานหายไปเมื่อเปิดห้องแชทอีกครั้ง

5. Use case การใช้งาน Rich Menu ผ่าน API

ผมจะยกตัวอย่างให้เห็นภาพว่า จริงๆแล้วเราสามารถทำให้ Rich Menu เปลี่ยนไปตามสถานการณ์ต่างๆได้ โดยตัวอย่างที่ผมจะโชว์นี้จะมี scenario ดังนี้

  • ผู้ใช้เปิดหน้าแชทกับ LINE Chatbot ให้แสดง Rich Menu ที่สร้างจาก OA Manager โดย Rich Menu มีหน้าตาแบบนี้
  • ผู้ใช้กด Rich Menu แล้วให้เปิด LIFF ขึ้นมาเป็นหน้า Login โดยมี HTML ตามนี้
  • ผู้ใช้ Login ด้วย username และ password อะไรก็ได้ สิ่งที่ต้องการคือ userId ที่ได้จาก LIFF เพื่อส่งต่อไป API
  • สร้าง Rich Menu 2 ชิ้น ผ่าน Postman โดยให้มีปุ่ม More และ Back ซึ่งจะส่ง Postback กลับมาเป็น data = richmenu1 และ richmenu2
  • สร้าง Webhook ด้วย Cloud Functions for Firebase โดยจะมีโค้ดตามด้านล่างนี้
ผลลัพธ์ที่ได้จะมีการทำงานแบบนี้

6. ลำดับความสำคัญในการแสดงผล Rich Menu

กรณีที่เรามีการสร้าง Rich menu ไว้ทั้ง 2 ช่องทางผ่าน OA Manager และ Messaging API ระบบจะมีการจัดลำดับความสำคัญในการแสดงผลตามตารางด้านล่างนี้

ซึ่งจะเห็นว่า ระบบจะให้ความสำคัญกับการสร้าง Rich menu ผ่าน API มากกว่า และยิ่งไปกว่านั้นระบบจะให้ความสำคัญสูงสุดกับการสร้าง Rich menu ผ่าน API แบบกำหนดรายบุคคล

7. การโหลดและการเปลี่ยนแปลง Rich Menu

  • การกำหนด Rich menu แบบรายบุคคล ทั้งการ Link และ Unlink ผู้ใช้งานจะได้รับอัพเดททันทีโดยไม่ต้องออกจากหน้า Chat แต่อย่างใด
  • การกำหนด Rich menu แบบ Default, การยกเลิก Rich menu(Cancel) และการลบ Rich menu(Delete) ผู้ใช้งานจะได้รับอัพเดทเมื่อเปิดห้องแชท(อีกครั้ง) และอาจใช้เวลาตั้งแต่ 0–60 วินาที จึงจะเห็นการเปลี่ยนแปลง

8. ข้อจำกัดของ Rich Menu

  • แสดงเฉพาะในแอป LINE สำหรับ Android และ iOS
  • แสดงเฉพาะการคุยกับ Chatbot แบบ 1-on-1 เท่านั้น
  • สร้างได้สูงสุด 1,000 รูปแบบ
  • ไฟล์รูปจะรองรับเฉพาะ JPEG, JPG และ PNG
  • Resolution รูปจะมี 2 รูปแบบคือ Large(2500×1686, 1200×810, 800×540) และ Compact(2500×843, 1200×405, 800×270)
  • ขนาดไฟล์รูปจะมีขนาดได้ไม่เกิน 1MB
  • สามารถกำหนดจุดที่ให้ผู้ใช้คลิกได้ผ่าน Messaging API ได้สูงสุด 20 จุด

ทิ้งท้ายกับ Rich Menu

เห็นแล้วใช่ไหมว่า Rich Menu เป็นฟีเจอร์ที่มีประโยชน์มว๊ากกก ก ไก่ ล้านตัว เราสามารถนำเสนอเมนูให้ผู้ใช้งานเข้าถึงบริการของเราแบบง่ายๆ ไม่ต้องจดจำคำสั่ง แถมหน้าตาสวยเกร๋น่าใช้งาน ที่สำคัญมันช่วยให้ Chatbot ของเรามีคุณภาพ(On demand) ได้อีกด้วยนะ ดังนั้นใครอ่านมาถึงตรงนี้ก็จงกลับไปสร้าง Rich menu ให้ Chatbot ของตัวเองกันเถอะ วันนี้ขอตัวลาไปก่อน พบกันใหม่บทความหน้า ราตรีสวัสดิ์นักพัฒนาชาวไทย

--

--

Jirawatee
LINE Developers Thailand

Technology Evangelist at LINE Thailand / Google Developer Expert in Firebase