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

# 安裝於 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)