外觀設定

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

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

一、什麼時候會用到

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

API 與內部平台只有簡化模式。 這兩種平台沒有對外的對話視窗，外觀設定頁只會顯示 「簡化模式」 提示：「API 和內部模式下僅需設定 AI 助理的大頭貼，其他外觀設定不適用」，可調整的只有 Agent 大頭貼；以下各節的 Logo、顏色與主題只適用於網頁平台。

二、品牌資產

外觀設定：左側品牌資產與顯示設定，右側即時預覽

四個圖片欄位都以點擊 上傳 選檔，上傳後顯示預覽，可刪除重新上傳：

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

三、顯示設定

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

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

四、主題模式設定

主題模式設定：淺色主題的顏色與效果

啟用主題模式切換

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

顏色與效果

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

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

等待回覆時顯示的文案與動畫素材不在這裡，請到回覆等待樣式設定。

大頭貼、顏色主題、深色主題示意

五、常見問題

Q：儲存後網站上的視窗沒有變？

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

Q：深色主題要另外設定顏色嗎？

要。開啟 啟用主題模式切換 後，切到 深色主題 分頁為每個項目配色；沒調整的項目使用系統預設的深色配色。