> 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 中排除所有包含 "checkout" 的页面。
* **选项 3：** 按设备设置定向。如果您不希望邀请图标出现在移动网站上，请取消选中“移动电话”选项下的“Campaign Targeting”。要进行设置，请点击 **活动**, **定位**.

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>

我想要有一个邀请图标，这样我的用户可以随时开始聊天，但我也想在特定页面（例如我公司的定价页面）向我的客户发送主动消息。我要如何设置？

**答案**

你需要创建两个活动：一个用于整个网站上的标准邀请（“Campaign A”），另一个活动（“Campaign B”）用于你希望显示主动消息的页面。

对于每个活动，你需要定义活动位置，以确保它们不重叠。

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

Campaign A 的位置应排除“zoom.us/pricing”，而 Campaign 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>

默认情况下，当您的代理或虚拟代理在网页聊天中发送消息时，消费者会听到通知声音。如果默认声音让您的品牌体验显得有些打扰，您可以在以下位置将其关闭 **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.