> For the complete documentation index, see [llms.txt](https://help.firstline.cc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.firstline.cc/feature/channels/live-chat/an-zhuang-fan-li/liff.md).
# 嵌入至 LINE 內服務客戶
## 1. 新增即時聊天
首先，我們需要先建立「即時聊天」管道，透過新增的「即時聊天」嵌入於 LINE 中服務客戶，你可以於設定頁面依據企業性質，輸入「描述」、「問候語」、配色 ...等設定，打造企業形象。
當資料設定完成，按下「儲存」新增後，點擊「嵌入代碼」頁籤，移動至下方的「**啟用外部網址**」設定。
進行以下操作\
1\. 開啟「啟用外部網址」。\
2.複製下方連結網址，稍後將於第二步驟於 LINE 使用到。
## 2. 建立 LIFF 連結
LIFF 全名是「LINE Front-end Framework」，是由 LINE 官方所提供的 Web App 平台，可以透過此方式取得 LINE 使用者相關資訊，藉此可以呈現出各式各樣的應用。
### 新增 LINE Logon
首先，先登入 [LINE Developers](https://developers.line.biz/zh-hant/) 建立相關資訊，選擇指定的 Provider，並按下「Create a new channel」新增 Channel。
Channel 共有 5 種形式供選擇，因我們需要使用 LIFF 的功能，所以選擇「LINE Login」方式。
### 填寫表單
接著依據必填項目填寫 Channel 表單，其中，在「App types」的那項選擇「Web app」，填寫完畢後按下「Create」新增。
### 設定 LIFF
當新增完畢後，就會看見「LIFF」的頁籤項目。點擊「Add」就可以進行新增 LIFF。
接著，將解說幾個設定項目
#### Size
Size 共有三個值，分別為 Full、Tall、Compact。表示當用戶打開 LIFF 時，顯示的彈出高度設定。依據官方文件說明，高度顯示如下：
#### Endpoint URL
指當 LINE 用戶點擊了 LIFF 連結，開啟的特定網址。假如這邊填寫的是[**https://firstline.cc**](https://firstline.cc) 網址，那當用戶打開 LIFF 網址後，顯示就是 FIRST LINE 的首頁。
而我們在這邊要輸入的就是第一章「[即時聊天](/feature/channels/live-chat/an-zhuang-fan-li/liff.md#new-live-chat)」步驟「外部網址」\
`https://xxxxxx.01.firstline.cc/livechat/messenger/1`
#### Scopes
此項目代表我們需要拿取來自 LINE 的哪些資料，基本將全部項目勾選，已方便配合未來新增功能。
* openid：取得用戶的 token。
* profile：取得用戶個人資訊，名稱、狀態等。
* chat\_message.write：是否能使用主動幫使用者發訊息的`sendMessages` 功能。
#### Bot link feature
當用戶首次登入建立的 LIFF 時，是否顯示加入官方帳號為好友的頁面，並如何顯示，這邊依據你的企業性質選擇即可。
* normal：是否同意頁面顯示加入好友選項
* aggressive：另開頁面顯示加入好友分頁
* off：不顯示加入好友選項
### 完成 LIFF
新增好 LIFF 後，即可從列表查看到新增完成的資訊，這邊我們需要將 LIFF ID 貼回至「即時聊天」中「LIFF ID」欄位儲存即完成。
而旁邊的 LIFF URL，就是分享給客戶使用的網址，當客戶 LINE 上點擊網址時，就會啟動即時聊天，客戶就能與專員展開對話。
## 3. 🎉 開始服務客戶
當取得 LIFF 連結後，可以透過一些方式告知客戶使用，您可以透過「分眾訊息」、「自動回應」、「Rich Menu」新增「聯絡客服」按鈕等方式分享。
往後，客戶只要點選 LIFF 連結，就可以隨時看到訊息內容，也能隨時與專人聯繫。
{% hint style="info" %}
注意：透過 LIFF 所進線的交談對話，實際使用的社群媒體為「即時聊天」，因此交談對話的顧客名稱應為「訪客」，而不會是 LINE 使用者名稱。
{% endhint %}
