> 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. 點擊「新增代碼」

<figure><img src="/files/zryaF0uO5JEJE6lyRHFg" alt=""><figcaption></figcaption></figure>

3. 設定代碼名稱（例如：官網彈窗插件）
4. 點擊「代碼設定」

<figure><img src="/files/4hQle9fmkfXMserzLU9j" alt=""><figcaption></figcaption></figure>

5. 請於右側彈窗的選項中，選擇下方的「自訂HTML」

<figure><img src="/files/2ynTXqpRyYAOIOKlMiDi" alt=""><figcaption></figcaption></figure>

6. 複製BeSparks CRM 「網站彈窗」的程式碼，貼到到HTML的欄位中

<figure><img src="/files/fJrPfKs8hk8AbDlDt2rw" alt=""><figcaption></figcaption></figure>

7. 點擊下方的「觸發條件」，出現右側彈窗後，選擇「All Pages」

<figure><img src="/files/YSg3mYiOSGXwAnf7IUHI" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/9Fi6ZUViK2HZLSyzSA15" alt=""><figcaption></figcaption></figure>

8. 點選右上方「儲存」

<figure><img src="/files/OTSPOuwRvvpy8vphE3fp" alt=""><figcaption></figcaption></figure>

9. 點選左側列表中的「代碼」，選擇新建立好的彈窗。若想要預覽彈窗在官網上的樣式，點選右上角「預覽」（綠色箭頭），即可模擬彈窗在官網上顯示的情況。

<figure><img src="/files/5ttZxVSKNEBTe6mbIufA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/hHWgGNACg0O9wk6jiKiC" alt=""><figcaption></figcaption></figure>

10. 若確認彈窗樣式沒問題，點選右上角「提交」（橘色箭頭），右側滑入「提交變更」視窗，選擇「發布」。

<figure><img src="/files/5ttZxVSKNEBTe6mbIufA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Az8DqbdP6aW4dBBxuRYS" alt=""><figcaption></figcaption></figure>

11. 提交過程中，若遇到網頁詢問「容器版本說明」，可點選「略過」

<figure><img src="/files/QEoq1EP5wr621X2oAeCg" alt=""><figcaption></figcaption></figure>

12. 大功告成！之後只要等待15分鐘，即可至官網看到彈窗效果。

<figure><img src="/files/7WnnEDvXlcprfmIFJv3e" alt=""><figcaption></figcaption></figure>

13. 若未來需更改彈窗樣式，可至左側清單中點選「代碼」即可看到已儲存的彈窗代碼。您可選擇直接覆蓋現有彈窗的程式碼（在BeSparks CRM中設置好彈窗樣式後，複製程式碼，重複此篇文章步驟6-12即可），或跟著此篇文章重頭新增一個代碼。

{% hint style="info" %}
請注意：若您希望保存過去設定的彈窗，但在官網上套用新的彈窗設定，請參照以下步驟：\
1\.  前往GTM>工作區>代碼 \
2\. 點選列表中要換掉的彈窗代碼\
3\. 點選右上角「暫停」，將彈窗代碼的狀態轉為「暫停」\
4\. 參照此篇文章再次新增彈窗代碼即可
{% endhint %}

<figure><img src="/files/Vgjs85qV6vrHMPw1SHjR" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.besparks.co/besparks-crm-gong-neng-mo-zu-shuo-ming/popup/popup-setup.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
