> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/build/conversation-settings/platform-settings/appearance-settings.md).

# 外觀設定

網頁對話視窗的外觀：品牌資產（Logo、大頭貼、技術支援 Logo、聊天按鈕圖示）、顯示設定、淺色與深色主題的顏色與效果，右側即時預覽。

<mark style="color:blue;">外觀設定</mark> 決定網頁對話視窗長什麼樣子：標題列的 Logo 與顏色、Agent 的頭像、訊息框的配色，以及要不要讓使用者切換深色模式。頁面分成左右兩欄，左側是設定項目、右側是 <mark style="color:blue;">即時預覽</mark>，每改一個顏色預覽就跟著變，儲存前就能確認效果。這些設定只有網頁與內部平台才有，LINE 等通訊平台的介面由該平台決定。

## 一、什麼時候會用到 <a href="#when-to-use" id="when-to-use"></a>

品牌設計師拿到公司新的視覺規範，要讓官網客服視窗跟著換裝。她進入網頁平台的 <mark style="color:blue;">外觀設定</mark>，上傳新的 Logo 與吉祥物頭像，把 <mark style="color:blue;">主題色</mark> 改成品牌藍、<mark style="color:blue;">標題字顏色</mark> 改成白色，再把 Agent 訊息框的背景調成淺灰。右側預覽即時顯示新配色，她確認標題列與訊息泡泡都符合規範後按 <mark style="color:blue;">儲存</mark>，官網上的客服視窗重新整理後就換成新樣式，不需要動嵌入程式碼。

{% hint style="info" %}
**API 與內部平台只有簡化模式。** 這兩種平台沒有對外的對話視窗，外觀設定頁只會顯示 「<mark style="color:blue;">簡化模式</mark>」 提示：「API 和內部模式下僅需設定 AI 助理的大頭貼，其他外觀設定不適用」，可調整的只有 Agent 大頭貼；以下各節的 Logo、顏色與主題只適用於網頁平台。
{% endhint %}

## 二、品牌資產 <a href="#brand-assets" id="brand-assets"></a>

<figure><img src="https://1593648278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmzb5NG9GDzFP2YDKeYVl%2Fuploads%2Fgit-blob-a854efca7eb795ea01581e34e387c2cb55f5e277%2Fplatform-appearance-settings.png?alt=media" alt="外觀設定的品牌資產與顯示設定，右側為即時預覽"><figcaption><p>外觀設定：左側品牌資產與顯示設定，右側即時預覽</p></figcaption></figure>

四個圖片欄位都以點擊 <mark style="color:blue;">上傳</mark> 選檔，上傳後顯示預覽，可刪除重新上傳：

| 欄位            | 顯示在哪裡                     |
| ------------- | ------------------------- |
| **Logo**      | 使用者啟動 Web Chat 時顯示的標示     |
| **大頭貼**       | Agent 每則訊息旁的頭像            |
| **技術支援 Logo** | 聊天室底部的品牌標誌（需開啟「顯示技術支援標誌」） |
| **聊天按鈕圖示**    | 嵌入網站後右下角的聊天按鈕；上傳後覆蓋預設圖示   |

## 三、顯示設定 <a href="#display-settings" id="display-settings"></a>

控制聊天室中要不要出現這些元素：

| 開關              | 說明               |
| --------------- | ---------------- |
| **顯示 AI 助理大頭貼** | 在訊息中顯示 Agent 的頭像 |
| **顯示 AI 助理名稱**  | 在訊息中顯示 Agent 的名稱 |
| **顯示技術支援標誌**    | 在聊天室底部顯示技術支援品牌標誌 |

## 四、主題模式設定 <a href="#theme-settings" id="theme-settings"></a>

<figure><img src="https://1593648278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmzb5NG9GDzFP2YDKeYVl%2Fuploads%2Fgit-blob-f049bf23bf90627004a7126d659fe0a27a9fb1f2%2Fplatform-appearance-theme.png?alt=media" alt="主題模式設定：啟用主題模式切換、淺色主題的主題色與訊息框顏色"><figcaption><p>主題模式設定：淺色主題的顏色與效果</p></figcaption></figure>

### 啟用主題模式切換 <a href="#theme-toggle" id="theme-toggle"></a>

開啟 <mark style="color:blue;">啟用主題模式切換</mark> 後，使用者可以在對話視窗自行切換淺色與深色主題，設定頁也會多出 <mark style="color:blue;">深色主題</mark> 分頁讓您另外配一組顏色。關閉時只有淺色主題。

### 顏色與效果 <a href="#colors" id="colors"></a>

淺色主題（與深色主題）各自可設定：

| 區塊           | 項目            | 說明                |
| ------------ | ------------- | ----------------- |
| **主題色與導航欄**  | 主題色           | 按鈕、連結等主要元素與標題列的顏色 |
|              | 標題字顏色         | 聊天室標題欄文字顏色        |
| **AI 助理訊息框** | 背景色、文字顏色      | AI 回覆泡泡的配色        |
|              | 啟用陰影效果、啟用漸層效果 | 泡泡的視覺效果           |
| **使用者訊息框**   | 背景色、文字顏色      | 使用者訊息泡泡的配色        |
|              | 啟用陰影效果、啟用漸層效果 | 泡泡的視覺效果           |
| **對話背景**     | 背景色           | 整個對話區域的背景顏色       |

{% hint style="info" %}
等待回覆時顯示的文案與動畫素材不在這裡，請到[回覆等待樣式](/build/conversation-settings/platform-settings/loading-display.md)設定。
{% endhint %}

<div align="left"><figure><img src="https://1593648278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmzb5NG9GDzFP2YDKeYVl%2Fuploads%2Fgit-blob-05cb64cb7654a5b0284e7f98cfb881dbcf3de0f5%2F%E6%88%AA%E5%9C%96%202025-07-02%20%E4%B8%8B%E5%8D%885.40.05%20(1)%20(1).png?alt=media" alt="大頭貼、顏色主題與深色主題在對話視窗的呈現" width="299"><figcaption><p>大頭貼、顏色主題、深色主題示意</p></figcaption></figure></div>

## 五、常見問題 <a href="#faq" id="faq"></a>

### Q：儲存後網站上的視窗沒有變？ <a href="#faq-not-updated" id="faq-not-updated"></a>

請使用者重新整理頁面。外觀設定隨對話頁載入，已開啟的視窗不會即時更新。

### Q：深色主題要另外設定顏色嗎？ <a href="#faq-dark" id="faq-dark"></a>

要。開啟 <mark style="color:blue;">啟用主題模式切換</mark> 後，切到 <mark style="color:blue;">深色主題</mark> 分頁為每個項目配色；沒調整的項目使用系統預設的深色配色。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.maiagent.ai/build/conversation-settings/platform-settings/appearance-settings.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.