> For the complete documentation index, see [llms.txt](https://docs.ezorderly.com/guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ezorderly.com/guide/importly/integration/lineliff.md).

# Line Liff 服務串接設定

LINE LIFE 綁定 可透過品牌LINE＠圖文選單，做會員綁定取得其LINE UID，作為後續分眾行銷、投放訊息之用。

執行步驟說明：

步驟一：至 [LINE Developers](https://developers.line.biz/zh-hant/) 後台設定 LINE LIFF 資訊

步驟二：完成本畫面的 Line Liff 串接&#x20;

步驟三：至 [LINE Official Account](https://account.line.biz/login) 後台設定 圖文選單 資訊&#x20;

## 步驟一：至 [LINE Developers](https://developers.line.biz/zh-hant/) 後台設定 LINE LIFF 資訊

### **創建提供者 Provider**

1\. 至 [LINE Developers](https://developers.line.biz/zh-hant/) 後台，點選右上角 Log in，選擇「**使用 LINE 帳號登入**」，利用個人 LINE 帳號登入即可。&#x20;

2.**創建提供者 Provider**：捲動至頁面下方，點選**綠色按鈕 Create a new provider**&#x20;

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-MfbUMX7X4eS74ov19bU%2F-MfbV3JWLLPVaq-3jjBA%2Fdev-1.png?alt=media\&token=f936c5ca-8f6c-4701-ac43-33e1000ecfc2)

3.　填入提供者名稱（Provider name）：『品牌名稱』，再點選左下**綠色按鈕 Create**，完成建立 Provider

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5D5BW-UiUhQwb0-CW%2FDEV-010.png?alt=media\&token=b683432c-ae0f-48f8-99fd-c41e429e3196)

### **創建 Channel**

1.　創建 Provider 之後，就可以在左側選單的 Admin 項下，點選 Provider 的名字。

2.　點選左側 Create a LINE Login channel

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-MfbUMX7X4eS74ov19bU%2F-MfbVNahkpO3Nsvf_YaH%2Fdev-3.png?alt=media\&token=3c816ec6-87b8-4dde-9817-87685f592fe5)

3.　依指示填寫完各欄位後，點選左下綠色按鈕 Create，完成創建 Channel

* Region：請選Taiwan
* Channel icon 建議使用品牌 LOGO

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5DI5V7xIIQYiqKAF5%2Fdev-01.png?alt=media\&token=49cc1d84-4d5a-4079-9244-ac840652d5cf)

❗注意！LOGO 與Channel name、Channel description將會顯示給顧客看到，建議使用品牌名稱與建議文案。

* Channel name 建議使用『品牌名稱』 會員助手
* Channel description ：在LINE中取得專屬顧客服務
* App Types：勾選 Web app
* Email address：填入 客服信箱

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5DXNIOFOx4y_Dlka4%2Fdev-02.png?alt=media\&token=0bcb7b68-73d4-453f-9696-a4d8d4266bab)

* Privacy policy URL：請填入品牌官網隱私權條款 連結
* Terms of use URL：請填入品牌官網 服務條款 連結

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5De6QYoE-MDPvIhkn%2Fdev-03.png?alt=media\&token=792832b2-864c-44a6-8e1c-733e0bc5bc5e)

完成上述欄位填寫後，點選「 Create 」，即可完成 Channel 建置。

###

### **創建 LINE LIFF**&#x20;

點選 Create，完成 Channel 建置後，系統會跳轉至「品牌名稱」會員助手的 Basic setting 頁面。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5Dp_tE2Q-gUhbcSor%2Fdev-04.png?alt=media\&token=98208514-cf71-4230-885a-1ef5a0a7e612)

1\. 於上方選單中，點選 LIFF 頁籤，再點選下方綠色按鈕 Add 創建 LINE LIFF。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-MfbVgAeJqx2QvAkJy1G%2F-MfbVxrU0Hw8OzQ8_sqB%2Fdev-7.png?alt=media\&token=a2f3ac92-78a0-467f-a08b-882f5f6844ae)

2.　依指示填寫各欄位

* LIFF app name：填入『品牌名稱』會員助手
* Size：選擇 Tall&#x20;
* Endpoint URL：請先輸入 <https://ezorderly.com/**line/>\*\* &#x20;

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5E4GLivNgN13VYNhG%2Fdev-06.png?alt=media\&token=5224f209-95d3-495b-a5f7-de7c8d1ad945)

* Scopes：勾選 profile、openid，chat\_message.write不用勾選。&#x20;
* Bot link feature：選擇 On (Normal)
* Options：不必啟用&#x20;

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5E9Gsio1I9UKV7er3%2Fdev-07.png?alt=media\&token=035f08b3-0d63-4720-82b3-c997fb03b69c)

填寫完畢後，點選右下角綠色按鈕 Add，成功新增 LIFF applications。

{% hint style="info" %}
Scopes若有出現email 選項，品牌可自行決定是否索取。
{% endhint %}

3\. 點選進入 剛新增的 LIFF applications。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-MfbVgAeJqx2QvAkJy1G%2F-MfbWmnxSM1iD4m510Us%2Fdev-16.png?alt=media\&token=3326e36b-b8a6-4571-8e3e-d403c2b861b2)

* Endpoint URL: 請輸入 <https://ezorderly.com/line/**LIFF> ID\*\*&#x20;

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5EQQ5wyJHtZb0yluI%2Fdev-08.png?alt=media\&token=1605bcb2-fddb-4704-a9f0-7172495b2f76)

###

### **Channel 權限設定**

1\. 點選 Roles 選單&#x20;

2.點選「**I**nvite by mail」<br>

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5EXWk0IiCbXG9oj4n%2Fdev-10.png?alt=media\&token=695a199a-be30-4e7a-81d3-22c30e9a4388)

* email：建議將 公司主管或負責人納入此管理權限中，並將ORDERLY負責窗口加入。
* Roles：主管或負責人、ORDERLY 窗口皆給予 Admin 權限。。&#x20;

{% hint style="info" %}
ORDERLY 窗口僅作設定檢查，完成設定後，即可刪除。
{% endhint %}

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5CjCwjsbr8j0YmDIZ%2F-Mg5Efh3uorQjvMfRt0O%2Fdev-09.png?alt=media\&token=2c917cdd-a6be-4625-baa9-870d53c2990d)

最後記得將右上角 developing 切換為 publish，才能正式啟用唷！

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-MfbVgAeJqx2QvAkJy1G%2F-MfbXRpgXKT7-j5dT6yJ%2Fdev-12.png?alt=media\&token=df614110-e5d2-4b8b-9e9c-8b60a8b64f7d)

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-MfbXYXBMQ3JRyEtUSoZ%2F-MfbXdUUPHhQsg5rHVzQ%2Fdev-13.png?alt=media\&token=f87973ee-dc4c-49fc-a48a-67b18eb60e68)

## 步驟二：完成系統內 Line Liff 串接

1.請於 LIFF applications 複製 LIFF ID 字串

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5EnsQg6oRZxW7mZpK%2F-Mg5ExZ7bxDOA6NEawvI%2Fdev-12.png?alt=media\&token=8b1c1afb-f4b9-41d3-a267-392858024f6e)

2\. 登入系統，服務串接設定，點選 LINE Liff 進入完成綁定。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5EnsQg6oRZxW7mZpK%2F-Mg5FVrBfo6YirFkxykx%2F%E6%88%AA%E5%9C%96%202021-08-02%20%E4%B8%8B%E5%8D%885.45.43.png?alt=media\&token=8fac9e75-1d31-4c71-807e-44d726368c8b)

綁定內容如下：

* LIFF ID: 請貼上 LIFF ID 字串
* Endpoint URL: 唯讀，無需輸入。
* 綁定呼籲詞: 請輸入手機，在 Line 中領取會員限定好禮
* 綁定按鈕文字：會員綁定
* 綁定感謝詞：感謝您完成綁定，官網輸入#12345，現折xxx元！
* 感謝按鈕文字：完成綁定

**完成綁定後，LINE 會員綁定 畫面顯示範例如下**

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5EnsQg6oRZxW7mZpK%2F-Mg5FjzmtzvjAY67PCQT%2Fdev-15.png?alt=media\&token=34ba8597-3d24-4563-8149-b68d9df32eff)

## 步驟三：至 [LINE Official Account](https://account.line.biz/login) 後台設定 圖文選單 資訊

登入 [LINE official account ](https://account.line.biz/login)後台，點選 左側的 聊天室相關中的 **圖文選單**。點選「建立」 開始設定。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5EnsQg6oRZxW7mZpK%2F-Mg5G-GczXJU71iv3tHK%2Foff-01.png?alt=media\&token=c62df541-dc32-4d72-ab1e-6676073693db)

{% hint style="info" %}
若本身已有內建圖文選單，可直接編輯新增一區塊放入 會員綁定內容。
{% endhint %}

### 顯示設定

* 標題：品牌名稱 會員專區
* 使用期間：即日起～2030/12/31 （建議拉長時間，以免選單過期失效）
* 選單列顯示文字：選單。
* 預設顯示方式：**隱藏**。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5EnsQg6oRZxW7mZpK%2F-Mg5GDiRS8DCNRr8LSmv%2Foff-02.png?alt=media\&token=f2c8c852-2e12-4c8a-8133-4515dcc64240)

### 內容設定

1. 選擇版型：點選 **選擇版型**，建議可選擇 **小型-三格** 版型。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5EnsQg6oRZxW7mZpK%2F-Mg5GLh6WjgZrqeSMu0v%2Foff-3.png?alt=media\&token=d53dd650-9003-4fb8-b07b-31c61003bfa4)

2\. 上傳背景圖片：依據設計規範製作素材後，將圖片上傳。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-MfbYNPUBEGRKe5OXQTj%2F-MfbZ6aAeTY3Ivy1HvlQ%2Foff-2-1.png?alt=media\&token=9d466e43-4af5-44f6-8536-4cb119aa4f7a)

{% hint style="info" %}
❗ 素材製作，可參考 設計規範，下載尺寸範例製作，或參考[LINE 官方說明製作素材](https://tw.linebiz.com/manual/line-official-account/oa-manager-richmenu/)。
{% endhint %}

### A區塊動作設定

* 類型：選擇連結
* URL：請輸入 官網連結&#x20;
* 動作標籤：&#x20;

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5GVJwjNL2JWGYojY5%2F-Mg5GlEx0jIvHuSFKGq2%2Foff-05.png?alt=media\&token=a9b60dd6-891f-407a-b00d-06e58d672493)

進入B 區塊 設定前，請至 LIFF applications 複製 LIFF URL 字串

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5GVJwjNL2JWGYojY5%2F-Mg5GslM7-f21RANynsi%2Foff-08.png?alt=media\&token=de8612d4-8e5a-4620-a1ef-3891d3ab340a)

### B區塊 動作設定

* 類型：選擇連結
* URL：請輸入 LIFF URL (範例: [https://liff.line.me/1656251382-yNwAXOBZ](https://developers.line.biz/console/channel/1656251382/liff/1656251382-yNwAXOBZ))&#x20;
* 動作標籤：會員綁定

> 詳細操作步驟可見 [官方 LINE 圖文選單操作說明](https://tw.linebiz.com/manual/line-official-account/oa-manager-richmenu/)&#x20;

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5GVJwjNL2JWGYojY5%2F-Mg5GzqmoaOqsAm0yE0u%2Foff-06.png?alt=media\&token=6718ab88-1f63-45a4-96a3-bf4493fae311)

### C區塊 動作設定&#x20;

* 類型：選擇 文字
* 動作標籤：與我聯繫

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5GVJwjNL2JWGYojY5%2F-Mg5H72oBCUeaZiF1fo0%2Foff-07.png?alt=media\&token=d4728165-c366-4843-be8d-dd3d30c0fbc4)

點選「儲存」，即可完成圖文選單設定。

**完成上述三步驟綁定後，可進入LINE官方帳號，點選圖文選單，查看綁定內容。**

**點選圖文選單後，即顯示以下認證畫面。**

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-Mg5GVJwjNL2JWGYojY5%2F-Mg5HMiBJd7unAa96q_a%2Fline-1.png?alt=media\&token=07289361-ff5d-4840-87fd-1c8da928850f)

點選許可後，進入會員綁定畫面。

![](https://3258264420-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LY0nVXuhNQwesGkjBmN%2F-MfbYNPUBEGRKe5OXQTj%2F-MfbZYssRdHVQ7BIep7t%2Fdev-15.png?alt=media\&token=d9a95a49-beee-400c-b0d6-7b0b3daaaa84)
