# 安裝於 SHOPLINE 內

## 於 FIRST LINE 新增聊天插件

<div align="left"><img src="/files/Pn57l1KVS3Ff7bV4hsLj" alt=""></div>

透過左側選單，於「管道」⇒「即時聊天」內新增一插件，並依序設定相關資料，如橫幅標題、簡短介紹等。

這邊需注意的是，「允許的網域」設定請輸入來自 SHOPLINE 目前你商店網域，如 xxxx.shopline.com。

![](/files/-MjiPQHYFmAQZHdaMygi)

當設定並新增完畢後，於「嵌入代碼」頁面複製代碼，稍後將於 SHOPLINE 貼上，將即時聊天嵌入。

## 於 SHOPLINE 貼上代碼

### 登入 SHOPLINE 管理頁面

前往 [ ](https://admin.shoplineapp.com/admin/ygj51197368/setup_guide)<https://sso.shoplineapp.com/users/sign_in> 頁面，並登入你的商店管理。

### 貼上 GTM 代碼

點選左側「網店行銷與追蹤」⇒ 「追蹤設定」後，再點選取「Google 代碼管理工具」按鈕，貼上 GTM 代碼，也可同時參考 SHOPLINE 官方教學文件 <https://blog.shopline.tw/how-to-use-gtm/> 。

![](/files/ZX5oKMFIXpyZ29uABMpO)

![](/files/91EcrJ7Ubnq8LpwtfSBh)

### 於 GTM 新增代碼

前往 Google 代碼管理工具（GTM），點擊「新增代碼」 。

![](/files/XFTqCdgzYlwtG7GQC9Gu)

輸入Tag name（代碼名稱）後，並點擊「代碼設定」中的鉛筆圖示進行相關設定。

![](/files/ZAirHdhYZ7gWlXDVdnc9)

類型選擇「自訂 HTML」，觸發條件選擇「All Pages 網頁瀏覽」。

而接著需要將 FIRST LINE 嵌入代碼複製貼上於 HTML 輸入框，此部分因 GTM 會驗證 HTML 的標準，所以需調整嵌入代碼以符合規範，步驟如下：

1. 將代碼中 `<iframe-app></iframe-app>`  段落移除。
2. 在 `<div id="firstline-livechat-app"></div>` 後方補上代碼，代碼如下 \
   `<script> (function() { var wrapper = document.getElementById('firstline-livechat-app'); var el = document.createElement('iframe-app'); wrapper.appendChild(el); })(); </script>`

最後實際嵌入代碼範例將會類似如下：

```html
<div id="firstline-livechat-app"></div>

<script> (function() { 
var wrapper = document.getElementById('firstline-livechat-app'); 
var el = document.createElement('iframe-app'); 
wrapper.appendChild(el); })(); 
</script> 

<script src="https://xxxxxxxxxxx.01.firstline.cc/livechat.15a3cd37-162a-451d-a304-255b08c15d02.js?t=1639720034"></script>j
```

![](/files/alhFW2WPw0PgrUUDv0EO)

最後，按下「提交」按鈕，依序輸入版本名稱、說明等資訊，最後按下 「發布」即可。

![](/files/VB8CUVxfOhOxG4jq8WaD)

### 儲存收工！

現在你可以點擊預覽視窗開啟你的商店，開始用即時聊天跟顧客溝通了！

![](/files/oxwgaw8fbQPO2KMdmpGh)


---

# 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/an-zhuang-wu-shopline-nei.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.