0931-303-767 kevin@des13.com 週一至週五 9:00–18:00
查看方案與試用

esCrm · 操作資料

LINE 官方帳號建立與 esCrm 串接步驟

從建立 LINE 官方帳號、LINE Login 頻道與 LIFF，到在 esCrm 填入串接設定、驗證 Webhook，一步步說明。

本文件說明如何建立 LINE 官方帳號、建立 LINE Login 頻道與 LIFF，並在 esCrm 租戶完成串接，讓顧客能從 LINE 直接訂購。文中以測試帳號「esCrm電商測試」為例；<租戶代碼>、 等請換成您自己的值。Channel secret、Channel access token 屬機密資料，請勿截圖、外傳或貼到聊天訊息。

一、建立 LINE 官方帳號

  1. 登入 LINE Official Account Manager（https://manager.line.biz/），進入帳號一覽。

01_帳號一覽

  1. 點左側「建立」，開啟建立 LINE 官方帳號表單。

02_建立帳號表單

  1. 填寫帳號名稱、電子郵件、國家／地區（台灣）、公司名稱與業種（例：企業、組織／網路、軟體）。

03_填寫完成表單

  1. 按「確定」，檢查確認頁的輸入內容。

04_確認輸入內容

  1. 按「完成」，依畫面完成 reCAPTCHA 圖片驗證。

05_reCAPTCHA圖片驗證

  1. 出現「您的 LINE 官方帳號已建立完成」，畫面會顯示帳號的基本 ID（例：@642ywcpl）。

06_帳號建立完成

  1. 進入管理後台時，若出現「同意我們使用您的資訊」，請按「同意」。

07_資訊使用同意頁

  1. 出現「使用條款更新」時，按「了解並繼續使用」。

08_使用條款更新

  1. 進入新帳號主頁。

09_新帳號主頁

  1. 點右上「設定」→ 左側「Messaging API」，此時狀態為「未使用」。

10_MessagingAPI設定頁

  1. 點「啟用 Messaging API」，出現「選擇服務提供者」對話框。

11_選擇服務提供者對話框

  1. 選擇「建立服務提供者」，輸入提供者名稱（例：益盛測試）後按「同意」。若已有提供者，也可直接選擇現有的。

14_輸入提供者益盛測試

  1. 隱私權政策與服務條款網址可留空，按「確定」；確認對話框會提醒帳號與提供者連動後無法變更，確認無誤再按「確定」。

15_啟用確認對話框

啟用後狀態變為「使用中」，頁面會顯示 Channel ID 與 Channel secret。Channel secret 為機密資料，本文件不附截圖，請直接到 LINE Developers 複製使用。

  1. 設定大頭貼：在帳號設定點「編輯基本檔案」，開啟商業簡介頁面，「基本檔案圖片」預設為空白頭像。

16_大頭貼上傳前_商業簡介頁

  1. 點頭像旁的選單 →「上傳」，選擇圖片後在「編輯照片」對話框調整裁切範圍。

17_大頭貼裁切對話框

  1. 按「確定」後出現「公開基本檔案圖片」確認（公開後 1 小時內無法再變更）。

18_公開基本檔案圖片確認

  1. 按「公開」，重新整理後即可看到新的大頭貼。

19_大頭貼上傳後

二、建立 LINE Login 頻道與 LIFF

以下在 LINE Developers Console（https://developers.line.biz/console/）操作。

  1. 進入提供者（例：益盛測試），按「Create a new channel」，類型選「LINE Login」，填寫頻道名稱（例：esCrm電商測試 Login）、說明、App type 勾選「Web app」後建立。建立後提供者底下會有 LINE Login 與 Messaging API 兩個頻道。

20_提供者頻道列表

  1. 點進 LINE Login 頻道的「Basic settings」，記下 Channel ID（例：2012051507），第三段會用到。

21_LoginChannel基本設定

  1. 在同頁下方「Add friend option」→「Linked LINE Official Account」按「Edit」，選擇剛建立的官方帳號（例：@642ywcpl），讓顧客登入時可加好友。

22_連結官方帳號

  1. 切到「LIFF」分頁按「Add」：LIFF app name 填店名、Size 選「Full」、Endpoint URL 先填 https://crm.esun.tw/（第三段再改成租戶網址）、Scopes 勾選 openid 與 profile、Add friend option 選「On (normal)」，按「Add」。建立後列表會顯示 LIFF ID 與 LIFF URL。

23_LIFF列表

  1. 點 LIFF 進入詳情，確認 LIFF ID（格式：-<英數字>，例：2012051507-so0vODMr）、Size、Scopes 與 Add friend option。（本圖為完成第三段後的畫面，Endpoint URL 已是租戶網址。）

24_LIFF設定詳情

三、在 esCrm 租戶設定 LINE 串接

  1. 以租戶管理員登入 esCrm，進入「設定」→「系統設定」→「LINE 串接」分頁。上方是 LINE Messaging API，下方是 LIFF / LINE Login（前台）。

25_租戶LINE串接設定頁

  1. 到 LINE Developers 開啟官方帳號的 Messaging API 頻道（例：esCrm電商測試），在「Messaging API」分頁可看到 Bot basic ID 與 Webhook settings；Channel access token 在同頁下方按「Issue」產生，Channel secret 在「Basic settings」分頁。

26_租戶Webhook網址

  1. 把 與 貼回 esCrm（欄位會以遮蔽方式顯示），按「儲存」。

27_貼上MessagingAPI金鑰

  1. 在 LIFF 區塊填入 LIFF ID 與 LINE Login Channel ID（可選，留空時會從 LIFF ID 自動推導），按「儲存 LIFF 設定」。上方「統一對外入口」會變成 https://liff.line.me/，這就是要給顧客的網址。已儲存的金鑰只顯示末幾碼。

28_LIFF設定已儲存

  1. 按「測試連線」，出現「連線成功！官方帳號：…」即表示 token 正確。

29_測試連線成功

  1. 回到 LINE Developers 的 Messaging API 分頁 → Webhook settings，Webhook URL 填 https://crm.esun.tw/t/<租戶代碼>/api/line/webhook，開啟「Use webhook」，按「Verify」出現「Success」即完成。

30_Webhook驗證成功

  1. 開啟 LINE Login 頻道的 LIFF 設定，把 Endpoint URL 改成 https://crm.esun.tw/t/<租戶代碼>/portal（需與 esCrm 畫面上「LINE Developers → LIFF Endpoint」完全一致，可直接按複製鈕）。

31_LIFF_Endpoint更新

提示：<租戶代碼> 就是 esCrm 設定頁 Endpoint 網址 /t/ 後面那一段。

四、顧客從 LINE 訂購

顧客在 LINE 中開啟 https://liff.line.me/（可放在圖文選單或訊息中），以 LINE 帳號登入後即進入商店。

4.1 單次購買（手冊 13.3）

  1. 商店首頁：可搜尋商品、依分類篩選，上方顯示 LINE 登入的顧客名稱。

13-3_01_product_list

  1. 點商品進入商品頁，查看價格與說明。

13-3_02_product_detail

  1. 填寫訂購資訊：數量、配送方式（到店自取／宅配寄送）、訂購方式（單次／週期）與收件人。

13-3_03_order_form

4.2 週期訂購（手冊 13.4）

  1. 訂購方式選「週期」，設定頻率（每天／每週／每月／每 N 天）、星期、開始日期與時段。

13-4_01_periodic_setup

  1. 確認訂購頁會列出金額、配送方式、週期與接下來幾次的日期，確認後按「確認送出」。

13-4_02_confirm

  1. 顯示「訂單已成立」與訂單編號、下一筆日期，可點「查看訂單」。

13-4_03_success

  1. 訂單明細：訂單編號、狀態（訂單處理中、週期訂單）、品項與配送資訊。

13-4_04_order_detail

  1. 「我的訂單」：上方是週期訂單（可暫停或取消），下方是已產生的各筆訂單。

13-4_05_my_orders

← 回 esCrm 操作資料索引