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

Published in

LINE Developers Thailand

8 min readJul 17, 2019

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

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

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

ปฐมบทการสร้าง LINE Bot

บทความนี้เป็นบทความสำหรับผู้เริ่มต้นสร้าง LINE Bot ซึ่งผมตั้งใจเขียนแยกออกมา เนื่องจากบทความนี้จะกลายเป็น Prerequisite…

medium.com

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

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

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

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

LINE Rich Menu Maker

Rich Menu Maker - ใช้ฟรี! สร้างรูป Rich Menu ได้เองง่ายๆ แค่เพิ่มรูป ข้อความ พร้อมไอคอนสำเร็จรูป เพื่อใช้ใน LINE@ คุณ

lineforbusiness.com

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

ขั้นตอนแรก: เลือก Template ของ Rich menu

ขั้นตอนถัดมา: ใส่รูปไอคอน(ตกแต่งเพิ่มเติมได้)

เพียงเท่านี้เราก็จะได้ไฟล์รูปที่มีนามสกุล 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

LINE Developers

Thank you for filling out our survey. Please download the bot designer for your platform of choice.

developers.line.biz

จากนั้นให้เปิดโปรแกรมขึ้นมา และให้ทำการ 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 อ่านบทความนี้ได้เลย

จำ Action ได้ ใช้ Action เป็น ใน LINE Messaging API

รู้หรือไม่ว่าตอนนี้ Action ใน LINE Messaging API มีทั้งหมดกี่แบบ? แต่ละแบบทำอะไรได้บ้าง? และ message object…

medium.com

ส่วนที่ 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/pngEndpoint: 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 ยังไม่แสดงในหน้าแชทนะ)

หมายเหตุ: การจะอัพเดทรูป 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 ใดๆกลับมา

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}"]

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 ของรูปกลับคืนมา

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 ของตัวเองกันเถอะ วันนี้ขอตัวลาไปก่อน พบกันใหม่บทความหน้า ราตรีสวัสดิ์นักพัฒนาชาวไทย

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

ปฐมบทการสร้าง LINE Bot

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

LINE Rich Menu Maker

Rich Menu Maker - ใช้ฟรี! สร้างรูป Rich Menu ได้เองง่ายๆ แค่เพิ่มรูป ข้อความ พร้อมไอคอนสำเร็จรูป เพื่อใช้ใน LINE@ คุณ

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

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

Menu settings

Menu content

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

LINE Developers

Thank you for filling out our survey. Please download the bot designer for your platform of choice.

ส่วนที่ 1 Bot Items

ส่วนที่ 2 Properties

จำ Action ได้ ใช้ Action เป็น ใน LINE Messaging API

รู้หรือไม่ว่าตอนนี้ Action ใน LINE Messaging API มีทั้งหมดกี่แบบ? แต่ละแบบทำอะไรได้บ้าง? และ message object…

ส่วนที่ 3 Preview

ส่วนที่ 4 JSON

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

4.1 Create Rich Menu

4.2 Upload Rich Menu Image

4.3 Set Default Rich Menu

4.4 Get Default Rich Menu ID

4.5 Cancel Default Rich Menu

4.6 Link Rich Menu to a User

4.7 Link Rich Menu to Multiple Users

4.8 Get Rich Menu ID of a User

4.9 Unlink Rich Menu from a User

4.10 Unlink Rich Menus From Multiple Users

4.11 Download Rich Menu Image

4.12 Get Rich Menu

4.13 Get Rich Menu List

4.14 Delete Rich Menu

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

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

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

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

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

Written by Jirawatee