文件

JavaScript 小工具

使用「頻道」中產生的完整程式碼，將聊天小工具加入網站。

JavaScript 小工具會在網站上加入浮動聊天氣泡。產生的嵌入程式碼包含兩個指令碼標籤；請從代理程式的「頻道」分頁完整複製。

快速設定

  1. 開啟代理程式的頻道 → 網站嵌入頁面
  2. 選擇聊天視窗並啟用該頻道
  3. 複製完整的產生程式碼，包含兩個指令碼標籤
  4. 貼到你網站中 </body> 之前的位置
  5. 儲存並重新整理你的網站

第一個標籤會建立 Agentkit 指令佇列。第二個標籤會以代理程式 ID 和設定好的指令碼網址載入小工具。請保留兩個標籤及其原有數值。

小工具設定

位置

小工具預設顯示在右下角。你可以在設計設定中變更位置。

顏色

小工具的顏色會跟隨代理程式的主題設定。可在設計分頁中自訂。

行動裝置

小工具完全支援響應式設計，在行動裝置上會自動正常運作。

檔案附件

訪客可以直接透過小工具附加文件、試算表、圖片與文字檔案。附件僅作為暫時的對話內容使用，不會加入代理程式的訓練來源。

支援上傳的格式包括 PDF、Word、Excel、HTML、TXT、Markdown、JSON、CSV、PNG、JPG、WEBP 與 GIF。訪客每則訊息最多可附加 3 個檔案，每個檔案上限為 10MB。PDF 只會解析前 20 頁，以確保回應速度與穩定性。

資料屬性

小工具透過資料屬性進行設定：

屬性說明預設值
data-chatbot必填。你代理程式的 ID（已包含在嵌入程式碼中）-

放置位置

程式碼該放在哪裡

請將兩個產生的指令碼標籤貼在 </body> 之前：

<!DOCTYPE html>
<html>
<head>
  <!-- Your head content -->
</head>
<body>
  <!-- Your website content -->

  <!-- Paste both script tags from Channels > Website embed here -->
</body>
</html>

單頁應用程式

若是 SPA，請將完整的產生程式碼加入主要 HTML 範本或 index 檔案。

多個頁面

在每個要顯示小工具的頁面加入相同的產生程式碼，或放進共用的版面範本。

測試你的安裝

加入程式碼後：

  1. 在瀏覽器中造訪你的網站
  2. 尋找聊天氣泡（預設位於右下角）
  3. 點選開啟聊天視窗
  4. 傳送一則測試訊息
  5. 確認回覆內容正確無誤

疑難排解

小工具沒有出現：

  • 檢查實際呈現的網頁原始碼，確認兩個產生的指令碼標籤都位於 </body> 之前
  • 確認代理程式 ID 正確無誤
  • 清除瀏覽器快取
  • 檢查瀏覽器主控台是否有錯誤訊息

位置錯誤：

  • 檢查設計設定
  • 找出是否有 CSS 衝突

沒有回應：

  • 確認已有訓練內容
  • 檢查方案的訊息額度
  • 先在 Playground 中測試

網域限制

若你已設定允許的網域：

  • 小工具只會在核准的網域上載入
  • 其他網站不會顯示小工具（也不會出現錯誤訊息）

設定網域 →

效能

小工具經過最佳化，將影響降到最低：

  • 非同步載入（async 屬性）
  • 體積小巧的 bundle
  • 不會阻塞畫面渲染
  • 延遲載入聊天介面

樣式衝突

小工具使用獨立的樣式，理論上不會與你的網站發生衝突。若仍發現問題：

  1. 檢查是否有全域 CSS 選擇器
  2. 找出是否有 !important 規則
  3. 若問題持續發生，請聯絡支援團隊

移除小工具

若要移除：

  1. 從 HTML 中移除兩個產生的指令碼標籤
  2. 清除所有快取
  3. 小工具會立即消失

後續步驟