> 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/build-your-chat-experience.md).

# 打造您的聊天體驗

Zoom 的工具讓您能以極少甚至無需程式碼，輕鬆自訂並啟用您的聊天體驗。

### 聊天互動視窗

聊天互動視窗是您的使用者與虛擬代理或真人代理傳送訊息的介面。使用 Zoom 的工具，您可以建立一個容易看見、方便互動，且符合貴公司品牌的聊天視窗。

若要建立或編輯您的聊天互動視窗，請前往 Zoom 的網頁管理後台。

| 如果您正在使用... | 然後點擊...             |
| ---------- | ------------------- |
| 聯絡中心       | 聯絡中心、活動管理。          |
| 虛擬代理人      | AI Studio、虛擬代理人、活動。 |

然後點擊 **+新增活動** ，或開啟現有活動的草稿。捲動到 **聊天互動視窗** 區段以建立或編輯您的視窗。

#### <mark style="color:藍色;">視窗大小與行動版體驗</mark>

Zoom 的聊天互動視窗具有回應式設計，這表示當使用者從桌機或智慧型手機存取您的網站時，它會自動調整版面配置。

在行動裝置上，聊天視窗會以全螢幕開啟，以最大化有限的螢幕空間，並確保乾淨且易讀的體驗。

<figure><img src="/files/b805c7e17a84d0aa018c2d6a99c401503bcced98" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

<figure><img src="/files/f67fd00016bc8b16ce933973701035746856b2bf" alt="" width="375"><figcaption></figcaption></figure>

對於使用桌機裝置存取聊天的使用者，您可以從三種視窗高度大小選項中選擇：

* **S：** 540 像素
* **M：** 650 像素， **預設**
* **L：** 780 像素

{% hint style="info" %}
**注意**

寬度固定為 420 像素，以確保可讀性。
{% endhint %}

<figure><img src="/files/014b2b9603e84e813b96477156ff6f7ea290f172" alt="Image of desktop Zoom Virtual Agent window, opened in the lower right corner of the window."><figcaption></figcaption></figure>

#### <mark style="color:藍色;">標題列</mark>

這項 **聊天標題列** 是聊天設計中的關鍵元素。若設計得當，它能讓使用者了解支援體驗的預期內容，並對對話更有信心。您可以使用標題列分享有關支援團隊的資訊，和／或加入品牌標誌或色彩。

Zoom CX 提供多種標題設計選項供您選擇。

**完整標題圖片**

新增一張 426 x 95 像素的圖片，填滿整個標題空間，非常適合自訂設計。

<figure><img src="/files/4462aa0de8de375161447a825b5c20361e3aa96e" alt="This image shows a chat window with a blue gradient header that says Zoom Virtual Agent. The image fills the header space." width="375"><figcaption></figcaption></figure>

**頭像圖片大小**

新增一張 40 x 40 像素的圖片，顯示在標題列中，可單獨顯示或與標題文字並列顯示。

{% columns %}
{% column %}

<figure><img src="/files/e2a049601cfd85deb730ee6d7acc36785ecdcebb" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/f67fd00016bc8b16ce933973701035746856b2bf" alt="Image of a chat screen with Zoom logo and header text in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

**僅標題文字**

分享一則簡短說明，例如團隊名稱、可用時間或支援時段。您可以使用 H1、H2、H3 或內文段落大小來控制標題文字的大小。

<figure><img src="/files/ef89223e40469e0a24e929cf623bd56eda60350a" alt="Image of a chat screen with header text only in the header bar." width="375"><figcaption></figcaption></figure>

若要採用更簡潔、極簡的設計，您可以選擇 **保持空白**，讓使用者專注於聊天。

<figure><img src="/files/00ae74cd3413c5db1cbea3a0282e1a696ec79128" alt="Image of a chat screen with nothing in the header bar." width="375"><figcaption></figcaption></figure>

您可以 **為標題背景與圖示選擇任意顏色**，這有助於將聊天設計與您的網站一致化。

{% hint style="warning" %}
**提醒**

如果您變更背景顏色，請確保仍能看見最小化與選單圖示。您也可能需要同時變更圖示顏色。

<img src="/files/06236df2a3fdcd6fb8b6eb34f3d36d777c2a170c" alt="Image of a chat screen with a blue header bar, with no logo or text." data-size="original">
{% endhint %}

#### <mark style="color:藍色;">聊天泡泡、文字、圖示等的顏色</mark>

互動視窗建立工具可讓您選擇聊天所需的精確顏色。您會為視窗的每個部分輸入十六進位色碼，並查看預覽以確認外觀。

Zoom 提供範本供您開始使用。為了讓畫面看起來更好且容易閱讀，請遵循品牌色彩，並確保文字與背景色之間有足夠對比。

<figure><img src="/files/2a945d51e5278f42456b3b6460afba28f16411dd" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

#### <mark style="color:藍色;">歡迎畫面</mark>

這項 **歡迎畫面** 在 Zoom Contact Center 和 Zoom Virtual Agent 中，這是聊天開始前出現的可選介紹畫面，可讓您向客戶問候、收集資訊，並讓體驗符合您的品牌。

這適用於網頁聊天體驗。若要設定，請點擊 **聊天互動** 視窗，然後點擊 **歡迎畫面** 分頁。

***

### 邀請設計

邀請是會在您的網站上啟動支援體驗的內容。最常見的做法是使用 [**固定式** 邀請類型](/technical-library/zh-tw/shang-wu-fu-wu/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts)，也就是顯示在您網站上的浮動圖示。當使用者點擊它時，聊天視窗會開啟並開始其體驗。

若要建立或編輯邀請，請前往 Zoom 的網頁管理後台。

| 如果您正在使用... | 然後點擊...             |
| ---------- | ------------------- |
| 聯絡中心       | 聯絡中心、活動管理。          |
| 虛擬代理人      | AI Studio、虛擬代理人、活動。 |

然後，點擊 **+新增活動** ，或開啟現有活動的草稿。捲動到 **邀請** 區段以建立新的邀請。

<figure><img src="/files/f4e4274fdd1d07f17a47c3c6c282e001ae64553b" alt="Image of a Zoom Support window that says &#x22;Hello! How can we help?&#x22;" width="375"><figcaption></figcaption></figure>

您可以為您的 **固定式邀請** 圖示設定以下選項：

* **按鈕大小：** 您的聊天邀請圖示大小應該足夠大，才能容易被注意到並點擊或輕觸，但也不能大到干擾使用者體驗或遮住重要內容。Zoom 提供三種邀請大小：
  * **S：** 40 像素
  * **M：** 56 像素， **預設**
  * **L：** 72 像素
* **按鈕顏色：** 請選擇與您網站背景形成高對比的按鈕顏色。我們建議遵循 [WCAG 2.1 指引](https://www.w3.org/TR/WCAG21/#contrast-minimum)，也就是使用者介面（UI）元件與其背景之間至少 3:1 的對比比例，例如圖示與按鈕。
* **圖示：** 圖示可幫助使用者了解點擊按鈕後可以期待什麼。Zoom 提供一些預設設計供您選擇，表示可開始聊天。您也可以使用 SVG 檔加入自己的自訂圖示。SVG 檔案必須小於 10MB。
* **角落圓角：** 您希望邀請圖示看起來多圓潤或多方正？請查看您的網站是否已有按鈕外觀的樣式，或詢問品牌團隊是否有偏好。使用較小的角落圓角，例如 8 像素，會讓您的邀請更方正。較大的角落圓角，例如 28 像素，會讓您的邀請更圓潤。
* **為您的邀請加入文字：** 為邀請按鈕加入文字標籤，會讓它更清楚、更具吸引力。使用者會立刻知道按鈕用途，因此不必猜測圖示代表什麼。不過，這也會占用更多空間，並可能讓畫面顯得雜亂，尤其是在行動裝置上。請務必考量您的受眾以及他們最常使用的裝置。若要加入字型，您可以從預設字型選項 Arial、Georgia、Tahoma 或 Verdana 中選擇；或者使用 TTF 檔上傳您自己的自訂字型。

#### <mark style="color:藍色;">**頁面上的邀請位置**</mark>

支援邀請圖示最常見的位置是右下角，距離底部與側邊各 20 像素。這通常容易被注意到，同時不會遮擋主要內容。

我們建議您在桌機與行動裝置上都檢視自己的網站。如果您的網站在此位置已經有橫幅或按鈕，可能會影響客戶的使用體驗，或干擾使用流程。

如果在聊天邀請圖示所在的同一位置，您已經有某個元素（例如 cookie 橫幅、導覽列或其他小工具），請考慮改變左對齊或右對齊，或調整與底部或側邊的偏移量。

{% hint style="success" %}
**範例**

如果您發現聊天邀請按鈕在行動裝置上遮住了頁面底部的重要連結，請增加偏移量，直到邀請圖示不再遮住該元素。
{% endhint %}

您也可以啟用「讓消費者可拖曳並移動邀請」，讓使用者能更靈活地在頁面上移動圖示。

#### <mark style="color:藍色;">常見問題</mark>

聊天邀請圖示在行動裝置上的某個特定頁面會遮擋或干擾使用者。我有哪些選項？

**回答：**

您可以透過幾種方式達成這個目的。

* **選項 1：** 變更邀請圖示在頁面上的位置。您可以使用偏移量與位置選項來移動頁面上的邀請位置。這是透過編輯邀請來設定的。
* **選項 2：** 根據頁面位置顯示或隱藏聊天圖示。如果您想針對所有結帳頁面完全移除聊天邀請，請編輯位置以排除結帳頁面。例如，您可以排除所有 URL 中包含「checkout」的頁面。
* **選項 3：** 依裝置設定目標對象。如果您不希望邀請圖示出現在行動版網站上，請在活動目標設定中取消勾選「mobile phone」選項。若要設定，請點擊 **活動**, **目標設定**.

Zoom Campaigns 提供 [**嵌入式邀請**](/technical-library/zh-tw/shang-wu-fu-wu/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) 選項，若您不想使用預設的固定式圖示來啟動聊天。這可讓您將網站上的任何元素，例如選單中的按鈕或頁面上的連結，變成開啟聊天視窗的觸發器。

若要這麼做，您需要在網站的 HTML 中建立該元素，並使用 Zoom Campaign SDK 將其連結至聊天。當使用者點擊該元素時，它會啟動聊天視窗並開始活動體驗。若您偏好，也可以使用網站上既有的 HTML 來觸發聊天視窗。

<figure><img src="/files/476b8d6ef82bd3a72f730a753b0c34f73e274278" alt="Image of the Create Embedded Invitation screen." width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**提醒**

想同時使用固定式邀請圖示，並透過您網站上的按鈕點擊來觸發開啟聊天嗎？

使用固定式邀請選項建立一個活動，然後使用 [Zoom 的 Campaign SDK](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) 來觸發開啟聊天。
{% endhint %}

***

### 主動訊息

如果您想用更積極的方式吸引使用者注意，讓他們與您的團隊或虛擬代理聊天呢？Zoom 的主動訊息功能可讓您設定讓企業主動與訪客展開對話，而不是等客戶點擊邀請後才開始聊天。

#### <mark style="color:藍色;">運作方式</mark>

* **更佳互動：** 您可以在適當時機吸引人們的注意並提供協助。
* **更多潛在客戶：** 自訂訊息與按鈕可鼓勵人們透過與代理聊天來了解更多資訊，或留下聯絡資料以便後續聯繫。
* **更快速的支援：** 快速將訪客連接到機器人或真人代理，讓他們立即獲得答案。

當使用者進入已啟用主動訊息的頁面時，他們會收到一則訊息，並可點擊按鈕來啟動特定流程。

#### <mark style="color:藍色;">設定位置</mark>

此功能可在 **活動**下設定，並適用於使用 **固定式** 邀請類型

#### <mark style="color:藍色;">鎖定您的使用者</mark>

您可以將主動訊息設定為延遲顯示，這樣它只會出現在已停留在該頁面達特定時間的使用者身上。您也可以選擇讓使用者在 24 小時內只看到一次訊息，或是在使用者重新整理頁面或造訪另一個相符頁面時，讓主動訊息再次出現。

<figure><img src="/files/fe9025e17c51eade7e4235d97ecd596d806c6399" alt="Image of a Zoom Campaign window that asks &#x22;How can I help&#x22;." width="191"><figcaption></figcaption></figure>

#### <mark style="color:藍色;">常見問題</mark>

我想要有一個邀請圖示，讓使用者隨時都能開始聊天，但也想在特定頁面（例如我公司的定價頁面）向客戶傳送主動訊息。我該如何設定？

**回答**

您需要建立兩個活動：一個用於整個網站上的標準邀請（「活動 A」），另一個活動（「活動 B」）則用於您希望顯示主動訊息的頁面。

對每個活動，您都要定義活動位置，使其不要重疊。

{% hint style="success" %}
**範例**

活動 A 的位置應排除「zoom.us/pricing」，而活動 B 的位置應包含「zoom.us/pricing」。如此一來，造訪任何包含「zoom.us」的 URL 的使用者都會看到一般邀請，而造訪特定頁面「zoom.us/pricing」的使用者則會看到主動訊息彈出。
{% endhint %}

***

### 頭像

頭像是在網頁聊天中顯示於訊息旁的圖片。它有助於為對話增添個性並強化品牌形象。

<figure><img src="/files/d597751172e3dc2cbcea430ec3beb46d26b3cd5c" alt="Image of the Zoom Virtual Agent avatar, including a picture of a woman with dark hair and a headset." width="375"><figcaption></figcaption></figure>

對於在使用者連線到代理之前送出的訊息（例如歡迎訊息或 Virtual Agent），您可以在所有體驗中設定單一預設頭像，或為每個個別聊天流程設定不同的頭像。這讓您能靈活地維持一致性，或針對不同品牌或使用情境量身打造體驗。

如果您正在使用 **Zoom Contact Center**，請點擊以下：

1. 偏好設定
2. 消費者體驗
3. 預設流程訊息頭像與名稱。

如果您正在使用 **僅限 Zoom Virtual Agent**，請點擊以下：

1. AI Studio
2. 虛擬代理
3. 聊天機器人
4. 設定

<figure><img src="/files/9d050d0a606f4b38840575362de783f84e8cc839" alt="Side-by-side image of the Customize Name and Avatar screen and a rendering of the settings."><figcaption></figcaption></figure>

當您的客戶從機器人轉接到 Zoom Contact Center 的真人代理時，您也可以控制代理頭像的顯示方式。您可以選擇顯示 Contact Center 中的個人頭像、姓名縮寫，或指定的頭像圖片。

若要設定，請點擊以下：

1. 偏好設定
2. 消費者體驗
3. 顯示圖片

***

### 其他聊天設定

#### <mark style="color:藍色;">使用 Zoom Campaign SDK 控制網頁聊天視窗</mark>

Zoom Contact Center（ZCC）與 Zoom Virtual Agent（ZVA）Campaign SDK 讓開發人員能更精確控制網頁聊天的運作與其與網站的互動方式。它可讓您根據使用者動作、頁面情境或自訂邏輯，以程式方式開啟、關閉並控制聊天行為。

例如，您可以設定在使用者停留在頁面上特定秒數後，或點擊特定按鈕時，自動開啟聊天視窗。

請參閱 [Zoom 開發者文件 SDK 參考](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) 以取得更多詳細資訊。

#### <mark style="color:藍色;">網站層級的聊天持續性</mark>

聊天持續性可控制使用者的聊天工作階段在他們瀏覽網站不同頁面時是否會延續。

* **當持續性&#x20;*****已啟用*****&#x20;（預設）：** 同一個聊天會在各頁面間保持開啟，因此使用者可以不中斷地繼續對話。
* **當持續性&#x20;*****已停用*****:** 當使用者導向新頁面時，聊天不會延續，除非該頁面明確屬於第一個活動所定義的位置。

這項變更讓同一網域上有多個品牌或部門的企業更容易將聊天活動分開。它可防止使用者在無關頁面之間延續同一個聊天，並減少手動設定的需求。

您可以在 **Zoom Contact Center** 與 **Zoom Virtual Agent 偏好設定**.

#### <mark style="color:藍色;">音效通知</mark>

預設情況下，當您的代理或虛擬代理在網頁聊天中送出訊息時，使用者會聽到通知音效。如果預設音效讓您的品牌體驗感到干擾，您可以在 **Zoom Contact Center** 或 **Zoom Virtual Agent 偏好設定**.

使用者仍可在聊天選單中視需要重新啟用它們。


---

# 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/build-your-chat-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.