氣泡小工具

將 AI Agent 以氣泡小工具方式嵌入您的企業網站。用戶只需點擊氣泡圖示，即可開啟對話視窗，享受線上客服、售前諮詢與潛在客戶開發等服務。

如何整合至網站

前往 Agent-Integration-Widget Bubble，複製「整合代碼」。
將代碼貼入您網站 HTML 頁面的 <head> 區塊。
發佈網站後，即完成 AI Agent 嵌入並可立即與用戶互動。
若需自訂 UI、LOGO、控制訊息頻率或顯示主動訊息來提升互動率，可進階設定。

客製化 UI

您可自訂氣泡小工具的大小、位置、顏色、圖示、LOGO 及名稱等外觀與資訊。

小工具暱稱：可修改顯示名稱。
小工具說明：可自訂描述文字。
主題設定：支援更換主題色、氣泡圖示及 AI Agent 形象。
氣泡自訂：彈性調整出現位置及大小，配合企業品牌需求。
聊天視窗自訂：調整視窗寬高以配合不同裝置顯示（建議勿設過大，維持行動相容性）。
Agent LOGO 提供以下選項：
- 平台 LOGO：顯示 GPTBots 官方標誌。
- 組織 LOGO：顯示於此處上傳的企業 LOGO，適用同組織下所有 Agent。
- 自訂 LOGO：每個 Agent 均可上傳個性化 LOGO（需聯絡業務開通進階權限）。
- 無 LOGO：對話視窗將不顯示任何 LOGO。

主動訊息

主動訊息可作為卡片或提示訊息主動吸引用戶，並引導他們進入聊天或完成名單蒐集。常見類型有「提示訊息」與「卡片訊息」。

如何設置提示訊息

您可以輕鬆設定吸引用戶注意的提示訊息：

訊息內容：最多可設定 3 組，啟用後將由頁面底部動態往上顯示。
顯示規則：最多可設 3 個觸發條件，用來控制哪些情境下顯示主動訊息。
- 觸發條件可依瀏覽器、語言、時區、地區、作業系統、UTM 來源等。
- 表達式支援 =、≠、範圍、包含、不包含、有值、無值等。
- 支援 AND/OR 條件組合。
- 可設定立即或延遲 N 秒後觸發。
訊息顯示頻率控制：避免干擾用戶，可設定在網站/頁面上每「日/週/月」最多出現幾次。

如何設置卡片訊息

配置方式與提示訊息相同，並可額外添加：

圖片上傳：支援自訂圖片，請控制檔案大小以減少加載時間。
標題/文字內容：可自由編輯，提升吸睛度與訊息傳達。

啟用主動訊息

在主動訊息列表中選擇欲啟用的訊息並點擊啟用。
於網站頁面查看主動訊息展現效果。
用戶點擊主動訊息可直接開啟聊天視窗。

安全性與頻率管理

網域白名單：設定允許嵌入「氣泡小工具整合代碼」的網域，未啟用即無限制。
點數消耗限制：可限制氣泡小工具每日/每週/每月的總點數消耗（最多三條規則）。
用戶點數限制：針對每位用戶單日/單週/單月的點數上限做管理。
用戶訊息頻率限制：設定單位時間內每位用戶可發送訊息數（超過時自動暫停回應，回覆預設提示）。
- 以上每一項均可彈性設定、停用即不設限。

事件回呼

如何將用戶行為事件傳輸至 GA4 或第三方系統

於 GA4 創建回呼事件，取得 Measurement Protocol API Secret 與 Measurement ID。
於 Webhook 建立回呼事件，依需求設定回傳網址與權杖。
於事件回呼列表啟用相應功能，並於 GA4 或指定 Webhook 介面確認數據紀錄與分析成效。

事件回呼資料格式請參考下方範例：

{ "client_id": "", // 優先用 GA4 gtag 方法取得，否則 GPTBots 自行產生 "user_id": "", // 開發者自訂設置，預設為 null "event_name": "Show widget bubble", // 事件名稱 "event_params": { "key1": "abc", // 屬性名稱與屬性值（字串） "key2": 123 // 屬性名稱與屬性值（數字） } }

                      
                      {
  "client_id": "",  // 優先用 GA4 gtag 方法取得，否則 GPTBots 自行產生
  "user_id": "",    // 開發者自訂設置，預設為 null
  "event_name": "Show widget bubble",     // 事件名稱
  "event_params": {  
    "key1": "abc",  // 屬性名稱與屬性值（字串）
    "key2": 123     // 屬性名稱與屬性值（數字）
  }
}

此代碼塊在浮窗中顯示

更多細節可點選各平台官方文件說明。

進階用法

設定使用者 ID

window.ChatBot.setUserId("your_user_id")

                      
                      window.ChatBot.setUserId("your_user_id")

此代碼塊在浮窗中顯示

設定使用者 Email

當用戶需要人工服務時，可省略填寫 Email 的步驟：

window.ChatBot.setEmail("somebody@mail.com")

                      
                      window.ChatBot.setEmail("somebody@mail.com")

此代碼塊在浮窗中顯示

設定自訂變數

只於本次對話中有效，使 Agent 能根據變數動態調整邏輯回應：

window.ChatBot.setCustomVariables({"var_key1": "value1", "var_key2": "value2"})

                      
                      window.ChatBot.setCustomVariables({"var_key1": "value1", "var_key2": "value2"})

此代碼塊在浮窗中顯示

自動顯示聊天視窗

使用 onload 事件讓尚未點擊氣泡時主動顯示對話：

                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js" onload="ChatBot.show()"></script>

此代碼塊在浮窗中顯示

跳過預設狀態

讓用戶第一時間看到歡迎訊息與預設問題：

                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js?skipWelcome=1"></script>

此代碼塊在浮窗中顯示

Shopify 嵌入操作指引

複製氣泡小工具嵌入代碼。
前往 Shopify 商店後台 > 搜尋並點選「線上商店」 > 進入「自訂主題」 > 點選「編輯原始碼」。
找到「theme.liquid」檔，於 <head> 區塊貼上嵌入碼，點選保存。
完成後，氣泡小工具即會於商店頁面右下角顯示，用戶可即時提問諮詢。

如需更多幫助，歡迎查閱本頁 FAQ 或聯絡 GPTBots 技術支援。