WordPress 撐起了全球超過 40% 的網站，也就是說，你的網站很有可能就是用 WordPress 架設的。將聊天機器人加入 WordPress 相當簡單——你不需要開發人員、不需要自訂外掛程式，也不需要任何寫程式經驗。本指南會介紹三種方法，從最簡單的外掛程式做法，到佈景主題層級的安裝，並涵蓋常讓人卡關的細節。
開始之前
在將聊天機器人加入你的 WordPress 網站之前，你需要先準備好兩件事。
1. 一個已訓練好聊天機器人的 Agentkit 帳號。
如果你還沒完成這一步，請免費註冊並建立你的第一個聊天機器人。用你的網站內容、常見問題頁面、文件，或訪客會詢問的任何其他資料來訓練它。詳情請參閱訓練指南。
2. 你的嵌入指令碼標籤。
聊天機器人訓練完成後，前往 Agentkit 儀表板中你聊天機器人的設定，再進入**「發布」**頁面，你會看到類似這樣的指令碼標籤：
<script src="https://cdn.agentkit.ai/widget.js" data-chatbot="your-chatbot-id" async> </script>
複製這段程式碼片段，你會使用以下三種方法之一，將它貼到 WordPress 中。
方法比較
| 方法 | 難易度 | 是否需要外掛程式 | 適用範圍 | 佈景主題更新後是否仍有效 | 最適合 |
|---|---|---|---|---|---|
| 外掛程式（WPCode） | 最簡單 | 需要（免費） | 所有頁面 | 是 | 非技術使用者 |
| Custom HTML 區塊 | 簡單 | 不需要 | 特定頁面 | 是 | 逐頁設定聊天機器人 |
| 佈景主題頁尾（footer.php） | 中等 | 不需要 | 所有頁面 | 否（需要子佈景主題） | 開發人員 |
請依你的熟悉程度選擇合適的方法。建議多數使用者採用外掛程式做法，因為它最簡單，也最不容易受佈景主題更新影響。
方法一：外掛程式做法（建議）
這是最簡單的方法。你會安裝一個免費外掛程式，讓你不必修改佈景主題檔案，就能在網站中加入程式碼片段。
使用 WPCode（Insert Headers and Footers）
WPCode 是一款免費的 WordPress 外掛程式，安裝次數超過 200 萬次。它讓你不必動到佈景主題檔案，就能在網站的頁首或頁尾加入程式碼。
步驟 1：安裝外掛程式
- 在你的 WordPress 後台，前往 Plugins（外掛程式），再進入 Add New（新增）。
- 搜尋「WPCode」（全名是 WPCode - Insert Headers, Footers, and Code Snippets）。
- 點選 Install Now（立即安裝），接著點選 Activate（啟用）。
步驟 2：加入聊天機器人程式碼片段
- 在 WordPress 後台側邊欄，前往 Code Snippets（程式碼片段），再進入 Header & Footer（頁首與頁尾）。
- 找到 Footer（頁尾） 區段。
- 將你的 Agentkit 嵌入指令碼標籤貼到 Footer 欄位中。
- 點選 Save Changes（儲存變更）。
就是這樣。聊天機器人小工具現在會出現在你 WordPress 網站的每一個頁面上。
步驟 3：確認可正常運作
- 在新的瀏覽器分頁中開啟你的網站（不是 WordPress 後台）。
- 你應該會在畫面右下角看到聊天氣泡。
- 點選它並傳送一則測試訊息，確認它能正確回應。
使用 Insert Headers and Footers（替代方案）
如果你偏好使用其他外掛程式，由 WPBeginner 開發的「Insert Headers and Footers」運作方式相同：
- 安裝並啟用外掛程式。
- 前往 Settings（設定），再進入 Insert Headers and Footers。
- 將嵌入指令碼貼到 Scripts in Footer 欄位中。
- 儲存。
控制哪些頁面顯示聊天機器人
WPCode 與類似的外掛程式都支援條件邏輯。如果你只想在特定頁面顯示聊天機器人：
- 在 WPCode 中，不要使用 Header & Footer 區段，改為建立一個新的 Code Snippet（程式碼片段）。
- 將程式碼類型設為「HTML Snippet」。
- 貼上你的嵌入指令碼。
- 在 Insertion（插入位置） 中，選擇「Site Wide Footer」。
- 在 Smart Conditional Logic（智慧條件邏輯） 中，新增類似以下的條件：
- 頁面是「Contact」、「Support」或「Pricing」
- 文章類型是「Product」
- 網址包含「/help」
- 儲存並啟用該程式碼片段。
這讓你能精確控制，而不必建立多個聊天機器人。
方法二：Custom HTML 區塊（特定頁面）
如果你只想在一、兩個頁面顯示聊天機器人，又不想安裝外掛程式，可以使用 WordPress 區塊編輯器。
步驟 1：編輯你想顯示聊天機器人的頁面。
步驟 2：在頁面內容的最下方新增一個 Custom HTML 區塊。
步驟 3：將你的 Agentkit 嵌入指令碼貼到該區塊中：
<script src="https://cdn.agentkit.ai/widget.js" data-chatbot="your-chatbot-id" async> </script>
步驟 4：更新或發布該頁面。
聊天機器人只會出現在該特定頁面上。如有需要，可對其他頁面重複相同步驟。
此方法的限制：
- 指令碼是作為頁面內容的一部分載入，因此可能會比放在頁尾稍微晚一點載入。
- 如果你想在很多頁面上顯示聊天機器人，這樣做會相當繁瑣，建議改用外掛程式的方法。
- 部分頁面建構工具（Elementor、Divi）可能會移除 HTML 區塊中的指令碼標籤。若發生這種情況，請改用外掛程式的方法。
方法三：佈景主題頁尾（footer.php）
這個方法會在佈景主題層級加入聊天機器人，是最直接的做法，但需要編輯佈景主題檔案。
重要：如果你直接編輯佈景主題的 footer.php，佈景主題更新時你的變更就會消失。請使用子佈景主題，讓變更能永久保留。
使用子佈景主題
步驟 1：如果你還沒有子佈景主題，請先建立一個。大多數佈景主題開發者都會提供操作說明；你也可以使用「Child Theme Configurator」外掛程式。
步驟 2：在你的 WordPress 後台，前往 Appearance（外觀），再進入 Theme File Editor（佈景主題檔案編輯器）。
步驟 3：從下拉選單中選擇你的子佈景主題。
步驟 4：開啟 footer.php。如果子佈景主題中沒有這個檔案，請複製父佈景主題的 footer.php 來建立一個。
步驟 5：找到結尾的 </body> 標籤，將嵌入指令碼貼在它的正前方：
<!-- Agentkit Chatbot --> <script src="https://cdn.agentkit.ai/widget.js" data-chatbot="your-chatbot-id" async> </script> </body> </html>
步驟 6：儲存檔案。
不使用子佈景主題（不建議）
如果你直接編輯父佈景主題的 footer.php，步驟相同，但請注意佈景主題更新時，你的變更會被覆寫。若你選擇這條路，請保留一份修改過的 footer.php 備份，以便在更新後重新套用。
測試你的安裝結果
不論你使用哪種方法加入聊天機器人，都請依照以下檢查清單逐項確認。
基本驗證
| 檢查項目 | 驗證方式 | 預期結果 |
|---|---|---|
| 小工具是否出現 | 在新分頁中造訪你的網站 | 右下角可見聊天氣泡 |
| 小工具是否能開啟 | 點選聊天氣泡 | 聊天視窗開啟並顯示歡迎訊息 |
| 聊天機器人是否回應 | 輸入問題並送出 | 根據你的訓練資料產生 AI 回應 |
| 行動裝置顯示 | 在手機上開啟，或使用瀏覽器開發者工具 | 小工具可正常存取與使用 |
| 頁面載入速度 | 檢查瀏覽器開發者工具的 Network 分頁 | 小工具指令碼以非同步方式載入，不會阻擋頁面 |
清除快取檢查清單
快取是使用者加入聊天機器人指令碼後，卻在網站上看不到它的頭號原因。請依以下順序清除快取：
- WordPress 快取外掛程式（WP Super Cache、W3 Total Cache、WP Rocket、LiteSpeed Cache）：前往該外掛程式的設定，清除所有快取。
- 主機層級快取（SiteGround、WP Engine、Cloudflare）：在你的主機管理後台尋找清除快取的選項。
- CDN 快取（Cloudflare、StackPath、Fastly）：如果你使用 CDN，也請一併清除該處的快取。
- 瀏覽器快取：在無痕視窗中開啟你的網站，以繞過本機瀏覽器快取。
如果清除所有快取後聊天機器人仍未出現，請檢查瀏覽器開發者主控台（桌面版按 F12）是否有 JavaScript 錯誤。
常見問題排解
聊天機器人沒有出現
**原因：快取。**這是最常見的問題，請依照上方的清除快取檢查清單操作。
**原因：指令碼標籤位置。**確認指令碼位於 <body> 標籤內，而不是 <head>。部分標頭／頁尾外掛程式預設會將程式碼放在 <head> 中。
**原因：Content Security Policy（內容安全政策）。**部分安全性外掛程式會加入 Content Security Policy 標頭，封鎖外部指令碼。請檢查你的安全性外掛程式（Wordfence、Sucuri、iThemes Security）是否有 CSP 設定，並將 cdn.agentkit.ai 加入允許的指令碼來源。
**原因：頁面建構工具衝突。**部分頁面建構工具會移除內容區域中的指令碼標籤，請改用外掛程式方法（方法一），而非 Custom HTML 區塊。
聊天機器人有出現，但沒有回應
**原因：聊天機器人尚未訓練。**前往你的 Agentkit 儀表板，確認聊天機器人已有訓練資料。尚未訓練的聊天機器人沒有任何內容可供參考。
**原因：聊天機器人 ID 錯誤。**確認嵌入程式碼中的 data-chatbot 與 Agentkit 儀表板顯示的 ID 相符。
**原因：網域限制。**如果你在聊天機器人設定中設定了網域限制，請確認你的 WordPress 網域已加入允許清單。
聊天機器人與其他聊天外掛程式衝突
如果你同時使用其他即時聊天或聊天機器人外掛程式（Tidio、Intercom、Drift、Crisp），兩個小工具可能會重疊或互相干擾。
解決方式：
- 如果你要完全改用 Agentkit，請移除另一個聊天外掛程式。
- 如果兩者都需要，可使用 Agentkit 的 Custom HTML 區塊方法，只在另一個外掛程式未啟用的頁面上顯示。
- 如果兩者需要共存，可在 Agentkit 儀表板設定中調整小工具的位置。
加入聊天機器人後頁面載入變慢
Agentkit 小工具會以非同步方式載入（指令碼標籤中的 async 屬性），因此不應阻擋你的頁面轉譯。如果你發現速度變慢：
- 確認你的指令碼標籤中含有
async屬性。 - 執行速度測試（Google PageSpeed Insights、GTmetrix），檢查 Agentkit 指令碼是否被標記。非同步指令碼很少會影響效能分數。
- 如果你使用會延遲 JavaScript 載入的效能外掛程式，請將
cdn.agentkit.ai加入白名單，避免干擾小工具的載入。
為 WordPress 設定聊天機器人
聊天機器人在你的 WordPress 網站上線後，可以考慮在 Agentkit 儀表板中進行以下設定。
網域限制
在聊天機器人的 Settings（設定） 中，將允許的網域設為你 WordPress 網站的網域（例如 yourdomain.com）。這能防止有人複製你的嵌入程式碼，在其他網站上使用你的聊天機器人。
以 WordPress 內容進行訓練
最佳的訓練來源就是你實際的網站內容。在 Agentkit 中，新增你的 WordPress 網站網址作為訓練來源，檢索工具就會自動為你的頁面建立索引。如果你的網站使用 JavaScript 轉譯，由 Firecrawl 驅動的檢索工具也能正確處理。
請將訓練重點放在：
- 常見問題或知識庫頁面
- 產品或服務頁面
- 定價頁面
- 關於我們頁面
- 支援文件
- 能回答常見問題的部落格文章
略過內容單薄的頁面、登入頁面，或需要驗證身分才能存取的頁面。
完整的訓練指引請參閱如何用你的網站內容訓練聊天機器人。
潛在客戶收集
啟用潛在客戶收集動作，直接在聊天中收集訪客的電子郵件與姓名。收集到的潛在客戶會出現在你的 Agentkit 儀表板中，也可以透過 Zapier 或 Webhook 送進你的 CRM。設定方式請參閱潛在客戶收集文件。
WordPress 專屬整合文件
如需最新的設定說明與任何 WordPress 專屬功能，請參閱 WordPress 整合文件。
方法比較總覽
| 考量項目 | 外掛程式（WPCode） | Custom HTML 區塊 | 佈景主題頁尾 |
|---|---|---|---|
| 設定時間 | 5 分鐘 | 每頁 3 分鐘 | 10 分鐘 |
| 技術能力 | 不需要 | 不需要 | 基本 PHP |
| 佈景主題更新後是否仍有效 | 是 | 是 | 僅子佈景主題可以 |
| 全站涵蓋 | 是 | 否（逐頁設定） | 是 |
| 條件式頁面指定 | 是（透過規則） | 手動（逐頁） | 需要 PHP 邏輯 |
| 是否依賴外掛程式 | 是（免費外掛程式） | 否 | 否 |
對大多數 WordPress 使用者來說，外掛程式是正確的選擇。它快速、安全，能在不冒著破壞佈景主題檔案風險的情況下，帶給你最大的彈性。
後續步驟
聊天機器人在 WordPress 上線後，請花幾分鐘在 Agentkit 的 Playground 中測試回應。如果聊天機器人在特定主題上答得不好，就替那些主題新增更多訓練資料。Playground 讓你能快速反覆調整，不必每次都在正式網站上測試。
接著，探索如何將聊天機器人連接到你的其他工具。整合指南涵蓋 Zapier 工作流程、Webhook，以及進階設定所需的 REST API。
不需信用卡。
