> 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/shang-ye-ban-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/d52818c102debb0aae28e344fa069e235f531e6c" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

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

对于在桌面设备上访问你的聊天的用户，你可以选择三种窗口高度选项：

* **S：** 540 像素
* **M：** 650 像素， **默认**
* **L：** 780 像素

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

宽度始终固定为 420 像素，以确保可读性。
{% endhint %}

<figure><img src="/files/c70269d424347c95c8e9de2a407d26f0f7a8b8a4" 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/4f6882d6e30891e9064f363ceb7274f9185555e4" 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/1cc1ccd716742bec2226c85a0d20b583111066d0" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/2ca95f022ef151147163ed913e1c9f02c6c394af" 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/aa24c909e1dc677d34b8ad19aff0762570f329c0" alt="Image of a chat screen with header text only in the header bar." width="375"><figcaption></figcaption></figure>

若要采用流畅、极简的设计，你可以选择 **保持为空**，将用户的注意力集中在聊天上。

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

你可以使用 **选择标题背景和图标的任意颜色**，这有助于将你的聊天设计与你的网站关联起来。

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

如果更改背景颜色，请确保你仍然可以看到最小化和菜单图标。你可能还需要更改图标颜色。

<img src="/files/cfd1e7f095a1b235e2a90d02c7285575ef1cc0e7" 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/bee3764cb9b9a2e9a52778ef224cda9420e5d3df" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

#### <mark style="color:蓝色;">欢迎屏幕</mark>

此 **欢迎屏幕** 在 Zoom 呼叫中心和 Zoom Virtual Agent 中，是一个可选的介绍屏幕，会在聊天开始前显示，让你有机会向客户问候、收集他们的信息，并使体验与你的品牌相匹配。

这项功能在线可用于网页聊天体验。要配置，请点击 **聊天互动** 窗口，然后点击 **欢迎屏幕** 选项卡。

***

### 邀请设计

邀请是会在你的网站上启动支持体验的内容。最常见的是使用 [**悬浮式** 邀请类型](/technical-library/zh/shang-ye-ban-fu-wu/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts)，它是一个显示在你网站上的悬浮图标。当你的用户点击它时，聊天窗口会打开并开始他们的体验。

要创建或编辑邀请，请转到 Zoom 的 Web 管理员。

| 如果您正在使用…… | 然后点击……               |
| --------- | -------------------- |
| 呼叫中心      | 呼叫中心、活动管理。           |
| 虚拟代理      | AI Studio、虚拟代理、营销活动。 |

然后，单击 **+添加活动** 或打开现有活动的草稿。滚动到 **邀请** 部分以创建新的邀请。

<figure><img src="/files/0d97a76fdbb396a20431e80cf22756346d4f0c12" 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 中包含“结账”的所有页面。
* **选项 3：** 按设备设置定位。如果你不希望邀请图标出现在移动网站上，请取消勾选“mobile phone”选项下的“广告系列定位”。要进行设置，请点击 **活动**, **定向**.

Zoom Campaigns 提供一种 [**嵌入式邀请**](/technical-library/zh/shang-ye-ban-fu-wu/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) 选项，如果你不想使用默认的悬浮图标来启动聊天。这样你就可以把你站点上的任何元素，例如菜单中的按钮或页面上的链接，变成打开聊天窗口的触发器。

要做到这一点，你需要在你站点的 HTML 中创建该元素，并使用 Zoom Campaign SDK 将其连接到聊天。当用户点击该元素时，它会启动聊天窗口并开始该活动体验。你也可以根据需要使用你站点上已有的 HTML 来触发聊天窗口。

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

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

想同时拥有一个悬浮邀请图标，并通过你站点上的按钮点击来触发打开聊天吗？

使用悬浮邀请选项创建一个 Campaign，然后使用 [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/d87496f8f8ce273ce5e4de2826d3da431ea21468" 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/33c0a138d2b3df74c8a04d238878fabc48c336a5" 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 呼叫中心**，请点击以下内容：

1. 首选项
2. 客户体验
3. 默认流程消息头像和名称。

如果您正在使用 **仅限 Zoom Virtual Agent**，请点击以下内容：

1. AI Studio
2. 虚拟智能体
3. 聊天机器人
4. 设置

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

当您的客户在 Zoom 呼叫中心中从机器人转接到在线客服时，您还可以控制客服头像的显示方式。您可以选择显示来自呼叫中心的客服头像、其姓名首字母，或预设的头像图片。

设置时，请点击以下内容：

1. 首选项
2. 客户体验
3. 显示图片

***

### 其他聊天配置设置

#### <mark style="color:蓝色;">使用 Zoom Campaign SDK 控制网页聊天窗口</mark>

Zoom 呼叫中心（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 呼叫中心** 和 **Zoom Virtual Agent 首选项**.

#### <mark style="color:蓝色;">声音通知</mark>

默认情况下，当您的代理或虚拟代理在 web 聊天中发送消息时，消费者会听到通知声音。如果默认声音感觉会干扰您的品牌体验，您可以在下方将其关闭 **Zoom 呼叫中心** 或 **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/shang-ye-ban-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.