Web Widget（经典）的高级自定义

我的服务模式是什么？

在所有 Suite 服务模式中可用在所有 Support 服务模式中可用

快速查看：管理中心 > 渠道 > 经典 > Web Widget

注意：本文章适用于使用 Web Widget（经典）的帐户。如果您使用的是消息传送 Web Widget，请参阅启用 Web Widget 以在网站或帮助中心提供消息传送。

管理员在管理中心完成 Web Widget（经典）组件的初始配置并与其开发者合作将 Web Widget（经典）添加到其网站后，可根据需要与其开发者合作以进一步自定义 Web Widget（经典）。

本文章面向管理员简要介绍了 Web Widget（经典）的高级自定义项。本文章旨在解答问题：“Web Widget（经典）有哪些其他用途？”，面向管理员介绍了自定义流程，并说明了 Web 开发者完成自定义工作所需的开发者文档。

如果您是 Web 开发者（或喜欢自己开发网站的管理员），并正在寻找关于本文章所述 API 设置和命令的完整文档，或其他代码示例，请参阅开发者文档的 Web Widget (Classic) API 部分。

本文章讨论了以下主题和小组件自定义项：

Web Widget（经典）自定义项规划
查找 Web Widget（经典）API 文档
以不同的语言显示小组件
使用用户联系信息预填表格
禁用工单附件
重新定位启动器
偏移小组件位置
自定义小组件元素的颜色
更改小组件中的可见顺序
禁止特定页面的功能
自定义小组件文本
添加主题行到联系表格
隐藏“查看原始文章”按钮
限制搜索结果
自定义帮助中心搜索占位符文本
Web Widget（经典）中 Talk 高级配置
Web Widget（经典）中 Chat 高级配置
为终端用户提供多种联系选项
多个 Web Widget（经典）元素的格式代码

有关将 Web Widget（经典）添加到网站的信息，请参阅使用 Web Widget（经典）在网站中嵌入客户服务。

Web Widget（经典）文档的完整列表参见 Web Widget（经典）资源。

Web Widget（经典）自定义项规划

Support 管理员大多不是网页开发者，需要与他人合作才能对 Web Widget（经典）进行自定义。他们不能自己对 Web Widget（经典）和网站进行自定义，因而与其公司的网页开发者或与其签订合同的外部开发者合作以进行更改。

作为进行自定义工作的人员，网页开发者通过在网站 HTML 中添加一些代码（Web Widget（经典）API）来完成该工作。但管理员在该工作中也要发挥一定作用。他们需要了解 Web Widget（经典）可以进行哪些自定义，并告诉网页开发者他们需要什么。

有些管理员具有 HTML 相关经验，并选择自己作为开发者进行自定义工作。这也可以。无论采用哪种方式，对于管理员而言，自定义 Web Widget（经典）实际上都是一个需要规划的过程，其中涉及以下步骤：

查看本文章信息以了解可以进行哪些高级自定义。
会见您公司的关键利益相关者，为您的 Web Widget（经典）创建一个需求列表。要使用什么颜色？您希望 Web Widget（经典）如何工作？
准备所需自定义项的列表。该列表应尽可能具体，并包含您的网页开发者可以参考的 API 文档链接。
将此列表交给您的网页开发者，他们将通过修改您网站的 HTML 来自定义 Web Widget（经典）。

查找 Web Widget（经典）API 文档

这里有些重要信息，可帮助开发者在 Zendesk 开发者网站上查找 Web Widget（经典）API 文档。

已更新并重组开发者文档和 API 语法— Web Widget（经典）API 语法已更改。我们还重组了 Web Widget（经典）API 开发者文档，以便您查找命令或设置。该文档现按产品渠道（Help Center、Tickets、Chat 和 Talk）或核心设置和命令进行组织。有关更多信息，请参阅开发者文档中的 Web Widget (Classic) API 部分。

新 Chat API—有关旧版 Chat (Zopim) API 如何映射到 Web Widget（经典）API 的信息，请参阅从 Chat 小组件语法迁移到统一的 Web Widget（经典）语法。

以不同的语言显示小组件

嵌入网站的 Web Widget（经典）默认以终端用户的语言显示文本，具体取决于其浏览器语言。例如，如果终端用户的浏览器语言设置为 de，即德语，则对于该用户，小组件将以德语显示。如果小组件已嵌入帮助中心，则会根据帮助中心语言设置显示文本。

Web Widget（经典）支持 Zendesk 支持语言的子集。如果 Web Widget（经典）不支持终端用户的浏览器语言，则将默认以英语显示。如果小组件无法从终端用户的浏览器获取语言，则将默认以 Zendesk Support 中指定语言显示。

您可以使用 setLocale 命令自定义小组件，使其始终以特定语言显示。此命令仅可设置小组件的语言，不会覆盖主页语言。

有关更多信息，请参阅开发者文档中的 setLocale 命令。

使用用户联系信息预填表格

您可以在联系表格中预填访问者的姓名、电邮地址和电话号码，从而节省您网站访问者的时间。联系表格包括工单表格、交谈前表格和 Chat 离线表格。使用 identify 和 prefill 设置。

您还可以使用 prefill 设置将用户信息设置为只读，这样可以避免同一人在 Support 中有重复的用户帐户。

有关更多信息，请参阅开发者文档中的 identify 和 prefill 设置。

禁用工单附件

默认情况下，如果您已启用工单附件，则用户可为从 Web Widget（经典）提交的工单添加附件。但您可根据需要禁用此选项。

有关更多信息，请参阅开发者文档中的 contactForm 对象的 attachments 设置。

重新定位启动器

Web Widget（经典）默认位于浏览器右下角，在用户单击其启动器后会向上展开。

您可以为 Web Widget（经典）选择一个随页面变化的位置（将其放在页面左侧或右侧，或将其移到页面顶部，以便其在单击后向下展开）。使用 position 设置将 Web Widget（经典）定位于页面左上角、右上角、左下角或右下角。

有关更多信息，请参阅开发者文档中的 position 设置。

偏移小组件位置

您可以使用 offset 设置在桌面或移动设备上重新定位 Web Widget（经典）。以初始 position 设置为参考点，使用 offset 设置从该位置（以像素为单位）水平和/垂直移动。

有关更多信息，请参阅开发者文档中的 offset设置。

自定义小组件元素的颜色

您可以从 Web Widget（经典）管理页面为 Web Widget（经典）（主题颜色）指定总体配色方案，并为启动器、联系人按钮和页首（主题文本颜色）指定自定义颜色（请参阅配置 Web Widget（经典）中的组件）。

但如果您想自定义特定元素，就需要使用 color 设置。您可以为这些 Web Widget（经典）组件各选择一种独特颜色：

启动器
按钮
按钮文本
结果列表
表头
文章链接

为便于无障碍访问，Web Widget（经典）使用一种算法自动调整颜色，以保证 WCAG 准则中指定最小对比度。

有关自定义 Web Widget（经典）元素颜色的更多信息，请参阅开发者文档中的 color 设置。

更改小组件中的可见顺序

您可以使用 zIndex 设置（Web Widget（经典）的核心设置之一）设置新值，并更改 Web Widget（经典）相对您网站相同位置所示其他元素的显示方式。

有关更多信息，请参阅开发者文档中的 zIndex 设置。

禁止特定页面的小组件功能

您可在 Web Widget（经典）中启用联系表格、Chat、Talk 和帮助中心，然后根据需要使用 suppress 设置更改您网站特定页面上提供的功能。

例如，您可以使用 suppress：

让帮助中心在某些页面上偏转
让 Chat 或联系表格在其他页面上没有偏转
为已登录并识别的用户提供分层服务级别

有关更多信息，请参阅开发者文档中的 suppress设置。

自定义小组件文本

您可以更改下表中的 Web Widget（经典）组件文本，也可以自定义帮助中心搜索占位符文本。

组件	详情
	对象：launcher 设置：chatLabel 描述：Chat 已启用但帮助中心未开启时启动器按钮上的文本默认文本：Chat
	对象：launcher 设置：label 描述：启动器按钮上的文本默认文本：帮助、支持或反馈（在 Web Widget（经典）管理员页面上定义）
	对象：helpCenter 设置：title 描述：帮助中心页面标题默认文本：帮助
	对象：contactForm 设置：title 描述：联系表格标题默认文本：给我们留言或联系我们（在 Web Widget（经典）管理员页面上定义）
	对象：helpCenter 设置：messageButton 描述：帮助中心表格中加载联系表格的按钮上的文本（不超过 20 个字符）默认文本：给我们留言或联系我们（在 Web Widget（经典）管理员页面上定义）
	对象：helpCenter 设置：chatButton 描述：帮助中心表格中所示加载 Chat 的按钮上的文本（不超过 20 个字符）默认文本：帮助、支持或反馈（在 Web Widget（经典）管理员页面上定义）

您可使用 translations 对象更改一些 Web Widget（经典）中显示的默认文本。翻译按功能（例如启动器、帮助中心和联系表格）分组。

注意：如果您为区域设置名称指定了通配符 (*)，该字符串将应用于所有区域设置。

您可以在 Zendesk 支持语言的语言代码中查看语言代码列表。

区域设置翻译由终端用户的浏览器语言触发。您还可以强制小组件始终以特定语言显示，并覆盖终端用户的浏览器语言设置。有关更多信息，请参阅以不同语言显示小组件。

添加主题行到联系表格

通过 contactForm 对象上的 subject 设置，您可以将 Web Widget（经典）设置为默认联系表格中包含标题字段。

默认联系表格旨在促进交流，并便于在填写联系表格时提供用户体验。虽然默认联系表格不包含标题行，但您可能需要添加标题行，以提升某些客户的支持体验。

有关更多信息，请参阅开发者文档中的 contactForm 对象的 subject 设置。

隐藏“查看原始文章”按钮

查看原始文章按钮可用于在 Web Widget（经典）中文章与帮助中心中文章之间切换。您可以使用 helpCenter 对象隐藏此按钮，并将 originalArticleButton 属性设置为 false。

有关更多信息，请参阅开发者文档中的 helpCenter 对象的 originalArticleButton 设置。

限制搜索结果

通过 helpCenter 对象上的 filter 设置，您可以根据类别、组别和标签限制从 Web Widget（经典）搜索的文章结果。有关更多信息，请参阅开发者文档中的 filter 设置。

向下滚动可查看开发者文档中未包含的示例，了解一些限制搜索结果的方法。

注意：要指定多个组别、类别或标签，请用逗号将值隔开（前后不需要空格）。

要将搜索限制于特定组别：

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        section: '200154474-Announcements'
      }
    }
  }
};
</script>

要将搜索限制于特定类别：

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General'
      }
    }
  }
};
</script>

要将搜索限制于多个类别的内容：

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '115000669485,201742209' 
      }
    }
  }
};
</script>

要将搜索限制于带有特定标签的内容：

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        label_names: 'orders'
      }
    }
  }
};
</script>

要将搜索限制于特定类别并带有特定标签的内容：

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General',
        label_names: 'Label One,Label Two,Label Three'
      }
    }
  }
};
</script>

自定义帮助中心搜索占位符文本

帮助中心搜索框中的默认占位符文本：“请问您需要什么帮助？”您可以自定义此文本，使其与用户的语言匹配，或以某些语言显示特定文本。有关更多信息，请参阅开发者文档中的 searchPlaceholder 设置。

如果上下文帮助已启用，您还可以配置 Web Widget（经典）以打开推荐文章，更便于您的客户更进行自助服务。有关更多信息，请参阅开发者文档中的 helpCenter 对象的 setSuggestions 命令。

Web Widget（经典）中 Talk 高级配置

您可创建多个配置，以定义 Talk 在 Web Widget（经典）中的行为。通过各项配置，您可以根据自己的需求和偏好，自定义 Web Widget（经典）中 Talk 的呼叫转移和显示选项。

您可在每个配置中自定义的关键属性包括：

您要 Web Widget（经典）回拨请求所转接到的专员组
Web Widget（经典）回拨请求的优先级
在 Web Widget（经典）中显示“请求回拨”和/或“给我们打电话”选项
在 Web Widget（经典）中显示预计等待时间

如果您在 Web Widget（经典）中仅创建了一个 Talk 配置，只要 Talk 可用，这将自动成为 Web Widget（经典）中显示的默认配置。

如果您在 Web Widget（经典）中创建了多个 Talk 配置，可使用 Talk“nickname”设置来查找所需的配置。

注意：Talk 配置设置 API 请求中的“nickname”必须与您的 Talk 配置昵称完全匹配，包括空格和大小写。

有关更多信息，请参阅开发者文档中的 Talk 对象、nickname 设置，以及为 Web Widget（经典）配置 Zendesk Talk 设置。

Web Widget（经典）中 Chat 高级配置

如果您使用的是 Web Widget（经典）中的实时在线交谈，可在 Web Widget（经典）中提供 Zendesk Chat 功能，以便您网站的访问者与专员在线交谈，并发送和接收可能有助于解决其问题的文件。专员还可以主动向访问者发送消息，以了解他们是否需要任何帮助。

有关更多信息，请参阅开发者文档中的 chat 对象。

通过整合 Web 和 Chat 小组件，您可使用以下设置进一步自定义 chat 对象：

有关旧版 Chat (Zopim) API 如何映射到 Web Widget（经典）API 的信息，请参阅从 Chat 小组件语法迁移到统一的 Web Widget 语法。

为终端用户提供多种联系选项

您可以允许终端用户选择一种联系选项。您可能需要自定义您的网站，以便页面允许或不允许终端用户进行选择。具体行为取决于为 Web Widget（经典）配置的是 Chat 还是 Talk，以及在线交谈专员是否在线。您可以根据需要自定义联系选项的默认文本。

以下是默认文本列表：

联系选项	默认文本
联系按钮	联系我们
在线交谈标签（专员在线）	实时在线交谈
在线交谈标签（专员离线）	在线交谈不可用
联系表格标签	给我们留言

有关更多信息，请参阅开发者文档中的 contactOptions 设置。

通过 Chat 提供联系选项

如果 Web Widget（经典）配置了 Chat，且在线交谈专员有空，则终端用户将自动转接到在线交谈。但是，即使在线交谈专员有空，您也可以允许终端用户选择是与专员在线交谈还是填写联系表格。如果在线交谈专员在用户单击启动器时有空，但在在线交谈开始前退出，则终端用户可能会收到专员没空的消息。

一个已知问题是终端用户选择在线交谈后无法使用返回按钮返回到其他联系选项。为此，他们需要完全结束在线交谈或刷新页面。

通过 Talk 提供联系选项

如已在 Web Widget（经典）中启用 Talk 和其他联系选项，且专员在线，则联系选项将自动启用。

多个小组件组件的格式代码

注意：本部分仅供说明之用。Zendesk 不支持并不保证该代码。Zendesk 也无法提供对第三方技术（例如 JavaScript、jQuery 或 CSS）的支持。请将您遇到的任何问题发布在评论部分，或尝试在线搜索解决方案。

特定于联系表格、帮助中心和 Zendesk Chat 的项目嵌套在您网站 HTML 中相应标题（contactForm、helpCenter 和 chat）下，而全局项目则单独包含在内。

例如，这些自定义项定义如下：

Web Widget（经典）在屏幕上的位置已使用 offset（偏移）设置进行了更改。Offset（偏移）是一个全局项目，因而有其自己的条目。
帮助中心搜索不包含“查看原始文章”按钮。标题对于英语用户是“搜索帮助”，对于所有其他语言用户则是“欢迎发表意见”。
在线交谈已禁用。
联系表格的标题对于英语用户是“给我们发送消息”，对于其他语言则是“联系我们”。
启动器按钮文本对于英语用户是“发出请求”，对于其他语言则是“获取帮助”。

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    offset: { horizontal: '400px', vertical: '400px' },
    helpCenter: {
      originalArticleButton: false,
      title: {
        'en-US': 'Search for help',
        '*': 'Have your say'
      }
    },
    chat: {
      suppress: true
    },
    contactForm: {
      title: {
        'en-US': 'SMessage us',
        '*': 'Contact us'
      }
    },
    launcher: {
      label: {
        'en-US': 'Make a request',
        '*': 'Get help'
      }
    }
  }
};
</script>