文件

JavaScript 小工具

只要一個簡單的指令碼標籤，就能將聊天小工具加入任何網站。

JavaScript 小工具是將代理程式加入任何網站最簡單的方式。只要一個指令碼標籤，就能建立一個浮動聊天氣泡，訪客點選即可開始對話。

快速設定

  1. 前往你代理程式的發布分頁
  2. 選擇聊天小工具（預設）
  3. 複製顯示的 JavaScript 程式碼片段
  4. 貼到你網站中 </body> 之前的位置
  5. 儲存並重新整理你的網站

聊天氣泡會出現在頁面的角落。程式碼片段中已包含你專屬的代理程式 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 your embed code from Chatbot > Publish 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. 小工具會立即消失

後續步驟