安装 Web Widget 以进行消息传送

我的服务模式是什么？

所有 Suite：

Team、Growth、Professional、Enterprise 或 Enterprise Plus

注意：本文章适用于使用 Web Widget 进行消息传送的帐户。如果您正在使用 Web Widget（经典），请参阅配置 Web Widget（经典）中的组件。

完成 Web Widget 的配置后，您可以将其安装在您的网站或帮助中心上，供客户使用。如果您想精确控制 Web Widget 显示的位置和方式，也可以嵌入 Web Widget。

本文章包含以下主题：

• 在网站上安装 Web Widget
• 在帮助中心安装 Web Widget
• 嵌入 Web Widget

在网站上安装 Web Widget

在网站上安装 Web Widget 需要对网站代码有一定了解，因为您需要将代码片段粘贴在 HTML 的 </body> 结束标签之前。

以下视频概述了如何在您的网站中添加消息传送：

在您的网站中添加消息传送 [1:40]

提示：您可以通过创建允许列表来进一步控制 Web Widget 的显示位置。请参阅使用允许列表控制 Web Widget 的显示位置。

将 Web Widget 添加到您的网站

1. 在管理中心，单击侧栏中的渠道 ()，然后选择消息传送和社交媒体 > 消息传送。
2. 单击您要安装的小组件名称。
3. 向下滚动，然后单击安装以展开。
4. 单击代码段框架的底部的复制图标（）。
5. 在要添加小组件的网页源代码中，将代码段粘贴到 HTML </body> 结尾工单标签前。将代码添加到您要显示小组件的每个网页。

   

6. 如果您想将代码发送给其他人（例如开发者），单击用电邮将代码发送给团队成员。
7. 确保您的防火墙已配置为允许显示 Web Widget。

在帮助中心安装 Web Widget

在帮助中心安装小组件非常简单，只需一键操作，无需技术支持。您必须创建并激活帮助中心，方可安装 Web Widget。

将 Web Widget 添加到帮助中心的步骤

1. 在管理中心，单击侧栏中的渠道 ()，然后选择消息传送和社交媒体 > 消息传送。
2. 单击您要安装的小组件名称。
3. 向下滚动，然后单击安装以展开。
4. 单击复选框以自动将 Web Widget 嵌入您的帮助中心。

   若您尚未创建并激活帮助中心，则此选项对您不可见。

   

5. 单击保存。

   小组件现已添加到您的帮助中心各页面。

嵌入 Web Widget

嵌入模式可将 Web Widget 置于页面特定 HTML 容器内，而不是显示为固定位置的浮动叠加项。小组件会自动适配所选容器的大小，同时支持您自主控制其具体显示位置和方式。这对于高级布局相当有用，例如并排显示对话列表和消息拆分视图等。

嵌入模式要求您使用 JavaScript 嵌入 API 调用来指定小组件的模式及目标容器。

要使用嵌入模式，需先禁用小组件的默认自动显示行为。

window.zEMessenger = {
  autorender: false
}

然后，指定容器 ID 或类别来设置小组件的显示位置：

zE('messenger', 'render', {
  mode: 'embedded',
  widget: {
    targetElement: '#messaging-container'
  }
});

Web Widget 现显示于 #messaging-container 元素内，其大小和位置由 CSS 定义。

有关更多信息，请参阅我们开发者文档中的 Web Widget 嵌入模式。要查看更多示例，请参阅 Zendesk 小组件的嵌入模式。