Web Widget 的高级自定义
当管理员从 Zendesk Support 界面完成对 Web Widget 组件的初始配置,并与其开发者一同添加 Web Widget 到其网站之后,他们可以按需与其开发者一同进一步自定义 Web Widget。
这篇文章是面向管理员的概览,说明了使用 Web Widget 可以进行哪些高级自定义。这篇文章旨在回答这样一个问题:“我还可以用 Web Widget 做些什么?”它介绍了面向管理员的自定义流程,同时也指明了开发者工作所需的开发者文档。
如果您是一名网站开发者(或者是一名可以自行进行网站开发工作的管理员),如果您正在寻找这篇文章中所述的关于 API 设置和命令的完整文档,或者其它代码示例,请参阅《用于 Web Widget API 的开发者文档》。
这篇文章讨论了以下主题和小组件的自定义:
如需将 Web Widget 添加到您的网站的信息,请参阅《在您的网站中使用 Web Widget 以嵌入客户服务》。
如需完整的 Web Widget 文档列表,请参阅《Web Widget 资源》。
为 Web Widget 自定义做准备
大多数 Support 管理员并不是网站开发者,而是与他人合作,实施对 Web Widget 的自定义。他们不会自行自定义 Web Widget 和网站。他们与公司内部的网站开发者合作,或者以合约方式雇用公司外部的开发者来实施更改。
网站开发者负责自定义工作,方法是添加代码(Web Widget API)到网站的 HTML 中。然而,管理员仍在此工作中起着重要的作用。他们需要了解 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 JavaScript API 发布公告》。
已更新且整齐有序的开发者文档 —— 我们还重新整理了 Web Widget API 开发者文档,使您可更方便地找到所需的命令或设置。文档现已根据产品渠道(帮助中心、工单、Chat 和 Talk)或根据核心设置与命令进行组织。如需更多信息,请参阅《Web Widget API 的开发者文档》。
全新 Chat API —— 如需关于如何将旧的 Chat(Zopim)API 映射至新的 Web Widget API 的信息,请参阅《从 Chat 小组件语法迁移到统一的 Web Widget 语法》。
以另一种不同的语言显示小组件
Web Widget 默认以终端用户的语言显示文本,根据的是该用户浏览器的语言。例如,如果终端用户浏览器的语言设置为德语(de),则小组件将对该用户以德语显示。
Web Widget 支持 Zendesk 支持的语言的子集。如果终端用户的浏览器语言不受 Web Widget 支持,则小组件默认显示为英语。如果小组件无法从终端用户的浏览器得知其语言,则小组件默认以 Zendesk Support 中指定的语言显示。
您可以自定义小组件,使其始终以特定语言显示,方法是使用 setLocale 命令。此命令仅设置小组件的语言,不会替代您主页面的语言。
如需更多信息,请查阅关于 setLocale 命令的开发者文档。
使用用户联系信息预填表格
禁用工单附件
如果您已对工单启用附件,则用户默认可以附加文件到提交自 Web Widget 的工单中。然而,您也可以按需禁用此选项。
如需更多信息,请查阅关于 contactForm 对象的 attachments 设置的开发者文档。
调整小组件位置
偏移小组件位置
自定义小组件元素的颜色
您可以从 Web Widget 管理页面指定 Web Widget 的整体配色方案(主题颜色),以及用于启动器、联系按钮和页首中的文本的自定义颜色(主题文本颜色)(请参阅《配置 Web Widget 中的组件》)。
然而,如果您要自定义特定的元素,则需要使用 color 设置。您可以为每个 Web Widget 组件选择独特的颜色:
- 启动器
- 按钮
- 按钮文本
- 结果列表
- 页首
- 文章链接
出于对无障碍设计的考虑,Web Widget 会使用算法来自动调整颜色,以确保符合 WCAG 指南规定的最小对比度比率。
如需了解更多关于自定义 Web Widget 元素颜色的信息,请查阅关于 color 设置的开发者文档。
更改小组件中的可见排序
禁止特定页面的小组件功能
自定义小组件文本
您可以更改下表中的 Web Widget 组件的文本,也可以自定义帮助中心搜索占位符文本。
组件 | 详情 |
---|---|
![]() |
对象:launcher 设置:chatLabel 描述:当 Chat 已启用且帮助中心未启用时,启动器按钮上的文本默认文本:Chat |
![]() |
对象:launcher 设置:label 描述:启动器按钮上的文本 默认文本:帮助、支持或反馈(在 Web Widget 管理员页面中予以定义) |
![]() |
对象:helpCenter 设置:title 描述:帮助中心页面的标题 默认文本:帮助 |
![]() |
对象:contactForm 设置:title 描述:联系表格的标题默认文本:给我们留言或联系我们(在 Web Widget 管理员页面中予以定义) |
![]() |
对象:helpCenter 描述:帮助中心表格中的按钮文本,会加载联系表格(限于 20 个字符内) 默认文本:给我们留言或联系我们(在 Web Widget 管理员页面中予以定义) |
![]() |
对象:helpCenter 设置:chatButton 描述:帮助中心表格中显示的按钮文本,会加载 Chat(限于 20 个字符内)默认文本:帮助、支持或反馈(在 Web Widget 管理员页面中予以定义) |
您可使用 translations 对象来更改 Web Widget 中显示的某些默认文本。翻译根据功能来分组 —— 例如:启动器、帮助中心和联系表格。
您可以在《Zendesk 支持的语言的语言代码》中浏览语言代码列表。
区域设置的翻译根据终端用户的浏览器语言触发。您也可以强制小组件始终以特定语言显示,替代终端用户浏览器的语言设置。如需更多信息,请参阅《以另一种不同的语言显示小组件》。
添加主题行到联系表格
使用 contactForm 对象中的 subject 设置,您可以设置 Web Widget 以便在默认联系表格中包括标题字段。
默认联系表格旨在促进参与,并在用户完成联系表格时,提供精简的用户体验。尽管默认联系表格不包含标题行,您可能想要添加标题行以提升面向某些客户的支持体验。
如需更多信息,请查阅关于 contactForm 对象的 subject 设置的开发者文档。
隐藏“查看原始文章”按钮
查看原始文章按钮是连系 Web Widget 中的文章与帮助中心本身的文章的桥梁。您可以使用 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 对象、nickname 设置的开发者文档,以及《配置 Zendesk Talk 设置以用于 Web Widget》。
Web Widget 中 Chat 的高级配置
您可以添加 Zendesk Chat 功能到 Web Widget 中,以便使您的网站访问者与专员进行在线交谈,以及发送和接收有助于解决其问题的文件。专员也可主动发送消息给访问者,看看访问者是否需要任何帮助。
如需更多信息,请查阅关于 chat 对象的开发者文档。
新功能
Zendesk 正在将 Chat 功能添加到 Web Widget 中,该功能以前仅在旧版的 Chat(Zopim)小组件中可用。要使用这些新功能,您必须使用全新的 Web Widget 整合的 Chat 体验。
如需更多关于这些更改的信息,请参阅《从这里开始:Web Widget 整合的 Chat 体验 —— 早期试用计划(EAP)》。
如需关于如何将旧的 Chat(Zopim)API 映射至新的 Web Widget API 的信息,请参阅《从 Chat 小组件语法迁移到统一的 Web Widget 语法》。
为终端用户提供多个联系选项
您可允许终端用户选择一个联系选项。您可能需要对网站进行自定义,使某些页面允许终端用户进行选择,某些页面不允许。确切的行为取决于 Chat 或 Talk 是否已配置用于 Web Widget,以及是否有可交谈专员在线。您可按需自定义联系选项的默认文本。
以下是默认文本列表:
联系选项 | 默认文本 |
---|---|
联系按钮 | 联系我们 |
在线交谈标签(专员在线) | 实时在线交谈 |
在线交谈标签(专员离线) | 在线交谈不可用 |
联系表格标签 | 给我们留言 |
如需更多信息,请查阅关于 contactOptions 设置的开发者文档。
通过 Chat 提供联系选项
如果 Chat 已配置用于 Web Widget,终端用户将自动转接到在线交谈中,如果有可交谈专员有空的话。然而,您可允许终端用户选择是与专员在线交谈还是完成联系表格,即使有可交谈专员有空。如果当用户单击启动器时有可交谈专员有空,但专员在在线交谈开始之前就退出了,则终端用户可能会看到一条消息,表明专员没空。
这是一个已知问题 —— 当终端用户选择进行在线交谈时,他们无法使用返回按钮回到其它联系选项。要这样做,他们必须完全退出在线交谈,或刷新页面。
通过 Talk 提供联系选项
如果 Talk 和其它联系选项已在 Web Widget 中启用,并且有专员在线,则联系选项将自动启用。
用于多个小组件的组件的格式化代码
特定用于联系表格、帮助中心和 Zendesk Chat 的项目位于您网站 HTML 中的对应标题(contactForm、helpCenter 和 chat)下,而全局项目则单独列出。
- Web Widget 在屏幕上的位置已使用 offset 设置进行更改。Offset 是一个全局项目,因此有其自己的条目。
- 帮助中心搜索 —— 不含“查看原始文章”按钮。对于英语用户,标题为“Search for help”,对于所有其它语言的用户,则为“Have your say”。
- Chat 已禁用。
- 英语的联系表格标题为“Message us”,其它语言则为“Contact us”。
- 英语的启动器按钮文本为“Make a request”,其它语言则为“Get help”。
<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>
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
0 Kommentare