LINE 圖文選單串接
教您如何將雲悦雲端總部後台與 LINE 官方帳號進行綁定,並設定互動圖文選單。
第一階段:外部串接 LINE 綁定
在開始設定之前,請確認您已經申請好 LINE 官方帳號 以及 LINE Developers 帳號,並擁有雲悦雲端總部後台的管理員權限。
一、進入 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,同意條款即可開通。
三、從 LINE Developers 取得三個關鍵參數
- 打開 LINE Developers Console 並登入。
- 進入您對應的 Messaging API Channel。
- 在 「Basic settings(基本設定)」 頁籤下方,找到並複製
Channel ID與Channel secret。
- 切換到 「Messaging API」 頁籤,捲動到畫面最底下。
- 找到 Channel access token (long-lived) 區塊。
- 若您的欄位沒有顯示字串,請點擊右側的 「Reissue」(或 Issue)按鈕來產生。
- 產生後,點擊旁邊的 「複製」 圖示(紅框處),將
Channel access token複製起來備用。
四、將參數填回雲悦後台並設定 Webhook
- 回到雲悦總部後台,將剛才複製的三個參數依序貼上至對應欄位,然後點擊「儲存」。
- 系統會自動產生一串 Webhook 網址,請複製這串網址。
- 回到 LINE Developers 並切換至 「Messaging API」 頁籤。
若您是首次設定,請依照畫面指示點擊下方的按鈕,同意條款以開通 Messaging API 功能。
- 接著找到 Webhook URL 欄位並貼上剛剛複製的網址。
💡 務必開啟 Webhook
貼上 Webhook URL 後,請務必開啟下方的 「Use webhook」 選項!否則 LINE 將無法將顧客的訊息與點擊事件傳送給雲悦系統。
第二階段:LIFF 設定與同步上傳
一、建立 LIFF App
- 回到 LINE Developers Console,點選您建立的 Provider(開發者空間)。
- 在您的 Provider 頁面中,點擊 Create a New channel,並選擇 LINE Login。
- Region 與 Company country 皆選擇 Taiwan。
- 輸入 Channel name 與 description。(💡 提示: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 聊天室中看到剛設定的圖文選單囉!
🚨 最重要的一步:發布 Channel
回到 LINE Developers Console 頁面最上方,點擊標示為 「Developing」 的按鈕,接著在彈出的視窗中點擊 「Publish」,將 Channel 設定為公開狀態。
⚠️ 若未發布,您的顧客將無法正常打開圖文選單!
第三階段:LINE 圖文選單設定
在「外部串接 > LINE 官方帳號」綁定成功後,點選綁定卡片上的「設定圖文選單」按鈕進入此頁。
一、設定圖文選單與版面
- 進入後預設為空白。您可以點選「使用預設圖片」載入公版圖,或直接拖放上傳您專屬設計的圖文選單圖片。
- 於頁面上方切換格式,支援 「1-全版面」、「5-五宮格」、「6-六宮格」 三種常見配置。
二、設定每一格的按鈕動作
點擊下方預覽圖中的任一格子,將彈出編輯視窗。以設定「線上點餐」為例:
- 顯示文字:自行輸入方便後台辨識的文字(例如:線上點餐)。
- 動作類型:選擇「開啟網址」。
- 網址模式:選擇「線上點餐連結」。
- LIFF ID:請輸入上方第二階段取得的 LIFF ID。
- 導向頁面:依需求選擇,如「門店列表(選店進點餐)」。
註:其他格子也可以設定為「發送文字訊息」等不同動作。
三、上傳同步到 LINE
所有格子都設定完成後,點選右上角「上傳」按鈕,將圖文選單同步部署到 LINE 官方帳號。