LINE 圖文選單串接
教您如何將雲悦雲端總部後台與 LINE 官方帳號進行綁定,並設定互動圖文選單。
第一階段:外部串接 LINE 綁定
在開始設定之前,請確認您已經申請好 LINE 官方帳號 以及 LINE Developers 帳號,並擁有雲悦雲端總部後台的管理員權限。
一、進入 LINE 官方帳號設定
- 以管理員帳號登入雲悦雲端總部後台。
- 點選左側選單的「外部串接」。
- 選擇您的「門店(例如:會員註冊店)」。
- 在上方頁籤選擇「獲客串接」,接著點選「LINE 官方帳號」區塊的「點擊設定」。
二、從 LINE Developers 取得三個關鍵參數
- 打開 LINE Developers Console 並登入。
- 進入您對應的 Messaging API Channel。
- 在 「Basic settings(基本設定)」 頁籤下方,找到並複製
Channel ID與Channel secret。
- 切換到 「Messaging API」 頁籤,捲動到最底下,找到並複製
Channel access token。
三、將參數填回雲悦後台並設定 Webhook
- 回到雲悦總部後台,將剛才複製的三個參數依序貼上至對應欄位,然後點擊「儲存」。
- 系統會自動產生一串 Webhook 網址,請複製這串網址。
- 回到 LINE Developers 的「Messaging API」頁籤,找到 Webhook URL 欄位並貼上。
💡 務必開啟 Webhook
貼上 Webhook URL 後,請務必開啟下方的 「Use webhook」 選項!否則 LINE 將無法將顧客的訊息與點擊事件傳送給雲悦系統。
第二階段:LINE 圖文選單設定
在「外部串接 > LINE 官方帳號」綁定成功後,點選綁定卡片上的「設定圖文選單」按鈕進入此頁。
一、設定圖文選單與版面
- 進入後預設為空白。您可以點選「使用預設圖片」載入公版圖,或直接拖放上傳您專屬設計的圖文選單圖片。
- 於頁面上方切換格式,支援 「1-全版面」、「5-五宮格」、「6-六宮格」 三種常見配置。
二、設定每一格的按鈕動作
點擊下方預覽圖中的任一格子,將彈出編輯視窗。以設定「線上點餐」為例:
- 顯示文字:自行輸入方便後台辨識的文字(例如:線上點餐)。
- 動作類型:選擇「開啟網址」。
- 網址模式:選擇「線上點餐連結」。
- LIFF ID:請輸入下方第三階段取得的 LIFF ID。
- 導向頁面:依需求選擇,如「門店列表(選店進點餐)」。
註:其他格子也可以設定為「發送文字訊息」等不同動作。
三、上傳同步到 LINE
所有格子都設定完成後,點選右上角「上傳」按鈕,將圖文選單同步部署到 LINE 官方帳號。
第三階段:LIFF 設定與同步上傳
一、建立 LIFF App
- 回到 LINE Developers Console,在您的 Provider 點擊 Create a New channel,選擇 LINE Login。
- Region 與 Company country 皆選擇 Taiwan。
- 輸入 Channel name 與 description;App types 選擇 Web app。其餘欄位留空即可,按下 Create。
- 進入剛剛建立的 LINE Login Channel,切換到 「LIFF」 頁籤,點擊 Add。
- 填寫 LIFF 資訊(LIFF app name、Size 選擇 Full、Endpoint URL 填寫
https://ec.cloudxurf.com.tw/liff)。
- Scopes 勾選 openid 與 profile;Add friend option 選擇 On (Normal),點擊 Add 儲存。
二、填回後台並完成同步
- 建立完成後,會產生一串 LIFF ID。請將其複製。
- 回到雲悦後台圖文選單按鈕設定的「LIFF ID」欄位中貼上,完成全部設定後點擊「上傳」,即可在 LINE 聊天室中看到剛設定的圖文選單囉!