> For the complete documentation index, see [llms.txt](https://library.zoom.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://library.zoom.com/technical-library/zh-tw/shang-wu-fu-wu/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md).

# 自訂使用者聊天支援體驗

### 產品

* Zoom Contact Center
* Zoom 虛擬代理

### 先決條件

[將 Campaign SDK 嵌入您的網站或行動應用程式](https://developers.zoom.us/docs/contact-center/web/chat/#embed-the-chat-client-with-a-campaign-id)

### 概覽

您的聊天視窗通常是客戶與貴公司之間的第一個實際互動——無論他們是與虛擬代理還是真人代理聊天。透過 Zoom Contact Center 和 Zoom Virtual Agent，您可以完全掌控這段體驗在您的網站上呈現與運作的方式。

本指南將帶您了解所有可用工具，協助您設計符合品牌形象、提升易用性並保持客戶參與度的聊天體驗。

### 建立規劃

您的聊天 UI 應該像是網站或應用程式的自然延伸。在規劃聊天 UI 設計時，請考量以下項目：

* **顏色：** 貴公司的主色與強調色是什麼？請將這些顏色用於聊天體驗的不同元素，例如聊天泡泡、圖示、按鈕與背景顏色。您會使用十六進位色碼選擇顏色（例如 #FFFFFF），因此最好先備妥品牌的色碼。
* **字型：** 為了保持一致性，請配合您網站的字體排版。您可以從多種常見字型中選擇，或上傳自己的 TTF 檔案以新增自訂字型。
* **標誌：** 請考慮在聊天體驗中加入您的標誌或公司圖片。您可以上傳 JPG/JPEG、PNG、SVG 或 GIF 檔案，大小上限為 10MB。根據您選擇的聊天設計，系統會提供建議的圖片尺寸——下方將有更多說明。
* **頭像：** 頭像是機器人或代理的圖片呈現。對於機器人或系統訊息，請使用您的標誌或代表品牌的角色／頭像。與網頁瀏覽器中的網站圖示類似，這些圖示雖小，但如果與公司品牌搭配得宜，會對體驗產生顯著影響。頭像尺寸為 40x40 像素，您可以上傳 JPG/JPEG、PNG、SVG 或 GIF 檔案，大小上限為 2MB。

### 各個部分

[Zoom 的 Campaign Builder](https://zoom.us/cci/index/admin#/admin-campaign-management) 可用來自訂您網站或應用程式上的聊天設計及其可用性。

在 Campaign 中，您會設定：

* **聊天互動視窗：** 供使用者與您的機器人或代理聊天使用。您可以選擇所有泡泡、按鈕、圖示以及頁首設計的樣式。聊天視窗會大幅影響您數位支援體驗的整體外觀與感受。
* **位置：** 讓您控制支援應該在網站的哪些位置提供（請務必先嵌入 Campaign SDK）。您可以在整個網站提供支援，或根據 URL 指定應包含或排除的頁面。
* **邀請：** 使用者在貴公司的網站或應用程式上啟動或開啟聯絡中心的方式。共有兩種邀請類型：Sticky 和 Embedded。
  * **Sticky：** 邀請使用者使用數位支援的簡單方式。使用者會在畫面上看到一個圖示或小工具，點擊後即可開啟支援體驗。您可以控制顏色、形狀與圖示，甚至還能加入文字。
  * **Embedded：** 使用嵌入式邀請，您可以將網站上的任何按鈕或連結變成可點擊的連結，以開啟支援。
* **主動訊息：** 在使用者造訪指定頁面一段指定時間後，可用來傳送訊息的問候語。使用 Sticky Invitation 類型時，可將主動訊息加入任何 Campaign。

  **例如：** 「需要幫您選擇方案嗎？」

此外，您也會設定一個 **頭像**，也就是機器人或代理的圖片呈現。您的客戶會看到這些代表品牌的機器人或代理頭像。

### 打造您的聊天體驗

深入了解如何打造您的聊天體驗，包括尺寸、圖片、設計、訊息內容及其他設定。

{% content-ref url="/pages/02e52e2b81b52d15fb853f0617e6e260516e8494" %}
[打造您的聊天體驗](/technical-library/zh-tw/shang-wu-fu-wu/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md)
{% endcontent-ref %}

### 摘要

Zoom Contact Center 和 Zoom Virtual Agent 可協助您建立符合品牌且易於使用的支援聊天。您可以完全自訂設計、選擇聊天出現的位置與時間，並加入主動訊息，在最適當的時機吸引使用者。嵌入 Campaign SDK 後，您可以從 Admin UI 或透過程式碼控制一切。它靈活、簡潔，並且專為您的網站量身打造。

您已準備好推出一個能協助客戶並展現品牌形象的聊天體驗。

### 相關資源

* [設定 Zoom Contact Center 數位 Campaign](https://zoom.us/cci/index/admin#/admin-campaign-management)
* [將 Zoom Contact Center 功能整合至您的網站](/technical-library/zh-tw/shang-wu-fu-wu/zoom-contact-center/expert-insights/integrate-zoom-contact-center-features-into-your-website.md)
* [將 Campaign SDK 嵌入您的網站或行動應用程式](https://developers.zoom.us/docs/contact-center/web/chat/#embed-the-chat-client-with-a-campaign-id)


---

# 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 dynamically by asking a question.

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

```
GET https://library.zoom.com/technical-library/zh-tw/shang-wu-fu-wu/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.