文件

WordPress

將你的代理程式加入 WordPress 網站。

使用嵌入程式碼，將你的 AI 代理程式加入 WordPress 網站，適用於任何 WordPress 佈景主題。

首先，從儀表板的 代理程式 > 發布 取得你的嵌入程式碼。

方法一：佈景主題頁尾（建議）

透過你的佈景主題，將小工具加入所有頁面：

  1. 前往 Appearance → Theme Editor（或 Theme File Editor）
  2. 在你的佈景主題檔案中找到 footer.php
  3. 將你的嵌入程式碼貼在 </body> 之前

範例格式（請從 代理程式 > 發布 取得你的實際程式碼）：

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>
  1. 點選 Update File

小工具現在會出現在所有頁面上。

方法二：Custom HTML 區塊

使用區塊編輯器，將小工具加入特定頁面：

  1. 編輯你想要顯示小工具的頁面
  2. 新增一個 Custom HTML 區塊
  3. 貼上來自 代理程式 > 發布 的嵌入程式碼

範例格式：

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>
  1. 儲存該頁面

方法三：外掛程式（Header/Footer Scripts）

使用外掛程式在全站加入指令碼：

  1. 安裝「Insert Headers and Footers」或「WPCode」等外掛程式
  2. 前往該外掛程式的設定
  3. 找到「Footer Scripts」區段
  4. 貼上來自 代理程式 > 發布 的嵌入程式碼
  5. 儲存變更

此方法不需要編輯佈景主題檔案。

方法四：子佈景主題

若佈景主題會頻繁更新，請使用子佈景主題：

  1. 為你目前的佈景主題建立一個子佈景主題
  2. 新增一個 functions.php 檔案，內容如下（請將 YOUR_WIDGET_URL 與 YOUR_CHATBOT_ID 換成來自「代理程式 > 發布」的實際數值）：
<?php
function add_chatbot_widget() {
    ?>
    <script
      src="YOUR_WIDGET_URL"
      data-chatbot="YOUR_CHATBOT_ID"
      async
    ></script>
    <?php
}
add_action('wp_footer', 'add_chatbot_widget');

這樣即可在佈景主題更新後依然有效。

WooCommerce 網站

小工具會自動在 WooCommerce 網站上運作。你可以考慮：

  • 加入產品頁面，以回答產品相關問題
  • 加入結帳頁面，以提供訂單支援
  • 透過 Custom HTML 區塊，在特定頁面上使用

頁面建構工具

Elementor

  1. 使用 Elementor 編輯
  2. 新增一個 HTML 元件
  3. 貼上嵌入程式碼
  4. 設定為全站顯示（選用）

Divi

  1. 新增一個程式碼模組（Code Module）
  2. 貼上嵌入程式碼
  3. 儲存變更

Beaver Builder

  1. 新增一個 HTML 模組
  2. 貼上嵌入程式碼
  3. 發布變更

Multisite（多站點）

若你使用 WordPress Multisite（多站點）：

  • 個別將程式碼加入每個網站，或
  • 使用已於網路層級啟用的外掛程式，加入所有網站

快取外掛程式

如果你使用快取外掛程式（例如 WP Super Cache、W3 Total Cache 等）：

  1. 加入小工具程式碼
  2. 清除所有快取
  3. 測試小工具

小工具應能與所有主流快取外掛程式相容運作。

疑難排解

小工具沒有出現

  • 清除你的 WordPress 快取
  • 檢查瀏覽器主控台是否有錯誤
  • 確認代理程式 ID 是否正確

Theme Editor 無法使用

  • 部分主機服務商會停用佈景主題編輯功能
  • 請改用外掛程式的方法
  • 或透過 FTP 編輯檔案

小工具位置不正確

  • 在你代理程式的「設計」設定中調整
  • 檢查是否有佈景主題 CSS 衝突

測試

安裝完成後：

  1. 在無痕視窗中開啟你的 WordPress 網站
  2. 尋找聊天氣泡
  3. 傳送一則測試訊息
  4. 確認是否收到回覆

後續步驟