Rich Menu 圖文選單是什麼?

寫 Chatbot 引導很重要,在 Line 裡面有 RichMenu 可以用,讓使用者可以快速的點擊常用功能,要如何建立 RichMenu 呢? 快速不用寫程式的方式是透過 Official Account 設定

image

你可選擇已經預設好的版型,並針對每個區塊設定要執行的動作

image

但如果是透過 Message Api 的話,可以設定的動作就更彈性了,一張圖總共可以設定 20 個 Actions,可以做得事就更多了。要透過 Message Api 新增一個 Rich Menu,有以下步驟

  • 新增一個選單
  • 上傳該選單的圖檔

我整理了Rich Menu相關的 postman collections 只要將環境變數 {{botAcceccToken}} 設為你 Channel 的 Access Token 可直接匯入使用: https://www.getpostman.com/collections/f090d101b7e08e411f12

方法1: 透過 Postman 來上傳 Rich Menu

在上面的 postman collections,你可以使用 Create Rich Menu 來新增,成功的話會回傳 RichMenuID

image

那這個 Post 的 JSON 怎麼產生呢?在 NET 5 你可以直接安裝我的 NetCoreLineBotSDK 透過物件的方式直接產生 Api 所需要的 JSON Request,丟到 postman 裡面

var sampleMenu = new RichmenuDetail();
sampleMenu.size = new CreateSize(1200, 810);
sampleMenu.selected = true; // 是否為預設選單
sampleMenu.name = "sampleMenu"; // 選單名稱
sampleMenu.chatBarText = "More"; // 選單文字
sampleMenu.areas = new List<CreateArea>() // 點擊區域要執行的Action
{
    new CreateArea(boundx:0,boundy:0,width:1200,height:810, _action: new MessageAction("Hello Rich Menu!"))
};

var postJson = JsonConvert.SerializeObject(sampleMenu, new JsonSerializerSettings
{
    NullValueHandling = NullValueHandling.Ignore,
    ContractResolver = new DefaultContractResolver
    {
        NamingStrategy = new CamelCaseNamingStrategy()
    }
});

或者是這個步驟可以用 Bot Designer 工具,可以直接用匡列的方式設定好,並直接產生JSON

image

接著透過 postman collections Upload Rich Menu Images 你可以於 URI 指定剛剛的 Rich Menu ID,及上傳圖片來完成綁定

image

方法2: 透過 NetCoreLineBotSDK 上傳

在 SDK 裡面,你可以直接用下列語法完成RichMenu的上傳與圖片綁定

var sampleMenu = new RichmenuDetail();
sampleMenu.size = new CreateSize(1200, 810);
sampleMenu.selected = true; // 是否為預設選單
sampleMenu.name = "sampleMenu"; // 選單名稱
sampleMenu.chatBarText = "More"; // 選單文字
sampleMenu.areas = new List<CreateArea>() // 點擊區域要執行的Action
{
    new CreateArea(boundx:0,boundy:0,width:1200,height:810, _action: new MessageAction("Hello Rich Menu!"))
};
await CreateRichMenuWithImageAsync(sampleMenu,"https://via.placeholder.com/1200x810/E71989.png/fff");

或者是直接丟Bot Designer產出的JSON

await CreateRichMenuByJsonWithImageAsync(json, "https://via.placeholder.com/1200x810/E71989.png/fff", alias: "richmenu-a");

Rich Menu 的切換

Line 在 6/21 的時候推出了 Swtich Rich Mnues 的功能,以前要達到這種需求,都要用 Link Rich Menu To User 這類的 Api 才能達成,在這次改版,新增一個Action 類型叫做 Rich menu switch action,但目前這個 Action 只能支援在Rich Menu觸發,所以透過 Message Types/Flex 裡面去指定這個 Action 是會出錯的,簡單來講就是,切換選單的動作只能在選單來觸發,那怎麼切換呢? 首先要先設定別名:

方法1: 透過 Postman 設定 RichMenu Alias

透過 Create rich menu alias 這個 Api 指定RichMenuId的別名

image

Get list of rich menu alias 驗證當前所有已設定的 alias

image

當然,別名設定錯了,還是可以用 Update rich menu alias 來更新

image

接著只要在建立 RichMenu 的時候,Action 指定為別名就會切換了,以下面為例,我建立了三個RichMenu點擊區域,別名分別是 a/b/c,點擊後就可以切換至相對應的選單,而點擊後也會觸發postback事件,可在這個欄位塞一些資料,做事件的處理,範例的的 JSON 如下

{"name":"sampleMenu-c","size":{"width":1200,"height":810},"chatBarText":"More","selected":true,"areas":[{"bounds":{"x":0,"y":0,"width":400,"height":810},"action":{"type":"richmenuswitch","richMenuAliasId":"richmenu-a","data":"richmenu-a-postback"}},{"bounds":{"x":400,"y":0,"width":400,"height":810},"action":{"type":"richmenuswitch","richMenuAliasId":"richmenu-b","data":"richmenu-b-postback"}},{"bounds":{"x":800,"y":0,"width":400,"height":810},"action":{"type":"richmenuswitch","richMenuAliasId":"richmenu-c","data":"richmenu-c-postback"}}]}

差別在於點擊的區域可以指定 RichMenuSwitch Action

{
   "type":"richmenuswitch",
   "richMenuAliasId":"richmenu-a",
   "data":"richmenu-a-postback"
}

2021.07.08 測試 Bot Designer 工具還不能選到 RichMenuSwitch Action,也許之後會支援

方法2: 透過 NetCoreLineBotSDK 設定 RichMenu Alias

因應本次改版,在我開源的 SDK 也擴充以下選擇性參數了,你可以在建立 RichMenu 的時候直接給他別名,即可完成 RichMenu 新增.圖片.別名的設定

var sampleMenu = new RichmenuDetail();
sampleMenu.size = new CreateSize(1200, 810);
sampleMenu.selected = true;
sampleMenu.name = "sampleMenu-c";
sampleMenu.chatBarText = "More";
sampleMenu.areas = new List<CreateArea>()
{
    new CreateArea(boundx:0,boundy:0,width:400,height:810, _action: new RichMenuSwitchAction("richmenu-a", "richmenu-a-postback")),
    new CreateArea(boundx:400,boundy:0,width:400,height:810, _action: new RichMenuSwitchAction("richmenu-b", "richmenu-b-postback")),
    new CreateArea(boundx:800,boundy:0,width:400,height:810, _action: new RichMenuSwitchAction("richmenu-c", "richmenu-c-postback")),
};
await CreateRichMenuWithImageAsync(sampleMenu,"https://via.placeholder.com/1200x810/E71989.png/fff", alias: "richmenu-a");

或者是直接丟RichMenu的Json

await CreateRichMenuByJsonWithImageAsync(json, "https://via.placeholder.com/1200x810/E71989.png/fff", alias: "richmenu-a");

Demo

整體的切換速度還蠻順暢的!


NetCoreLineBotSDK 是我開源的函式庫,目前正在努力茁壯中,如果有任何疑問都可以在 Github 討論

參考連結