LINE 圖文選單串接

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

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

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

取得 LINE 開發者參數

一、進入 LINE 官方帳號設定

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

二、在 LINE 官方帳號管理後台啟用 Messaging API

💡 首次設定請先啟用 Messaging API

若您是首次設定,必須先在 LINE Official Account Manager (LINE 官方帳號管理後台) 開通 Messaging API 功能,之後在 LINE Developers 才能看到對應的 Channel:

1. 登入 LINE 官方帳號管理後台 並選擇您的官方帳號。
2. 點選右上角的「設定」 > 左側「Messaging API」。
3. 點擊綠色的 「啟用 Messaging API」 按鈕,並依照畫面指示選擇或建立 Provider,同意條款即可開通。

點擊啟用 Messaging API 選擇服務提供者 隱私權政策及服務條款 啟用 Messaging API

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

  1. 打開 LINE Developers Console 並登入。
  2. 進入您對應的 Messaging API Channel。
  3. 「Basic settings(基本設定)」 頁籤下方,找到並複製 Channel IDChannel secret
取得 Channel ID 與 Channel secret
  1. 切換到 「Messaging API」 頁籤,捲動到畫面最底下。
  2. 找到 Channel access token (long-lived) 區塊。
  3. 若您的欄位沒有顯示字串,請點擊右側的 「Reissue」(或 Issue)按鈕來產生。
  4. 產生後,點擊旁邊的 「複製」 圖示(紅框處),將 Channel access token 複製起來備用。
產生並複製 Channel access token

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

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

若您是首次設定,請依照畫面指示點擊下方的按鈕,同意條款以開通 Messaging API 功能。

選擇服務提供者 隱私權政策及服務條款 啟用 Messaging API
  1. 接著找到 Webhook URL 欄位並貼上剛剛複製的網址。
設定 Webhook URL Messaging API 頁籤 Channel access token

💡 務必開啟 Webhook

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


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

LIFF 設定與同步上傳

一、建立 LIFF App

  1. 回到 LINE Developers Console,點選您建立的 Provider(開發者空間)。
選擇 Provider
  1. 在您的 Provider 頁面中,點擊 Create a New channel,並選擇 LINE Login
選擇 LINE Login
  1. Region 與 Company country 皆選擇 Taiwan。
填寫 Region 資訊
  1. 輸入 Channel name 與 description。(💡 提示:Channel name 主要是提供給內部開發者識別,或在使用者初次點擊選單要求授權時顯示,建議直接輸入您的「品牌名稱」或「門店名稱」;description 則可簡單輸入「點餐系統」即可);App types 選擇 Web app。其餘欄位留空即可,按下 Create。
建立 Channel 與選擇 App types
  1. 進入剛剛建立的 LINE Login Channel,切換到 「LIFF」 頁籤,點擊 Add
切換到 LIFF 頁籤
  1. 填寫 LIFF 資訊(LIFF app name、Size 選擇 Full、Endpoint URL 填寫 https://ec.cloudxurf.com.tw/liff )。
設定 Scopes
  1. Scopes 勾選 openidprofile;Add friend option 選擇 On (Normal),點擊 Add 儲存。

二、填回後台並完成同步

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

🚨 最重要的一步:發布 Channel

回到 LINE Developers Console 頁面最上方,點擊標示為 「Developing」 的按鈕,接著在彈出的視窗中點擊 「Publish」,將 Channel 設定為公開狀態。

⚠️ 若未發布,您的顧客將無法正常打開圖文選單!

點擊 Developing 點擊 Publish

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

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

設定六宮格圖文選單

一、設定圖文選單與版面

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

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

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

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

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

發送文字訊息等其他動作

三、上傳同步到 LINE

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

上傳同步到 LINE