ตัวอย่าง LINE Rich Menu JSON พร้อม Action ที่ใช้บ่อย

ตัวอย่างเมนู 3 ปุ่ม

ตัวอย่างนี้ใช้ภาพ 2500×843 แบ่งสามคอลัมน์ พิกัดสุดท้ายรับเศษความกว้างเพื่อให้ครอบคลุมถึงขอบขวาของภาพ

{
  "size": { "width": 2500, "height": 843 },
  "selected": true,
  "name": "เมนูหลัก 3 ปุ่ม",
  "chatBarText": "เมนู",
  "areas": [
    {
      "bounds": { "x": 0, "y": 0, "width": 833, "height": 843 },
      "action": { "type": "uri", "label": "ดูสินค้า", "uri": "https://example.com/products" }
    },
    {
      "bounds": { "x": 833, "y": 0, "width": 833, "height": 843 },
      "action": { "type": "message", "label": "โปรโมชั่น", "text": "ดูโปรโมชั่น" }
    },
    {
      "bounds": { "x": 1666, "y": 0, "width": 834, "height": 843 },
      "action": { "type": "postback", "label": "จองคิว", "data": "action=booking", "displayText": "จองคิว" }
    }
  ]
}

กฎของ object หลัก

ทุก bounds ต้องเป็นจำนวนเต็มบวก อยู่ภายในภาพ และมี width/height มากกว่า 0 แม้ API อาจไม่ตรวจพื้นที่ทับกันตามเจตนาของงาน คุณควรตรวจเองก่อน Publish

• size ต้องตรงกับภาพและผ่านอัตราส่วน
• selected กำหนดว่าเปิดเมนูอัตโนมัติเมื่อผู้ใช้เข้าห้องแชตหรือไม่
• name ใช้จัดการภายในและยาวได้สูงสุด 300 ตัวอักษร
• chatBarText แสดงต่อผู้ใช้และยาวได้สูงสุด 14 ตัวอักษร
• areas มีได้สูงสุด 20 รายการ

ตัวอย่าง Action เพิ่มเติม

Rich menu switch ต้องมี Alias ที่สร้างและผูกกับ Rich Menu ปลายทางก่อน ส่วน Postback และ Datetime ต้องมี webhook ที่เข้าใจค่า data

// เลือกวัน
{ "type": "datetimepicker", "label": "เลือกวัน", "data": "action=pick-date", "mode": "date" }

// สลับ Rich Menu
{ "type": "richmenuswitch", "label": "หน้าถัดไป", "richMenuAliasId": "menu-page-2", "data": "action=switch&page=2" }

// คัดลอกข้อความ (LINE 14.0.0+ บน iOS/Android)
{ "type": "clipboard", "label": "คัดลอกโค้ด", "clipboardText": "WELCOME100" }

ตรวจ JSON ก่อนส่ง

การ Validate สำเร็จยืนยันว่า object ใช้สร้างได้ แต่ยังไม่ยืนยันว่าภาพตรงกับพื้นที่ หรือ URL และ webhook ปลายทางทำงาน จึงต้องทดสอบ end-to-end แยกต่างหาก

• Parse JSON ให้ผ่านก่อน
• ตรวจข้อความยาวเกินกำหนด
• ตรวจ bounds ทุกด้าน
• ตรวจ URL scheme และ percent-encoding
• เรียก /v2/bot/richmenu/validate ด้วย Token ของ Channel