> 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 的 Web 管理後台。

| 如果您正在使用⋯ | 然後點擊⋯              |
| -------- | ------------------ |
| 聯絡中心     | 聯絡中心、活動管理。         |
| 虛擬代理     | 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 像素乘 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 乘 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 的 Web 管理後台。

| 如果您正在使用⋯ | 然後點擊⋯              |
| -------- | ------------------ |
| 聯絡中心     | 聯絡中心、活動管理。         |
| 虛擬代理     | 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>

對於在使用者尚未連接客服之前所發送的訊息（例如歡迎訊息或虛擬代理程式），您可以在所有體驗中設定一個預設頭像，或針對每個個別聊天流程設定不同的頭像。這讓您能彈性地保持一致，或針對不同品牌或使用情境量身打造體驗。

如果您正在使用 **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.