使用網路聊天遊樂場自訂網路聊天外觀

Webchat Playground 可協助您自訂 Copilot Agent 網路聊天的外觀與行為。 直覺式的使用者介面讓您能夠修改色彩、字體、縮圖等項目，使其符合您的品牌識別。 本文說明如何使用網路聊天遊樂場建立與管理佈景主題，並將樣式匯出為 JSON 或 HTML。

網路聊天遊樂場 UI

網路聊天遊樂場的使用者友善介面幫助您定義網路聊天的外觀與感受。 您可以輕鬆調整並即時預覽變更。

介面主要分為三個區域：

1. 左側窗格會顯示已儲存的佈景主題及其主要、副色與強調色。 選擇主題來編輯或預覽。

2. 中間窗格提供所選佈景主題或正在編輯的佈景主題預覽。

3. 右側窗格可讓您在 JSON 與程式碼片段標籤之間切換。 JSON 視圖會以 JSON 陣列形式呈現當前樣式，您可以貼到現有的網路聊天中。 程式碼片段檢視表包含內嵌樣式的網路聊天範例 HTML。

這個使用者介面範例顯示：

1. 在左側窗格裡，是您可以編輯或建立主題的樣式編輯器。

   各區段包括 General、Send Box、Suggestion Box、Avatar 和 Bubble。 編輯器也為所有適用的區段提供協助工具。 您在最上面儲存和刪除動作。

2. 右側窗格有程式碼片段分頁，顯示範例 HTML。 切換到 JSON 標籤頁查看範例 JSON。

使用預設主題或自行創作

網路聊天遊樂場提供預設主題，顯示網路聊天體驗的不同自訂選項。 這些主題在設計新主題時提供起點。 您也可以建立符合特定需求的新佈景主題，並將其儲存以供日後使用。

預覽主題

從左側窗格 (顯示顏色的區域) 選擇一個佈景主題，以開啟 Webchat 預覽。

建立新的佈景主題

若要建立新的佈景主題：

1. 從左窗格中選取新增主題。
   左側窗格變成樣式編輯器，您可以在那裡做修改。
2. 輸入主題的名稱。
3. 選取儲存。

編輯主題

若要編輯現有主題：

1. 在左側窗格中，點選佈景主題名稱旁的鉛筆圖示。
2. 在樣式編輯器中做修改。
3. 完成時，選取儲存。

刪除主題

若要刪除現有主題：

1. 在編輯模式開啟主題。
2. 點選上方的刪除 (垃圾桶) 圖示。

匯出樣式

匯出樣式的方法：

1. 從主題選擇器中選擇您想要的主題。
2. 在右側窗格中選擇 JSON 標籤。
3. 將檢視中的所有文字複製，並使用 styleOptions 變數貼到您的網路聊天 HTML 中。

匯出 HTML 程式碼片段

匯出 HTML 程式碼片段的方法：

1. 從主題選擇器中選擇您想要的主題。
2. 在右側窗格中選擇程式碼片段標籤。
3. 將視圖中所有 HTML 標記儲存為帶有 .html 副檔名的檔案。
4. 將 HTML 檔案上傳到網站伺服器。

範例 HTML

範例 HTML 程式碼片段呈現已套用所選樣式的網路聊天控制項浮動 widget。

相關資訊

• 自訂 Agent 的外觀和風格