> 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.md).

# 網站彈窗工具

下面將介紹如何設定彈窗＆將彈窗安裝至電商官網：

* [設定彈窗樣式](#she-ding-dan-chuang-yang-shi)
* [彈窗安裝前置作業](/besparks-crm-gong-neng-mo-zu-shuo-ming/popup/popup-before-setup.md)
* [將彈窗安裝到官網上](/besparks-crm-gong-neng-mo-zu-shuo-ming/popup/popup-setup.md)

## 設定彈窗樣式

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

**Step 1. 新增URL（必填）**\
輸入彈窗導流的網址，格式請務必使用<mark style="color:orange;">**https\://**</mark>作為網址開頭，以免網站導流出現錯誤

**Step 2. 設定彈窗出現概率**\
設定彈窗出現在官網的頻率（關掉彈窗後，彈窗再次出現的時間）

**Step 3. 上傳彈窗圖片**\
圖片可接受的檔案格式為jpg、png（圖片尺寸不限，檔案大小上限為<mark style="color:orange;">**500KB**</mark>）

**Step 4. 設定彈窗背景顏色**\
設定彈窗想要的背景顏色，也可參照下圖設定成透明背景（色票代碼：#ffffff00）

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

**Step 5. 設定彈窗在網頁上的位置**\
設定彈窗出現在網頁的位置，系統預設彈窗出現位置在網頁左下方

**Step 6. 透過預覽彈窗確認樣式設定**\
上述彈窗設定完成後，可透過預覽視窗確認彈窗樣式是否符合預期。若想要保存這次的彈窗設定，可以點選右上角「儲存」按鍵。

{% hint style="info" %}
點選「儲存」按鈕可以保存當前的彈窗設定，以便日後微調彈窗設定時不必重新上傳圖片、URL等。若未保存當前設定，也不會影響彈窗安裝到官網上的效果。
{% endhint %}

**Step 7. 複製程式碼**\
若確認彈窗樣式已設定完成，即點選最下方的「複製程式碼」按鈕，前往Google Tag Management安裝設定好樣式的彈窗。若您從未使用過Google Tag Management在將彈窗正式安裝到官網前，請務必參閱「[**彈窗安裝前置作業**](/besparks-crm-gong-neng-mo-zu-shuo-ming/popup/popup-before-setup.md)」，確保您的官網環境設定已完成。


---

# 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:

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

The question should be specific, self-contained, and written in natural language.
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.