# 嵌入至 LINE 內服務客戶

## 1. 新增即時聊天 <a href="#new-live-chat" id="new-live-chat"></a>

首先，我們需要先建立「即時聊天」管道，透過新增的「即時聊天」嵌入於 LINE 中服務客戶，你可以於設定頁面依據企業性質，輸入「描述」、「問候語」、配色 ...等設定，打造企業形象。

![](/files/-McsHLig8FxNG7wBmHNI)

當資料設定完成，按下「儲存」新增後，點擊「嵌入代碼」頁籤，移動至下方的「**啟用外部網址**」設定。

![](/files/-McsVspgq_wOCS6PYPhb)

&#x20;進行以下操作\
1\. 開啟「啟用外部網址」。\
2.複製下方連結網址，稍後將於第二步驟於 LINE 使用到。

## 2. 建立 LIFF 連結

LIFF 全名是「LINE Front-end Framework」，是由 LINE 官方所提供的 Web App 平台，可以透過此方式取得 LINE 使用者相關資訊，藉此可以呈現出各式各樣的應用。

### &#x20;新增 LINE Logon

首先，先登入 [LINE Developers](https://developers.line.biz/zh-hant/) 建立相關資訊，選擇指定的 Provider，並按下「Create a new channel」新增 Channel。

![](/files/-McsZvN0Px1jDh_teUn9)

Channel 共有 5 種形式供選擇，因我們需要使用 LIFF 的功能，所以選擇「LINE Login」方式。

![](/files/-Mcs_HGk6N4PSvaokldv)

### 填寫表單

接著依據必填項目填寫  Channel 表單，其中，在「App types」的那項選擇「Web app」，填寫完畢後按下「Create」新增。

![](/files/-Mcsb_wTrDn6BvbEAq8V)

### &#x20;設定 LIFF

當新增完畢後，就會看見「LIFF」的頁籤項目。點擊「Add」就可以進行新增 LIFF。

![](/files/-McscnE0YNMoxPambkhe)

接著，將解說幾個設定項目

![設定 LIFF 項目](/files/-Mcse1LpIrWDi-bZ6xWv)

#### Size

Size 共有三個值，分別為 Full、Tall、Compact。表示當用戶打開 LIFF 時，顯示的彈出高度設定。依據官方文件說明，高度顯示如下：

![](/files/-McseVdE0lU81R_Vx2ma)

#### 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` 功能。

![](/files/-McslQhtWGMuTApWUd7I)

#### Bot link feature

當用戶首次登入建立的 LIFF 時，是否顯示加入官方帳號為好友的頁面，並如何顯示，這邊依據你的企業性質選擇即可。

* normal：是否同意頁面顯示加入好友選項
* aggressive：另開頁面顯示加入好友分頁
* off：不顯示加入好友選項

![](/files/-McsnS6DDob4-AXT9_XP)

### 完成 LIFF

新增好 LIFF 後，即可從列表查看到新增完成的資訊，這邊我們需要將 LIFF ID 貼回至「即時聊天」中「LIFF ID」欄位儲存即完成。

![複製 LIFF ID](/files/-Mcsq-dXMnjHPPr9p4_k)

![貼上位於「即時聊天」設定](/files/-Mcsr0adEEpA5ArVH5hZ)

而旁邊的 LIFF URL，就是分享給客戶使用的網址，當客戶 LINE 上點擊網址時，就會啟動即時聊天，客戶就能與專員展開對話。

## 3. 🎉 開始服務客戶

當取得 LIFF 連結後，可以透過一些方式告知客戶使用，您可以透過「分眾訊息」、「自動回應」、「Rich Menu」新增「聯絡客服」按鈕等方式分享。

![](/files/-Mcsx3u2eBH3lUGNIk1x)

往後，客戶只要點選 LIFF 連結，就可以隨時看到訊息內容，也能隨時與專人聯繫。

![enjoy it.](/files/-McvrwB8oQDYQvcUO754)

{% hint style="info" %}
注意：透過 LIFF 所進線的交談對話，實際使用的社群媒體為「即時聊天」，因此交談對話的顧客名稱應為「訪客」，而不會是 LINE 使用者名稱。
{% endhint %}

<figure><img src="/files/1j6m7DgKfcxV1wO2mB7S" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.firstline.cc/feature/channels/live-chat/an-zhuang-fan-li/liff.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
