今天來介紹圖文選單的API。
LINE圖文選單(RichMenu)，是顯示在聊天室下方的選單：

新增圖文選單

一樣可以使用LineBotDesigner來協助畫面的規劃

圖文選單的大小，必須符合LINE官方的格式：

• 檔案類型： JPEG或PNG 檔案格式
• 圖片解析度：2500x1686, 2500x843, 1200x810, 1200x405, 800x540, 800x270
• 圖片檔案大小上限：1 MB
  
  這邊我設定點擊精選商品區塊時，會自動傳送精選商品的文字。
  呼叫API傳送Request：
• url位置

let url = 'https://api.line.me/v2/bot/richmenu';
let token = '你的channel access token';

• 新增一個Request

var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("authorization", token);
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("cache-control", "no-cache");

• 放入LineBotDesigner產出的JSON

var data = JSON.stringify({
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": true,
  "name": "圖文選單 1",
  "chatBarText": "查看更多資訊",
  "areas": [
    {
      "bounds": {
        "x": 783,
        "y": 900,
        "width": 934,
        "height": 762
      },
      "action": {
        "type": "message",
        "text": "我是精選商品"
      }
    }
  ]
});

產出的JSON：

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": true,
  "name": "圖文選單 1",
  "chatBarText": "查看更多資訊",
  "areas": [
    {
      "bounds": {
        "x": 783,
        "y": 900,
        "width": 934,
        "height": 762
      },
      "action": {
        "type": "message",
        "text": "我是精選商品"
      }
    }
  ]
}

• 發送Request，成功的話會回傳這個RichMenu的id回來給你
  

上傳圖文選單的圖片

本步驟建議使用POSTMAN操作，上傳圖片的部分會比較簡單

• url：POST https://api.line.me/v2/bot/richmenu/{你的圖文選單id}/content
  Header：
• Authorization：Bearer + 你的channel access token
• Content-Type：image/jpeg
  
  Body：binary的型態，選擇圖文選單的圖片檔案上傳
• 選擇圖片檔案
  
• 發送請求後，得到空物件的結果代表成功
  

綁定圖文選單

目前總共有三種綁定顯示在聊天室中的圖文選單方式：

1. 在LINE AccountManager後台設定選單，會套用到所有人的聊天室中。
2. 使用Api，為所有人綁定到某個圖文選單
3. 使用Api，為特定使用者綁定某個圖文選單
   優先順序是3>2>1，優先順序高的圖文選單會蓋掉優先順序低的圖文選單。

這邊使用方法2來綁定

• url：POST https://api.line.me/v2/bot/user/all/richmenu/{你的圖文選單id}

Header：

• Authorization：Bearer + 你的channel access token
• 發送請求後，得到空物件的結果代表成功
  

查看結果

前往設定的LINE@/LINE官方帳號的頁面，就可以看到剛才設定的圖文選單

• 測試點選傳送文字功能