> For the complete documentation index, see [llms.txt](https://docs.besparks.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.besparks.co/besparks-crm-gong-neng-mo-zu-shuo-ming/popup/popup-setup.md).
# 彈窗安裝到官網上
安裝本篇將逐步帶領您將設定好的彈窗插件設定到您的電商官網上
1. 完成SHOPLINE官網GTM設定後，登入[**GTM管理頁面**](https://tagmanager.google.com/)
2. 點擊「新增代碼」
3. 設定代碼名稱（例如：官網彈窗插件）
4. 點擊「代碼設定」
5. 請於右側彈窗的選項中，選擇下方的「自訂HTML」
6. 複製BeSparks CRM 「網站彈窗」的程式碼，貼到到HTML的欄位中
7. 點擊下方的「觸發條件」，出現右側彈窗後，選擇「All Pages」
8. 點選右上方「儲存」
9. 點選左側列表中的「代碼」，選擇新建立好的彈窗。若想要預覽彈窗在官網上的樣式，點選右上角「預覽」（綠色箭頭），即可模擬彈窗在官網上顯示的情況。
10. 若確認彈窗樣式沒問題，點選右上角「提交」（橘色箭頭），右側滑入「提交變更」視窗，選擇「發布」。
11. 提交過程中，若遇到網頁詢問「容器版本說明」，可點選「略過」
12. 大功告成！之後只要等待15分鐘，即可至官網看到彈窗效果。
13. 若未來需更改彈窗樣式，可至左側清單中點選「代碼」即可看到已儲存的彈窗代碼。您可選擇直接覆蓋現有彈窗的程式碼（在BeSparks CRM中設置好彈窗樣式後，複製程式碼，重複此篇文章步驟6-12即可），或跟著此篇文章重頭新增一個代碼。
{% hint style="info" %}
請注意：若您希望保存過去設定的彈窗，但在官網上套用新的彈窗設定，請參照以下步驟：\
1\. 前往GTM>工作區>代碼 \
2\. 點選列表中要換掉的彈窗代碼\
3\. 點選右上角「暫停」，將彈窗代碼的狀態轉為「暫停」\
4\. 參照此篇文章再次新增彈窗代碼即可
{% endhint %}
