Line Bot 圖文選單

日期：

Line Bot 圖文選單(Rich Menu)

相關說明

要建立圖文選單有兩種方式，第一種是進入 Line@ 後台有功能可以使用，第二種則是透過 Postman 等軟體或寫程式呼叫 API。
後台功能可參考此連結，圖文選單｜LINE Biz-Solutions - LINE for Business

建立圖文選單(API方式)

建立圖文選單有三個步驟:

  1. 建立圖文選單
  2. 上傳圖文選單的圖片
  3. 設定預設的圖文選單

1.建立圖文選單

Request url
API 的網址，需要使用 POST方法呼叫

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

Request headers
header 的參數，{channel access token}要替換成自己申請 Line Bot 時的那個token，application/json 表示下方 Request body 的格式為 json

Authorization: Bearer {channel access token}
Content-Type: application/json

http 的主體，用來定義圖文選單相關的設定

  • size: 圖文選單圖片的長寬，必需為以下尺寸:
    2500x1686、2500x843、1200x810、1200x405、800x540、800x270
  • selected: 選單是否預設開啟，這裡我設定為 false，預設不開啟。
  • name: 選單名稱，用於識別和管理選單，不會顯示給使用者。
  • chatBarText: 顯示在聊天視窗下方的選單文字。
  • areas: 用於定義按鈕的可點墼區域。
    • bounds 用於定義座標和大小
      • x、y: 起始座標
      • width: 寬度
      • height: 高度
    • action 用於定義觸發的動作
      • type: 動作類型，詳細說明可以參考 官方文件
      • label: 動作標籤，用於客戶端輔助功能
      • text: 發送到聊天視窗的文字
      • data: 透過 webhook 回傳到後端的字串

Request body

{
    "size": {
      "width": 2500,
      "height": 1686
    },
    "selected": true,
    "name": "richmenu-1",
    "chatBarText": "快捷選單",
    "areas": [
      {
        "bounds": {
          "x": 0,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "歲末驚喜",
          "text": "歲末驚喜"
        }
      },
      {
        "bounds": {
          "x": 0,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "粉絲獨享",
          "text": "粉絲獨享"
        }
      },
      {
        "bounds": {
          "x": 833,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "最新消息",
          "text": "最新消息"
        }
      },
      {
        "bounds": {
          "x": 833,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "常見問題",
          "text": "常見問題"
        }
      },
      {
        "bounds": {
          "x": 1666,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "熱銷必敗",
          "text": "熱銷必敗"
        }
      },
      {
        "bounds": {
          "x": 1666,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "推薦好友",
          "text": "推薦好友"
        }
      }
   ]
}

Response
為回傳訊息，選單建立成功後會回傳 {rich menu id} 後面 API 會使用到。

{
    "richMenuId": "{rich menu id}"
}

Postman 結果

  • Header 部分
  • Body 部分

2.上傳圖文選單的圖片

Request url
這邊要使用到剛剛建立圖文選單最後所回傳的rice menu id

POST https://api.line.me/v2/bot/richmenu/{rich menu id}/content

Request headers
使用上面建立圖文選單一樣的{channel access token}，Content-Type則選擇你上傳圖片的格式(jpg或png)，Content-Length則可以省略不用。

Authorization: Bearer {channel access token}
Content-Type: image/jpeg or image/png
Content-Length: request body 大小 (byte)

Request body

圖片主體
格式: JPEG 或 PNG
長寬: 2500x1686, 2500x843, 1200x810, 1200x405, 800x540, 800x270
大小限制: 1 MB

Response

{}
  • Header 部分
  • Body 部分

3.設定預設的圖文選單

Request url
{rich menu id}一樣使用建立圖文選單回傳的id

POST https://api.line.me/v2/bot/user/all/richmenu/{rich menu id}

Request headers
使用上面建立圖文選單一樣的{channel access token}

Authorization: Bearer {channel access token}

Request body

無

Response

{}

這步驟會設定所有用戶預設看到的圖文選單

其他相關 API

  • 查詢所有圖文選單
GET https://api.line.me/v2/bot/richmenu/list

Request headers

Authorization: Bearer {channel access token}

Response

JSON 格式的列表清單
  • 刪除圖文選單
DELETE https://api.line.me/v2/bot/richmenu/{rich menu id}

Request headers

Authorization: Bearer {channel access token}

Response

{}
  • 取得預設的圖文選單
GET https://api.line.me/v2/bot/user/all/richmenu

Request headers

Authorization: Bearer {channel access token}

Response

{
    "richMenuId": "{rich menu id}"
}
  • 取消預設的圖文選單
DELETE https://api.line.me/v2/bot/user/all/richmenu

Request headers

Authorization: Bearer {channel access token}

Response

{}

PHP Line Message API SDK套件

※需要版本PHP 5.6以上

  1. 安裝套件
$ composer require linecorp/line-bot-sdk
  1. PHP Code Example
class BotController extends Controller{
    function chat(Request $request){
        //宣告linebot物件
        $httpClient = new CurlHTTPClient(env('LINEBOT_TOKEN'));
        $bot        = new LINEBot($httpClient, ['channelSecret' => env('LINEBOT_SECRET')]);

        //取得使用者id和訊息內容
        $text    = $request->events[0]['message']['text'];
        $user_id = $request->events[0]['source']['userId'];
    }
}

相關連結

資料下載-LINE官方帳號｜LINE Biz-Solutions
[Day06] 如何建立 LINE Bot 的圖文選單 - Rich Menu

line-bot-sdk-php - GitHub 

留言

張貼留言