LINE 圖文選單串接

教您如何將雲悦雲端總部後台與 LINE 官方帳號進行綁定,並設定互動圖文選單。

第一階段:外部串接 LINE 綁定

在開始設定之前,請確認您已經申請好 LINE 官方帳號 以及 LINE Developers 帳號,並擁有雲悦雲端總部後台的管理員權限。

取得 LINE 開發者參數

一、進入 LINE 官方帳號設定

  1. 以管理員帳號登入雲悦雲端總部後台
  2. 點選左側選單的「外部串接」。
  3. 選擇您的「門店(例如:會員註冊店)」。
  4. 在上方頁籤選擇「獲客串接」,接著點選「LINE 官方帳號」區塊的「點擊設定」。
進入 LINE 官方帳號設定

二、從 LINE Developers 取得三個關鍵參數

  1. 打開 LINE Developers Console 並登入。
  2. 進入您對應的 Messaging API Channel。
  3. 「Basic settings(基本設定)」 頁籤下方,找到並複製 Channel IDChannel secret
取得 Channel ID 與 Channel secret
  1. 切換到 「Messaging API」 頁籤,捲動到最底下,找到並複製 Channel access token
取得 Channel access token

三、將參數填回雲悦後台並設定 Webhook

  1. 回到雲悦總部後台,將剛才複製的三個參數依序貼上至對應欄位,然後點擊「儲存」。
  2. 系統會自動產生一串 Webhook 網址,請複製這串網址。
填入參數並取得 Webhook URL
  1. 回到 LINE Developers 的「Messaging API」頁籤,找到 Webhook URL 欄位並貼上。
設定 Webhook URL

💡 務必開啟 Webhook

貼上 Webhook URL 後,請務必開啟下方的 「Use webhook」 選項!否則 LINE 將無法將顧客的訊息與點擊事件傳送給雲悦系統。


第二階段:LINE 圖文選單設定

在「外部串接 > LINE 官方帳號」綁定成功後,點選綁定卡片上的「設定圖文選單」按鈕進入此頁。

設定六宮格圖文選單

一、設定圖文選單與版面

  1. 進入後預設為空白。您可以點選「使用預設圖片」載入公版圖,或直接拖放上傳您專屬設計的圖文選單圖片。
  2. 於頁面上方切換格式,支援 「1-全版面」「5-五宮格」「6-六宮格」 三種常見配置。
設定圖文選單與版面

二、設定每一格的按鈕動作

點擊下方預覽圖中的任一格子,將彈出編輯視窗。以設定「線上點餐」為例:

  • 顯示文字:自行輸入方便後台辨識的文字(例如:線上點餐)。
  • 動作類型:選擇「開啟網址」。
  • 網址模式:選擇「線上點餐連結」。
  • LIFF ID:請輸入下方第三階段取得的 LIFF ID。
  • 導向頁面:依需求選擇,如「門店列表(選店進點餐)」。
設定按鈕動作與 LIFF

註:其他格子也可以設定為「發送文字訊息」等不同動作。

發送文字訊息等其他動作

三、上傳同步到 LINE

所有格子都設定完成後,點選右上角「上傳」按鈕,將圖文選單同步部署到 LINE 官方帳號。

上傳同步到 LINE

第三階段:LIFF 設定與同步上傳

LIFF 設定與同步上傳

一、建立 LIFF App

  1. 回到 LINE Developers Console,在您的 Provider 點擊 Create a New channel,選擇 LINE Login
選擇 LINE Login
  1. Region 與 Company country 皆選擇 Taiwan。
填寫 Region 資訊
  1. 輸入 Channel name 與 description;App types 選擇 Web app。其餘欄位留空即可,按下 Create。
  2. 進入剛剛建立的 LINE Login Channel,切換到 「LIFF」 頁籤,點擊 Add
  3. 填寫 LIFF 資訊(LIFF app name、Size 選擇 Full、Endpoint URL 填寫 https://ec.cloudxurf.com.tw/liff)。
填寫 LIFF 基本資訊
  1. Scopes 勾選 openidprofile;Add friend option 選擇 On (Normal),點擊 Add 儲存。
設定 Scopes

二、填回後台並完成同步

  1. 建立完成後,會產生一串 LIFF ID。請將其複製。
取得 LIFF ID
  1. 回到雲悦後台圖文選單按鈕設定的「LIFF ID」欄位中貼上,完成全部設定後點擊「上傳」,即可在 LINE 聊天室中看到剛設定的圖文選單囉!