#LINE #Canva #Rich Menu #圖文選單 #Postman

LINE 圖文選單2 - 用 Postman 設計 LINE Rich Menu 圖文選單

設計屬於你自己的 LINE 圖文選單

在前一篇文章中，我們透過了最簡單的方式（LINE官方後台）建立了LINE圖文選單，在這篇文章中，將來介紹另一個不同的方法，也可以去達成一樣的目的！

LINE 圖文選單1 - 使用 Canva 設計 LINE Rich Menu 圖文選單

Journey 🥾 :

    流程概觀 🔍

 1. 建立選單圖片

 2. 下載, 安裝 Postman

 3. 將 Rich Menu 透過 API 方式打入

 4. 展示！

步驟 1：建立你的 Rich Menu 圖片

因為這步驟內容與前一篇文章重複，如果還不了解這步驟的朋友，建議可以先參考前一篇文章呦👇

LINE 圖文選單1 - 使用 Canva 設計 LINE Rich Menu 圖文選單

步驟 2：下載, 安裝 Postman

2.1 ) — 下載 Postman

Download Postman | Get Started for Free

2.2 ) — 安裝完成後，選擇自己喜歡的方式註冊即可

步驟 3：將 Rich Menu 透過 API 方式打入

3.1 ) — 新增一個 Collections

3.2 ) — 新增 Post Rich Menu API

• 選擇POST方式，貼上 API URL
• 貼上 LINE 的 Channel access token

POST: https://api.line.me/v2/bot/richmenu

• 在Body貼上我們要打入的格式
• 按 Send 送出

{
  "size": {
    "width": 2500,
    "height": 843
  },
  "selected": true,
  "name": "Sample Rich Menu",
  "chatBarText": "Open Menu",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 833,
        "height": 843
      },
      "action": {
        "type": "message",
        "label": "左側按鈕",
        "text": "VM_OPEN"
      }
    },
    {
      "bounds": {
        "x": 833,
        "y": 0,
        "width": 834,
        "height": 843
      },
      "action": {
        "type": "message",
        "label": "中間按鈕",
        "text": "VM_CLOSE"
      }
    },
    {
      "bounds": {
        "x": 1667,
        "y": 0,
        "width": 833,
        "height": 843
      },
      "action": {
        "type": "message",
        "label": "右側按鈕",
        "text": "VM_STATUS"
      }
    }
  ]
}

3.3 ) — Get Rich Menu

再新增一個 HTTP Request

• 貼上 LINE 的 Channel access token
• 按 Send 送出 GET 請求，下方有得到 richMenuId ，就代表有設定上去了

https://api.line.me/v2/bot/richmenu/list

3.3 ) — Post Rich Menu Picture

上面切好了版型，在這步驟就是要把我們的圖片設定上去了

https://api-data.line.me/v2/bot/richmenu/你的richMenuId/content

• 切至Body，選擇binary，在選擇我們做好的選單圖片

• Send 出去，如果沒錯的話會收到 200 的訊息，但因為我已經設定過了所以收到錯誤訊息

3.4 ) — Default Rich Menu

將這個 Rich Menu 設定成目前的預設

https://api.line.me/v2/bot/user/all/richmenu/你的richMenuId

補充 )

Cancel default rich menu
https://api.line.me/v2/bot/user/all/richmenu

Delete rich menu
https://api.line.me/v2/bot/richmenu/你的richMenuId

兩個的 HTTP Request 都是 DELETE

步驟 4：展示

📔 以上內容部分參考自網路，並整理成自已的實作筆記分享給大家 📔

今天就先這樣
掰掰 🏊🏼 🏊🏼 🏊🏼 🏊🏼 🏊🏼 🏊🏼