iframe

使用 iframe 將 AI 智慧代理嵌入您的企業網站。當使用者造訪目標網頁時，Agent 聊天視窗將自動載入，提供線上客戶支援、售前諮詢及潛在客戶資料收集等服務。

如何整合至網站

前往 Agent-Integration-iframe，複製「整合程式碼」。
將程式碼貼到網站 HTML 頁面欲嵌入的位置。
發佈網站，即完成 AI 智慧代理嵌入並可立即開始對話。
若需自訂 UI 與 LOGO、控制使用者訊息頻率或顯示主動訊息以提升互動率，可進行進階設定。

自訂 UI

此功能支援自訂小工具氣泡的大小、位置、顏色、圖示、LOGO 及名稱。
網頁小工具自訂化介面

小工具暱稱：可自訂名稱。
小工具說明：可自訂描述資訊。
主題設定：可自訂主題色、氣泡圖示與 Agent 外觀。
氣泡自訂：可依據業務需求設定氣泡的顯示位置與大小。
對話視窗自訂：可依據業務需求設定聊天視窗的寬度與高度（為確保小螢幕相容性，建議勿設過大）。
Agent LOGO：
- 平台 LOGO：顯示 GPTBots 標誌。
- 組織 LOGO：顯示企業於這裡上傳的 LOGO，組織下所有 Agent 共用。
- 自訂 LOGO：顯示上傳的自訂 LOGO。每個 Agent 可使用不同 LOGO，需聯絡業務開通進階權限。
- 無 LOGO：聊天視窗不顯示任何 LOGO。

安全性與速率限制

網域白名單：定義「小工具氣泡整合程式碼」可嵌入的網域範圍。若未啟用則無限制。
點數消耗上限：定義「小工具氣泡」的總點數消耗上限。若未啟用則無限制。
- 最多可設定 3 組規則
- 支援「每日／每週／每月」總點數消耗上限
使用者消耗上限：定義每位使用者的點數消耗上限。若未啟用則無限制。
- 最多可設定 3 組規則
- 支援「每日／每週／每月」每位使用者的點數消耗上限
使用者速率限制：定義每位使用者的訊息發送頻率上限。若未啟用則無限制。
- 最多可設定 3 組規則
- 支援依「訊息數量／時間區間」設定每位使用者的訊息發送上限
- 超出限制時，Agent 將不再回應，並自動回覆預設訊息。

事件回呼

如何將小工具氣泡的使用者行為事件傳送至 GA4 或第三方系統

建立 GA4 回呼事件，於 GA4 專案取得 Measurement Protocol API Secret 與 Measurement ID，並填入設定欄位。
建立 Webhook 回呼事件，依頁面指示選擇所需事件，填寫 URL 與驗證資訊。
在事件回呼列表中啟用回呼，並於 GA4 或 Webhook 端檢查資料是否正常。資料成功存入後，即可進行使用者數據分析。

事件回呼資料格式

透過 Webhook 或 GA4 傳遞的小工具氣泡事件及屬性資料格式如下，請依需求解析與儲存：

{ "client_id": "", // 建議優先使用 GA4 gtag 方式取得，否則由 GPTBots 產生 "user_id": "", // 開發者設定的使用者 ID，未設定則為 null "event_name": "Show widget bubble", // 事件名稱 "event_params": { "key1": "abc", // 事件屬性名稱：屬性值（字串） "key2": 123 // 事件屬性名稱：屬性值（數字） } }

                      
                      {
  "client_id": "",  // 建議優先使用 GA4 gtag 方式取得，否則由 GPTBots 產生
  "user_id": "",    // 開發者設定的使用者 ID，未設定則為 null
  "event_name": "Show widget bubble",     // 事件名稱
  "event_params": {  
    "key1": "abc",  // 事件屬性名稱：屬性值（字串）
    "key2": 123     // 事件屬性名稱：屬性值（數字）
  }
}

此代碼塊在浮窗中顯示

進階用法

設定使用者 ID

方式一：嵌入 iframe 時於網址加上 ?user_id=your_user_id
注意：此功能支援 Agent 開發者設定使用者 ID
方式二：可用 JavaScript 動態設定

Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))

                      
                      Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))

此代碼塊在浮窗中顯示

設定使用者電子郵件

嵌入 iframe 時於網址加上 ?email=somebody@mail.com（建議統一用「電子郵件」）

若未設定電子郵件，使用者需於呼叫人工服務前手動填寫。

設定自訂變數

開發者可於 iframe 網址加上 ?var_key1=value1&var_key2=value2，設定本次對話有效的自訂變數，讓 Agent 回應更具動態邏輯。

如需更多 iframe 整合、聊天視窗嵌入、AI 客服等進階應用，歡迎參閱本頁說明或聯絡 GPTBots 技術支援。