安裝於 SHOPLINE 內

於 FIRST LINE 新增聊天插件

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

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

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

於 SHOPLINE 貼上代碼

登入 SHOPLINE 管理頁面

前往 https://sso.shoplineapp.com/users/sign_in 頁面，並登入你的商店管理。

貼上 GTM 代碼

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

於 GTM 新增代碼

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

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

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

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

<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

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

儲存收工！

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