> 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 Virtual Agent

### 必要條件

[在您的網站或行動應用程式上嵌入 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。根據您選擇的聊天設計，會有建議的圖片尺寸——下方將進一步說明。
* **頭像：** 頭像是 bot 或客服人員的圖片表示。對於 bot 或系統訊息，請使用您的標誌，或能代表品牌的角色／頭像。這些圖示與網頁瀏覽器中的 favicon 類似，雖然很小，但若與公司品牌搭配得當，能讓體驗大不相同。頭像尺寸為 40x40 像素，您可以上傳 JPG/JPEG、PNG、SVG 或 GIF 檔案，大小上限為 2MB。

### 各部分

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

在 Campaigns 中，您將設定：

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

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

此外，您還會設定一個 **頭像**，也就是 bot 或客服人員的圖片表示。您的使用者將會看到這些代表品牌的 bot 或客服頭像。

### 打造您的聊天體驗

深入了解如何建立您的聊天體驗，包括尺寸、圖片、設計、訊息，以及其他設定選項。

{% 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 後，您可以從管理員 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.