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

# 網站彈窗工具

工具Bespark CRM 提供彈窗插件程式碼，電商商家可透過GTM將插件安裝在網站中

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

* [設定彈窗樣式](#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="https://3524200855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FirnHqyGtn9Uf1ztHiV4v%2Fuploads%2FFobqLKM6MOY5gBKRLXTW%2FPopUp_introduction.png?alt=media&amp;token=44ebd0e8-b526-41ff-8c9e-0e44f5c8a060" 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="https://3524200855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FirnHqyGtn9Uf1ztHiV4v%2Fuploads%2FLGfkecPtpt3sxvHeC5ob%2F%E6%88%AA%E5%9C%96%202024-11-07%20%E4%B8%8B%E5%8D%884.05.55.png?alt=media&amp;token=2206e2f4-022e-4a6e-a372-3e4c8e57d06b" 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)」，確保您的官網環境設定已完成。