# 串接對話平台：網站

## <mark style="color:blue;">一、進入設定頁面</mark> <a href="#navigate-to-settings" id="navigate-to-settings"></a>

### 1. 路徑一：新增網頁客服對話 <a href="#path-add-web-chat" id="path-add-web-chat"></a>

點擊左側選單 「 <mark style="color:blue;">客服對話 > 對話平台</mark>」 ，點選右上角的 「<mark style="color:blue;">＋串接對話平台</mark>」，選擇平台 「 <mark style="color:blue;">Website</mark> 」

### 2. 路徑二：AI 助理關聯對話平台 <a href="#path-ai-agent-link-channel" id="path-ai-agent-link-channel"></a>

進入左側功能欄 「<mark style="color:blue;">AI 功能 > AI 助理</mark> 」 選擇某隻 AI 助理，點選 「 <mark style="color:blue;">操作</mark> 」 圖示，再點選 「 <mark style="color:blue;">關聯對話平台</mark> 」 的 「 <mark style="color:blue;">網頁 XX 助理</mark> 」

### 3. 路徑三：對話平台操作 <a href="#path-channel-management" id="path-channel-management"></a>

左側功能欄中的 「 <mark style="color:blue;">客服對話 > 對話平台</mark> 」，選擇您想要設定之 AI 助理，點選 「 <mark style="color:blue;">操作</mark> 」 圖示即可進入對話平台配置。

## <mark style="color:blue;">二、基本設定</mark> <a href="#basic-settings" id="basic-settings"></a>

### 1. 基本設定 <a href="#general-settings" id="general-settings"></a>

**設定平台名稱**

* 在 「 <mark style="color:blue;">平台名稱</mark> 」 欄位輸入您希望在網站上顯示的 AI 助理名稱
* 例如：「 客服小幫手 」、「 智能助理 」等

**選擇 AI 助理**

* 在 「 <mark style="color:blue;">AI 助理</mark> 」 下拉選單中選擇要使用的 AI 助理
* 這會決定聊天室使用哪一個 AI 助理 來回答問題

**設定返回網址**

* 在 「 <mark style="color:blue;">返回網址</mark> 」 欄位輸入您的公司網站網址
* 當用戶點擊聊天室的返回按鈕時，會跳轉到這個網址

**取得並使用公開網址**

* 系統會自動生成一個 「 <mark style="color:blue;">公開訪問URL</mark> 」
* 您可以：
  * 點擊 「 <mark style="color:blue;">複製</mark> 」 按鈕複製網址
  * 點擊 「 <mark style="color:blue;">訪問</mark> 」 按鈕在新視窗開啟聊天室
  * 點擊 「 <mark style="color:blue;">嵌入</mark> 」 按鈕取得嵌入程式碼
  * 點擊 「 <mark style="color:blue;">嵌入預覽</mark> 」 按鈕預覽嵌入效果

**嵌入腳本優化**

當您選擇嵌入方式時，系統會提供優化過的 embed.js 腳本，具備以下特點：

* **防重複執行機制**：即使腳本被多次載入，也只會初始化一次，避免衝突
* **更好的錯誤處理**：當載入失敗時，會提供清楚的錯誤訊息，方便除錯
* **優化載入效能**：腳本經過最佳化，不會影響網站載入速度
* **相容性提升**：與各種網站環境和框架更加相容

**嵌入最佳實踐：**

1. 將嵌入腳本放在 `</body>` 標籤之前，確保頁面主要內容先載入
2. 只在頁面中加入一次嵌入腳本，避免重複
3. 如需在 SPA（Single Page Application）中使用，請參考技術文檔的進階設定

### 2. 外觀設定 <a href="#appearance-settings" id="appearance-settings"></a>

**上傳企業 Logo**

* 點擊 「 <mark style="color:blue;">Logo</mark> 」 區域的上傳按鈕
* 選擇您的企業標誌圖片檔案
* 上傳後會顯示預覽，可點擊刪除重新上傳

**上傳 AI 助理頭像**

* 點擊 「 <mark style="color:blue;">大頭貼</mark> 」 區域的上傳按鈕
* 選擇適合的頭像圖片
* 上傳後會顯示預覽，可點擊刪除重新上傳

**設定顏色主題**

* 點擊 「 <mark style="color:blue;">主題色</mark> 」 選擇器，選擇聊天室視窗標題的顏色
* 點擊 「 <mark style="color:blue;">標題字顏色</mark> 」 選擇器，設定標題文字顏色
* 點擊 「 <mark style="color:blue;">AI 助理回答背景色</mark> 」 選擇器，設定 AI 回覆訊息的背景顏色

**啟用主題切換**

* 將 「 <mark style="color:blue;">主題模式切換</mark> 」 開關切換為開啟狀態
* 用戶可以在淺色和深色主題間切換

### 3. 功能設定 <a href="#feature-settings" id="feature-settings"></a>

**設定是否啟用**

* 設定對話是否開啟提供服務使用

**設定檔案上傳**

* 將 「 <mark style="color:blue;">允許檔案上傳</mark> 」 開關切換為開啟狀態
* 用戶就可以上傳檔案給 AI 分析，如：圖片、檔案等

**設定引用文件顯示**

* 將 「 <mark style="color:blue;">顯示引用文件</mark> 」 開關切換為開啟狀態
* AI 回答時會顯示參考的來源文件

**設定允許下載引用文件**

* 將 「 <mark style="color:blue;">允許下載引用文件</mark> 」 開關切換為開啟狀態
* 使用者即可下載對話中 AI 助理所引用的檔案內容

**設定顯示使用工具及結果**

* 將 「 <mark style="color:blue;">顯示使用工具及結果</mark> 」 開關切換為開啟狀態
* 系統將標示正在透過 MCP 或 API 作業處理中

### 4. 互動設定 <a href="#interaction-settings" id="interaction-settings"></a>

**設定開場白**

* 在開場白輸入框中輸入歡迎訊息
* 例如：「您好！我是您的智能客服，有什麼可以幫助您的嗎？」
* 點擊 「 <mark style="color:blue;">新增</mark> 」 按鈕將開場白加入列表
* 可以新增多個開場白，系統會隨機選擇
* 如需刪除，點擊對應項目右側刪除按鈕

**設定對話開始問題**

* 在「對話開始問題」輸入框中輸入預設問題
* 例如：「如何申請退貨？」、「營業時間是什麼？」
* 點擊 「 <mark style="color:blue;">新增</mark> 」 按鈕將問題加入列表
* 這些問題會顯示為快速選項供用戶點擊
* 如需刪除，點擊對應項目右側刪除按鈕

### 5. 登入設定 <a href="#login-settings" id="login-settings"></a>

**設定 SSO 登入來源**

* MaiAgent 目前支援透過 Keycloak 整合實現 SSO（Single Sign-On）服務
* 於 「 <mark style="color:blue;">登入來源</mark> 」 下拉選單中進行切換
* 選擇使用 Maiagent 或 Keycloak 作為身份驗證方式

## <mark style="color:blue;">三、自動回覆設定</mark> <a href="#auto-reply-settings" id="auto-reply-settings"></a>

您可以在此設定機器人回覆時間段。

* 點選日期旁的開關鈕：選定一周中的哪幾天回覆。
* 設定時段：選定開始的時間與結束的時間。
* 新增時段：如果有多個時段要設定，可按下 「 <mark style="color:blue;">+新增時段</mark> 」 來新增，並設定時段。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.maiagent.ai/conversations/web-chat/website.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.