# 安裝於 SHOPLINE 內

## 於 FIRST LINE 新增聊天插件

<div align="left"><img src="https://842546780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2F497ehAcX671smrdx61Us%2Fimage.png?alt=media&#x26;token=41240112-273e-41f4-bdeb-45cdb7753f32" alt=""></div>

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

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

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNRu7dk70ei7JV9HlW9%2F-MjiOOe2mywSebERlI2J%2F-MjiPQHYFmAQZHdaMygi%2Fimage.png?alt=media\&token=73e7ed71-dc5c-4598-bda0-252380e1fb96)

當設定並新增完畢後，於「嵌入代碼」頁面複製代碼，稍後將於 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/> 。

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2FRVapUIQWTJ9Az1EtMndn%2F%E6%88%AA%E5%9C%96%202021-12-21%2013.59.44.png?alt=media\&token=88375f53-1d76-4e13-9b4a-9d2e1899b602)

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2F6IX3Y3KBkGaZgDsISRpw%2F%E6%88%AA%E5%9C%96%202021-12-21%2014.08.16.png?alt=media\&token=0bba7b42-3a0a-4810-b450-323f2fbf7584)

### 於 GTM 新增代碼

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

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2Fr0l3Bar45YDVFuw494vv%2F%E6%88%AA%E5%9C%96%202021-12-21%2014.15.10.png?alt=media\&token=7f669518-b502-472c-816f-0671be0368c2)

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

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2FcDk3ogI5j53Y6t1g976y%2F%E6%88%AA%E5%9C%96%202021-12-21%2014.17.59.png?alt=media\&token=13adc3bf-8525-4b98-838f-ffd867b3587d)

類型選擇「自訂 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
```

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2FZotD8kapOoviX47Hekmx%2F%E6%88%AA%E5%9C%96%202021-12-21%2014.18.19.png?alt=media\&token=739a46f3-1dff-4123-8693-1174a710bf5b)

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

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2F8PXGIEUSRWJKiJ08WJP7%2F%E6%88%AA%E5%9C%96%202021-12-21%2014.29.59.png?alt=media\&token=347d95ad-969c-47ad-9e82-ad21b181d7e9)

### 儲存收工！

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

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2Fd6sD175uGdLAskAivkf3%2F%E6%88%AA%E5%9C%96%202021-12-21%2014.44.55.png?alt=media\&token=9dad27a6-8a05-4e1e-a472-4b78fe31ef58)