為聊天機器人加上圖文選單

Chatbot學習筆記-Day8

漂亮的圖文選單可以讓使用者快速了解並且使用Chatbot的服務，因此在官方帳號當中加上自訂的圖文選單已不可或缺。

在為Line Chatbot加上圖文選單(Rich menu)之前，必需先前往Line Official Account Manager，在左方工具列中找到圖文選單。

圖一 Line Official Account Manager

接著按下建立，並開始填寫基本資料。其中，使用期間的部分可依照檔期的需求創建多個圖文選單並規劃時程，非常方便。

選單列顯示文字則是圖文選單在尚未被開啟前於聊天室下方選單列所呈現的文字，可以提醒使用者點擊。

圖二 顯示設定

接著就會來到重頭戲 - 內容設定的區塊。圖文選單使用的圖片需依據選擇的版型製作對應的圖片。

版型的部分則分為Large／Medium／Small三種尺寸，只要點擊這裡就可以下載範本囉。至於不同尺寸官方也給了不同的說明：

• Large：適合高解析顯示器裝置，但圖片讀取可能較費時
• Medium：官方建議使用的比例，適用於大多數一般裝置
• Small：讀取快速，但在高解析度裝置上的畫質可能不理想

圖三 內容設定

按下選擇版型後可以發現，Line提供了豐富的版型讓開發者選擇。而今天我們預計以小型的第一個三欄式圖文選單作為練習。

圖四 版型選擇

下載完官方提供的範本後，找到對應的模板。這次我選擇Compact資料夾當中Mediun的版本使用，設定為長1200px、寬405px。

圖五 範例模板

Content

決定完模板之後，樣式的設計與呼叫的功能就是我們接下來需要考慮的。在Day2，我們將Chatbot增加了搜尋圖片的功能；Day5則是讓使用者可以快速獲取即時新聞；Day7利用Flex Messages爬取水庫的最新水情。

但每次呼叫這些服務都需要重新在Chatbot當中輸入關鍵字，其實非常不便。因此，打造一個圖文選單(Rich Menu)來整合這些服務是眼下最務實的做法了！

首先看到樣式設計，也就是針對設計規範及功能主題稍微改造一下圖五，製圖的部分讓大家見笑了xd：

圖六 製作圖文選單

有了圖片之後就可以在Line Official Account Manager上傳背景圖片啦，接著是動作的編輯：

圖七 動作設定

我分別在圖文選單對應的欄位(A-C)當中設定了文字類型的動作。換言之，使用者點下Rich Menu後系統會自動回傳對應的文字訊息&啟動函式。

除了文字類型的動作，還有連結、優惠券和集點卡可以選擇。

圖八 動作設定(更多)

一切就緒！設定完成就馬上來看看測試結果吧。

圖九 實測結果

是不是非常快速且實用呢，趕快為自己的Chatbot加上迷人的快速選單吧。

感謝觀看！

系列文章

• 【Day1】 打造你的第一隻聊天機器人
• 【Day2】 搜圖助理 — 聊天機器人
• 【Day3】 為聊天機器人連結資料庫
• 【Day4】 利用聊天機器人對資料庫下指令吧！
• 【Day5】 讓聊天機器人開啟爬蟲技能！
• 【Day6】 聊天機器人的Quick replies
• 【Day7】 用Flex Messages呈現爬蟲