Wix 聊天機器人整合教學：逐步安裝指南

Wix 內建聊天功能，但那只是一款需要真人在線上的基本即時客服工具。當沒有人在線時，訪客只會看到一份聯絡表單。如果有人在晚上 11 點瀏覽你的網站，正猶豫要不要預約你的服務或購買你的產品，這樣的體驗顯然不夠好。

以你的網站內容訓練而成的 AI 聊天機器人，能立即回答這些問題，完全不需要真人介入。本指南會介紹兩種將聊天機器人加入 Wix 的方法，帶你從頭到尾完成設定，並說明如何取得最佳成效。

Wix 內建聊天 vs. AI 聊天機器人

在開始安裝之前，值得先了解專屬的 AI 聊天機器人與 Wix 內建功能有何不同。

如果你想要真人即時對話，Wix Chat 能滿足需求。但大多數小型企業主無法整天守在線上。AI 聊天機器人能補上這段空缺，處理占訪客詢問大宗的重複性問題。

你也可以兩者並用：讓 AI 聊天機器人自動處理常見問題，Wix Chat 則保留給需要真人親自處理的情況。

開始之前你需要準備的東西

1. 一個在 Agentkit 上訓練好的聊天機器人。

免費註冊、建立一個聊天機器人，並用你的 Wix 網站內容訓練它。免費方案提供 1 個聊天機器人與每月 50 則訊息。

將你的 Wix 網站網址加入作為訓練來源，檢索工具會自動為你的頁面建立索引。接著針對最重要的主題（價格、營業時間、預約流程、退貨政策）新增問與答組合。

想了解詳細的訓練方式，請參閱如何用你的網站內容訓練聊天機器人。

2. 一個 Wix Premium 方案。

在 Wix 加入自訂程式碼需要 Premium 方案（任一等級皆可）。免費的 Wix 網站不支援自訂 HTML 嵌入或 Velo。

方法一：HTML 嵌入（建議）

這是最簡單的方法，適用於所有擁有 Premium 方案的 Wix 使用者。你會透過 Wix 編輯器中的 HTML 嵌入元素，加入聊天機器人的指令碼。

步驟 1：取得你的嵌入程式碼

在 Agentkit 儀表板中，前往你聊天機器人的**「設定」，接著點選「發布」**。你會看到兩種嵌入選項，若是 Wix，請使用 iframe 嵌入程式碼：

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

你也可以使用 JavaScript 小工具，但 Wix 的 HTML 嵌入元素處理 iframe 的穩定度比指令碼標籤更高。iframe 方式是 Wix 上建議採用的做法。

步驟 2：將 HTML 嵌入元素加到你的頁面

1. 開啟你網站的 Wix Editor。
2. 點選左側工具列中的**「新增」**按鈕（藍色的「+」圖示）。
3. 選擇**「嵌入程式碼」，接著選擇「嵌入 HTML」**。
4. 頁面上會出現一個 HTML 元素，點選它並選擇**「輸入程式碼」**。
5. 切換到**「程式碼」**分頁（不是網址分頁）。
6. 貼上步驟 1 取得的 iframe 程式碼。
7. 點選**「更新」**。
8. 調整元素大小與位置，決定聊天機器人在頁面上顯示的地方。

步驟 3：套用到整個網站（選用）

HTML 嵌入方法只會將聊天機器人加到單一頁面。如果你希望每個頁面都出現聊天機器人，有兩種做法：

選項 A：加到網站的頁首或頁尾。

1. 在 Wix 編輯器中，點選頁面的**「頁首」或「頁尾」**區塊。
2. 將 HTML 嵌入元素加到頁首或頁尾。
3. 由於頁首與頁尾會出現在所有頁面上，聊天機器人便會在全站顯示。

選項 B：使用 Wix App Market 的「自訂元素」功能。

1. 前往**「新增」，接著選擇「嵌入程式碼」，然後選擇「自訂元素」**。
2. 設定它在所有頁面載入你的聊天機器人指令碼。

對大多數使用者來說，選項 A 比較簡單。

步驟 4：發布並驗證

1. 點選 Wix 編輯器右上角的**「發布」**。
2. 造訪你的正式上線網站（而非編輯器預覽畫面）。
3. 確認聊天機器人有出現，並能回應測試訊息。
4. 在行動裝置上檢查版面是否正常。

方法二：Wix 的 Velo（適合開發者）

Velo 是 Wix 內建的開發平台。如果你熟悉 JavaScript，Velo 能讓你更精準地控制聊天機器人何時、如何載入。

何時該用 Velo

• 你希望聊天機器人依條件載入（例如僅限已登入會員，或僅在特定頁面顯示）。
• 你需要將動態資料傳給聊天機器人（例如訪客姓名或會員等級）。
• 你想以程式方式觸發聊天機器人的動作。

步驟 1：啟用 Velo

1. 在 Wix 編輯器中，點選頂端選單列的**「Dev Mode」**。
2. 點選**「開啟 Dev Mode」**。
3. 編輯器底部會出現程式碼面板。

步驟 2：透過頁面程式碼加入指令碼

1. 選取你想要顯示聊天機器人的頁面。
2. 在底部的程式碼面板中，你會看到該頁面對應的檔案（例如 Home.js）。
3. 加入以下程式碼，動態載入 Agentkit 小工具：

$w.onReady(function () {
  const script = document.createElement('script');
  script.src = 'https://cdn.agentkit.ai/widget.js';
  script.setAttribute('data-chatbot', 'your-chatbot-id');
  script.async = true;
  document.body.appendChild(script);
});

4. 儲存並發布。

步驟 3：透過 masterPage.js 套用到全站

若要在每個頁面都載入聊天機器人：

1. 在程式碼面板中，開啟 masterPage.js（此檔案會在所有頁面執行）。
2. 在 onReady 函式中加入相同的指令碼載入程式碼。
3. 儲存並發布。

條件式載入範例

如果你只想在特定頁面顯示聊天機器人：

// masterPage.js
import wixLocation from 'wix-location';

$w.onReady(function () {
  const path = wixLocation.path;
  const chatbotPages = ['services', 'pricing', 'contact', 'faq'];

  if (chatbotPages.some(page => path.includes(page))) {
    const script = document.createElement('script');
    script.src = 'https://cdn.agentkit.ai/widget.js';
    script.setAttribute('data-chatbot', 'your-chatbot-id');
    script.async = true;
    document.body.appendChild(script);
  }
});

這段程式碼只會在你的 Services、Pricing、Contact 與 FAQ 頁面載入聊天機器人。

比較 Wix 適用的聊天機器人選項

有多款聊天機器人工具都能搭配 Wix 使用，以下是主要選項的比較。

如果你想要以自己內容訓練、嵌入方式最有彈性的 AI 驅動聊天機器人，Agentkit 是最合適的選擇。如果你需要不使用 AI 的規則式流程建構工具，Joonbot 就是為此而生。如果你只需要基本的真人對真人聊天，Wix Chat 已經內含在你的方案中。

為你的 Wix 網站客製聊天機器人

聊天機器人上線後，在 Agentkit 儀表板中設定以下項目，能帶來更好的成效。

品牌色彩與位置

在你聊天機器人的**「設定」**中，自訂小工具外觀：

• 主色： 與你 Wix 網站的強調色一致。
• 位置： 右下角為預設值，適合大多數網站。如果你的 Wix 網站右下角有衝突的元素，可切換到左下角。
• 歡迎訊息： 撰寫具體反映你業務內容的文字。「哈囉！我可以回答關於我們服務、價格與預約空檔的問題」，會比「有什麼可以幫你的嗎？」更有效。

網域限制

將你的 Wix 網域加入允許的網域清單，包含你的自訂網域（例如 yourbusiness.com）與 Wix 預設網址（例如 yourbusiness.wixsite.com/yoursite）。網域限制可防止他人未經授權使用你的聊天機器人。

自訂指示

新增指示，形塑聊天機器人針對你這門生意的行為：

• 「如果有人詢問價格，一定要提到免費諮詢方案。」
• 「若被問到預約空檔，建議對方透過預約頁面預約。」
• 「絕不承諾具體的交件日期，請對方聯絡我們確認目前的時程。」
• 「如果遇到無法回答的問題，主動提出收集對方電子郵件，以便後續跟進。」

潛在客戶收集

啟用收集潛在客戶的動作，收集有意願訪客的電子郵件。對於以 Wix 建站的服務型企業來說，將訪客轉化為潛在客戶正是最主要的目標，這項功能格外有價值。

收集到的潛在客戶會顯示在你的 Agentkit 儀表板中，你可以透過 Zapier 將他們串接到你的電子郵件行銷工具或 CRM。詳情請見整合指南。

Wix 網站的訓練技巧

Wix 網站常使用視覺化版面、動畫與互動元素，這些可能會限制網頁檢索工具能擷取到的內容。以下是讓你的聊天機器人知識更完整的做法。

用問與答補足檢索內容

在以你的網址完成訓練後，先在 Playground 中測試聊天機器人。針對回答得不理想的問題，建立對應的問與答組合，提供理想的答案。常見該補強的主題包括：

上傳補充文件

如果你有 PDF、菜單、簡介手冊或服務型錄，可以將它們上傳為文件來源。這些內容能提供聊天機器人更詳細的資訊，即使你的網站上完全沒有這些內容也沒關係。

保持訓練內容最新

當你更新 Wix 網站時，記得重新訓練聊天機器人。在 Standard 方案（每月 $119.99）以上，自動重新訓練會自動完成這件事。若是 Free 或 Hobby 方案，請在內容有重大變更後，於 Agentkit 儀表板手動觸發重新訓練。

疑難排解

發布後聊天機器人沒有出現

• 檢查你的 Wix 方案。 自訂程式碼需要 Premium 方案。
• 查看正式上線的網站，而非編輯器。 Wix 編輯器的預覽畫面不一定會執行自訂指令碼。
• 清除瀏覽器快取，或改用無痕視窗。
• 檢查 HTML 嵌入程式碼。 確認你貼上的是完整的 iframe 或指令碼標籤，沒有多餘字元。

HTML 嵌入元素顯示一片空白

• 加大 HTML 嵌入元素的高度，預設尺寸可能太小，無法顯示聊天介面。
• 確認 iframe 的 src 網址正確，且包含你的聊天機器人 ID。
• 檢查瀏覽器主控台（F12），確認是否有內容遭封鎖的錯誤訊息。

聊天機器人在桌機正常，但手機上不行

Wix 會自動處理響應式設計，但 HTML 嵌入元素有時仍需要針對行動裝置手動調整。在 Wix 編輯器中：

1. 切換到行動版編輯畫面。
2. 找到 HTML 嵌入元素。
3. 調整它在行動裝置上的大小與位置。
4. 發布並測試。

如果是透過 Velo 使用 JavaScript 小工具（方法二），該小工具預設就具備響應式設計，應可在各種螢幕尺寸下正常運作，無需額外調整。

聊天機器人回答不準確

這是訓練問題，而不是嵌入問題。請前往 Agentkit 儀表板，然後：

1. 檢查哪些頁面已成功被檢索。
2. 針對回答不佳的主題新增問與答組合。
3. 在 Playground 中測試，直到回覆令人滿意為止。
4. 加入自訂指示，引導聊天機器人的語氣與行為。

費用考量

以下是 Agentkit 各方案對應到常見 Wix 使用情境的建議。

所有付費方案改採年繳，皆可省下約 20% 費用。

後續步驟

你的 Wix 網站現在有了能全天候處理訪客問題的 AI 聊天機器人。接下來可以聚焦以下幾件事：

1. 依第一週的對話精煉訓練內容。 留意訪客提問的模式，補齊訓練內容的缺口。
2. 啟用潛在客戶收集，將對話轉化為潛在客戶，這正是聊天機器人回本的關鍵所在。
3. 串接你的工具，透過 Zapier 或 Webhook，把潛在客戶推送到 Google Sheets、Mailchimp、HubSpot，或你團隊使用的任何工具。詳情請見整合指南。
4. 如果你也經營其他平台的網站，請閱讀 Squarespace 教學：將聊天機器人加到 Squarespace。
5. 在完整嵌入教學中，探索所有嵌入方式。

免費建立你的聊天機器人 →

不需信用卡。