---
title: "將 AI Agent 嵌入你的網站"
description: "啟用公開存取、選擇作答模式、自訂聊天小工具外觀、完成網路設定，並下載 JavaScript 檔案將聊天視窗嵌入網頁"
canonical_url: "https://docs.ardge.com/zh-tw/knowledge/argent/embed-on-website"
---
# 將 AI Agent 嵌入你的網站

> 啟用公開存取、選擇作答模式、自訂聊天小工具外觀、完成網路設定，並下載 JavaScript 檔案將聊天視窗嵌入網頁

## 概觀

啟用公開存取後，AI Agent 可以聊天小工具的形式嵌入你的網站，讓訪客無須登入即可與該 Agent 對話。

嵌入的作法是在網站頁面上載入一支 JavaScript 檔案（介面上稱為 argent-widget.js）。該檔案於 ARGENT 下載，並已內嵌下載當下儲存的外觀與文案設定，以及連回 ARGENT 服務所需的網址。

本文說明啟用公開存取、選擇作答模式、設定小工具外觀，以及完成網路設定、下載檔案、貼上嵌入程式碼的完整流程。

## 你將學會什麼

- 為單一 Agent 啟用公開存取，並決定訪客提問時的作答模式
- 自訂聊天小工具的標題、文案、色彩與圖示
- 設定 ARGENT API Host 與允許嵌入的網域白名單
- 下載聊天小工具的 JavaScript 檔案，並將聊天視窗嵌入網頁

**預計時間：約 20 分鐘**（不含路由器或防火牆的連接埠轉發設定）

## 適用版本

- ARGENT 1.0.1 及以上版本

## 開始之前

- 已建立並驗證過此 Agent，見[建立你的第一個 AI Agent](https://docs.ardge.com/zh-tw/knowledge/argent/first-ai-agent)
- 你具備路由器或防火牆的設定權限，可新增連接埠轉發規則
- 你具備網站靜態資源目錄的上傳權限，以及該頁面 HTML 的編輯權限

## 步驟 1：啟用公開存取

1. 前往 **AI Agent** 頁面，點擊目標 Agent 的卡片
2. 切換至 **嵌入式掛件** 分頁
3. 開啟 **公開存取** 的切換開關

啟用後，頁面下方出現 **作答模式**、**聊天小工具外觀** 與 **嵌入聊天視窗** 三個區塊。**嵌入聊天視窗** 區塊會顯示此 Agent 的 **Agent ID**。

<warning>

**發布前請確認知識來源適合公開：**

公開存取讓任何訪客都能向此 Agent 提問。回覆中不會顯示檔案本身，但檔案的內容可能出現在回答中。

</warning>

![嵌入式掛件分頁，公開存取尚未開啟](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-1-1.webp)

![開啟公開存取後顯示作答模式與聊天小工具外觀](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-1-2.webp)

## 步驟 2：選擇作答模式

於 **作答模式** 區塊選擇訪客提問時 Agent 的作答方式，預設為 **深入思考**。訪客無法自行更改。

<table>
<thead>
  <tr>
    <th>
      模式
    </th>
    
    <th>
      作答方式
    </th>
    
    <th>
      適用情境
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        快速回覆
      </strong>
    </td>
    
    <td>
      直接檢索並給出簡潔答案
    </td>
    
    <td>
      單一問題與日常查詢
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        深入思考
      </strong>
    </td>
    
    <td>
      多輪推理、跨資料庫比對後回答
    </td>
    
    <td>
      複雜、需要查詢大量檔案的問題
    </td>
  </tr>
</tbody>
</table>

## 步驟 3：設定聊天小工具外觀

於 **聊天小工具外觀** 區塊依下表調整設定，右側會同步顯示即時預覽，可切換 **桌機** 與 **手機** 檢視。完成後點擊該區塊的 **儲存**。

<table>
<thead>
  <tr>
    <th>
      欄位
    </th>
    
    <th>
      設定值
    </th>
    
    <th>
      規則與注意事項
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        聊天視窗標題
      </strong>
    </td>
    
    <td>
      聊天視窗上方標題列顯示的文字
    </td>
    
    <td>
      選填，最多 32 個字元
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        聊天啟動器文字
      </strong>
    </td>
    
    <td>
      啟動器按鈕旁顯示的提示文字
    </td>
    
    <td>
      選填，最多 32 個字元
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        色彩設定
      </strong>
    </td>
    
    <td>
      選 <strong>
        精簡
      </strong>
      
       以單一 <strong>
        主題色
      </strong>
      
       套用至全部元素，或選 <strong>
        進階
      </strong>
      
       個別自訂
    </td>
    
    <td>
      可直接輸入色碼或使用色彩選擇器
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        啟動器按鈕圖示
      </strong>
    </td>
    
    <td>
      右下角聊天啟動器的圖示
    </td>
    
    <td>
      選填。未上傳時使用預設聊天圖示。建議使用正方形透明背景 PNG
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        客服頭像圖示
      </strong>
    </td>
    
    <td>
      對話中客服端的頭像
    </td>
    
    <td>
      選填。未上傳時使用預設機器人圖示
    </td>
  </tr>
</tbody>
</table>

選擇 **進階** 時，可分別設定 **視窗標題列**、**啟動器按鈕**、**對話泡泡**、**傳送按鈕** 與 **客服頭像** 五個元素的色彩。

儲存成功時，畫面顯示「**儲存成功／聊天小工具設定已更新。**」。

![已填寫聊天視窗標題與聊天啟動器文字，右側為即時預覽](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-3-1.webp)

![精簡模式的主題色與圖示上傳欄位](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-3-2.webp)

![進階模式的五個元素色彩](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-3-3.webp)

![聊天小工具設定儲存成功提示](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-3-4.webp)

## 步驟 4：完成網路設定

於 **嵌入聊天視窗** 區塊的 **網路設定** 步驟中，先在路由器或防火牆上設定連接埠轉發規則，確保 ARGENT 服務可自外部網路存取，再填寫下列兩個欄位並點擊 **儲存**。

<table>
<thead>
  <tr>
    <th>
      欄位
    </th>
    
    <th>
      設定值
    </th>
    
    <th>
      規則與注意事項
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        ARGENT API Host
      </strong>
    </td>
    
    <td>
      部署 ARGENT 服務的存取網址，例如 <code>
        https://argent.example.com
      </code>
    </td>
    
    <td>
      必填。預設帶入你目前開啟 ARGENT 的網址；訪客須能從外部網路連到此網址，否則請改為對外的網址。聊天小工具會藉此連接後端服務
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        允許嵌入的網域
      </strong>
    </td>
    
    <td>
      可載入此聊天小工具的網域，例如 <code>
        https://www.example.com
      </code>
    </td>
    
    <td>
      必填，至少一個。須填入完整連結。點擊 <strong>
        增加網域
      </strong>
      
       可再新增一列
    </td>
  </tr>
</tbody>
</table>

![嵌入聊天視窗的網路設定](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-4-1.webp)

![已填寫並儲存的網路設定](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-4-2.webp)

<warning>

**兩個欄位皆填妥後才能下載：**

未填妥時，下一步的 **下載** 按鈕無法點擊，且畫面顯示「**下載小工具前至少需新增一個允許嵌入的網域。**」。

</warning>

## 步驟 5：下載並上傳 JavaScript 檔案

1. 於 **上傳 JavaScript 檔案** 步驟點擊 **下載**，取得聊天小工具的 JavaScript 檔案。檔名格式為 `argent-widget-v<版本>-<Agent ID 前 8 碼>.js`，例如 `argent-widget-v1.0.0-eda52162.js`
2. 將該檔案上傳至你網站的靜態資源目錄

<warning>

**外觀或文案變更後須重新下載並重新上傳：**

下載的檔案已內嵌下載當下已儲存的外觀與文案設定。日後於 ARGENT 修改這些設定時，網站上的聊天小工具不會自動更新，須重新下載並覆蓋網站上的檔案。

</warning>

## 步驟 6：貼上嵌入程式碼

1. 於 **嵌入聊天視窗程式碼** 步驟的 **聊天小工具 JS 檔存放位置** 欄位，填入步驟 5 檔案的存放路徑，例如 `https://www.example.com/assets`
2. 點擊程式碼區塊的複製圖示，畫面顯示「**複製成功／嵌入程式碼已複製到剪貼簿。**」
3. 將程式碼貼至要顯示聊天視窗的網頁中

程式碼中的網址與 Agent ID 由頁面依你填寫的內容產生，格式如下：

```html
<!-- ARGENT Chat Widget v1.0.0 (agent id: <Agent ID>) -->
<script
  src="https://www.example.com/assets/argent-widget-v1.0.0-<Agent ID 前 8 碼>.js"
  async
></script>
```

完成後，該網頁右下角會出現聊天啟動器按鈕，點擊即可展開聊天視窗。

![已填寫聊天小工具 JS 檔存放位置的嵌入程式碼](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-6-1.webp)

![嵌入程式碼複製成功提示](https://docs.ardge.com/screenshots/knowledge/zh-tw/argent/embed-on-website/step-6-2.webp)

## 疑難排解

<table>
<thead>
  <tr>
    <th>
      訊息
    </th>
    
    <th>
      可能原因
    </th>
    
    <th>
      處理方式
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        無法取得聊天小工具引擎檔，請稍後再試。
      </code>
    </td>
    
    <td>
      下載請求未取得檔案
    </td>
    
    <td>
      稍後重新點擊 <strong>
        下載
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        無法儲存聊天小工具設定，請稍後再試。
      </code>
    </td>
    
    <td>
      外觀或網路設定的儲存請求未成功送達
    </td>
    
    <td>
      稍後重新點擊 <strong>
        儲存
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        下載小工具前至少需新增一個允許嵌入的網域。
      </code>
    </td>
    
    <td>
      <strong>
        允許嵌入的網域
      </strong>
      
       為空
    </td>
    
    <td>
      回到步驟 4 點擊 <strong>
        增加網域
      </strong>
      
       並填入完整連結
    </td>
  </tr>
</tbody>
</table>

## 相關文章

- [建立你的第一個 AI Agent](https://docs.ardge.com/zh-tw/knowledge/argent/first-ai-agent)
- [查看 ARGENT 的使用狀況與對話紀錄](https://docs.ardge.com/zh-tw/knowledge/argent/usage-analytics)


## Sitemap

See the full [sitemap](https://docs.ardge.com/sitemap.md) for all pages.