管理员完成后Web Widget中组件的初始配置(经典)从管理中心和他们的开发人员一起工作添加Web Widget(经典)到他们的网站,如果需要,他们可以与开发人员一起进一步定制Web Widget(经典)。
本文概述了使用Web小部件(经典)可以进行哪些高级定制。本文旨在回答以下问题:“我还可以用我的Web小部件(经典)做什么?”它解释了管理员的定制过程,也指出了web开发人员需要的开发文档,以便完成工作。
如果你是一个web开发人员(或者是一个可以自己做网站开发的管理员),并且正在寻找关于本文中描述的API设置和命令的完整文档,或者其他代码示例,请参见Web小部件(经典)API的开发者文档代替。
本文讨论这些主题和小部件定制:
有关将Web小部件(经典)添加到站点的信息,请参见使用Web小部件(经典)在您的网站中嵌入客户服务.
有关Web小部件(经典)文档的完整列表,请参见Web小部件(经典)资源亚博电脑端.
Web小部件(经典)定制计划
大多数支持管理员不是web开发人员,他们与其他人一起实现web小部件的自定义(经典)。他们不会自己定制Web Widget(经典)和网站。他们与自己公司的web开发人员合作,或者与外部开发人员合作来实现这些更改。
web开发人员是做定制工作的人,他们通过向网站的HTML中添加一些代码(web Widget (Classic) API)来完成定制工作。但是,管理员仍然在工作中发挥作用。他们需要了解Web小部件(经典)可以进行哪些定制,并告诉Web开发人员他们想要什么。
有些管理员有使用HTML的经验,他们选择自己做定制工作,充当自己的开发人员,这很好。无论哪种方式,定制Web小部件(经典)实际上是管理员的一个过程,需要一些计划,包括以下步骤:
- 回顾本文中的信息,了解哪些高级定制是可能的。
- 与公司的主要利益相关者会面,为您的Web Widget(经典)创建一个需求列表。你想用什么颜色?您希望Web小部件(经典)如何表现?
- 准备一个所需定制的列表。尽可能具体,包括API文档的链接,供web开发人员参考。
- 把这个列表交给你的web开发人员,他们将通过修改你网站的HTML来定制web Widget(经典)。
浏览Web小部件(经典)API文档
这里有一些重要的信息,可以帮助开发人员浏览Zendesk开发人员网站上的Web Widget(经典)API文档。亚博
更新,有组织的开发人员文档和API语法Web Widget (Classic) API语法已经改变,我们还重新组织了Web Widget (Classic) API开发人员文档,以便更容易找到您正在寻找的命令或设置。文档现在按产品渠道(帮助中心、票据、聊天和谈话)或核心设置和命令组织。有关更多信息,请参见Web小部件(经典)API的开发者文档.
新的聊天应用程式-有关旧聊天(Zopim) api如何映射到Web小部件(经典)api的信息,请参见从Chat Widget语法迁移到统一的Web Widget (Classic)语法.
以不同的语言显示小部件
默认情况下,嵌入在网站中的Web Widget (Classic)根据终端用户的浏览器语言以终端用户的语言显示文本。例如,如果最终用户的浏览器语言设置为德对于德语,小部件将为该用户显示德语。如果小部件嵌入到帮助中心中,它将根据帮助中心语言设置显示文本。
Web小部件(经典)支持的子集亚博Zendesk支持的语言.如果Web小部件(Classic)不支持最终用户的浏览器语言,小部件默认为英语。如果小部件无法从最终用户的浏览器获取语言,则小部件默认使用Zendesk Support中指定的语言。亚博
控件可以自定义小部件,使其始终以特定语言显示setLocale命令。此命令仅为小部件设置语言,不会覆盖主机页的语言。
有关的详细信息,请参阅开发人员文档setLocale命令。
用用户联系信息预先填写表单
禁用票据附件
如果您已经为您的票据启用了附件,那么默认情况下,用户可以将文件附加到从Web小部件(Classic)提交的票据上。但是,如果需要,您可以禁用此选项。
有关的详细信息,请参阅开发人员文档附件设置contactForm对象。
重新定位发射器
小部件位置偏移
自定义小部件元素的颜色
您可以从Web Widget (Classic)管理页面指定Web Widget (Classic)的整体配色方案(主题颜色)和启动器、联系按钮和头(主题文本颜色)中的文本的自定义颜色(参见在Web小部件中配置组件(经典)).
但是,如果希望自定义特定元素,则需要使用颜色设置。您可以为每个Web小部件(经典)组件选择唯一的颜色:
- 发射器
- 按钮
- 按钮文字
- 结果列表
- 头
- 文章的链接
控件指定的最小对比度,Web小部件(经典)使用算法自动调整颜色WCAG指南.
有关自定义Web小部件(经典)元素颜色的更多信息,请参阅开发人员文档颜色设置。
更改小部件中的可见顺序
限制特定页面上的小部件特性
自定义小部件文本
您可以在下表中更改Web Widget (Classic)组件的文本,并且还可以自定义帮助中心搜索占位符文本.
组件 | 细节 |
---|---|
对象:发射器 设置:chatLabel 描述:启用聊天且没有打开帮助中心时,启动器按钮上的文本默认文本:闲谈,聊天 |
|
对象:发射器 设置:标签 描述:启动按钮上的文本 默认文本:帮助,支持或反馈,在Web小部件(经典)管理页面上定义 |
|
对象:helpCenter 设置:标题 描述:帮助中心页面的标题 默认文本:帮助 |
|
对象:contactForm 设置:标题 描述:联系表格的标题默认文本:请留言或联系我们在Web小部件(经典)管理页面中定义 |
|
对象:helpCenter 描述:帮助中心表单中加载联系人表单的按钮上的文本(~20个字符限制) 默认文本:请留言或联系我们在Web小部件(经典)管理页面中定义 |
|
对象:helpCenter 设置:chatButton 描述:加载聊天的帮助中心表单中显示的按钮上的文本(~20个字符限制)默认文本:帮助,支持,或反馈在Web小部件(经典)管理页面中定义 |
你可以使用翻译对象更改Web小部件(经典)中显示的一些默认文本。翻译按功能分组——例如,启动器、帮助中心和联系表单。
您可以在中探索潜在语言代码的列表Zendesk支持的语言代码亚博.
地区翻译由最终用户的浏览器语言触发。您还可以强制小部件始终以特定语言显示,并覆盖最终用户的浏览器语言设置。有关更多信息,请参见以不同的语言显示小部件.
在联系人表单中添加主题行
与主题设置为contactForm对象,您可以将Web小部件(经典)设置为在默认联系人表单中包含主题字段。
默认的联系表单旨在促进参与度,并在完成联系表单时提供简化的用户体验。虽然默认的联系人表单不包括主题行,但您可能希望添加主题行以增强某些客户的支持体验。
有关的详细信息,请参阅开发人员文档主题设置为contactForm对象。
隐藏“查看原文”按钮
的查看原文按钮将Web小部件(经典)中的文章和帮助中心中的文章连接起来。控件可以隐藏此按钮helpCenter对象,并设置originalArticleButton财产假.
有关的详细信息,请参阅开发人员文档originalArticleButton设置为helpCenter对象。
限制搜索结果
与过滤器设置为helpCenter对象,则可以将从Web小部件(经典)执行的搜索结果限制为基于类别、节和标签的文章。有关的详细信息,请参阅开发人员文档过滤器设置。
向下滚动查看一些未包含在开发人员文档中的其他示例,这些示例说明了可以限制搜索结果的一些方法。
将搜索限制在特定的部分:
将搜索限制在一个特定的类别:
将搜索限制在多个类别中的内容:
将搜索限制在带有特定标签的内容上:
将搜索限制在特定类别和带有特定标签的内容:
定制帮助中心搜索占位符文本
帮助中心搜索框中的默认占位符文本为我们能帮上什么忙?您可以自定义此文本,使其与用户的语言匹配,或者使特定文本以特定语言显示。有关的详细信息,请参阅开发人员文档searchPlaceholder设置。
如果上下文帮助已启用,您还可以配置Web小部件(经典)以打开推荐的文章,使您的客户更容易自助.有关的详细信息,请参阅开发人员文档setSuggestions命令helpCenter对象。
Talk在Web Widget中的高级配置(经典)
您可以创建多个配置来定义Talk在Web小部件(经典)中的行为。对于每个配置,您都可以根据自己的需求和首选项在Web小部件(Classic)中定制Talk的呼叫路由和显示选项。
希望将Web小部件(经典)回调请求路由到的代理组
Web小部件(经典)回调请求的优先级
在Web小部件中显示请求回调、呼叫我们或这两个选项(经典)
在Web小部件(经典)中显示估计的等待时间
如果您只在Web Widget (Classic)中创建了单个Talk配置,那么每当Talk可用时,这将自动成为Web Widget (Classic)中显示的默认配置。
如果您已经在Web小部件(经典)中创建了Talk的多个配置,您可以使用Talk昵称设置来定位所需的配置。
有关的详细信息,请参阅开发人员文档说话对象,昵称设置,为Web小部件配置Zen亚博desk Talk设置(经典).
Web Widget中聊天的高级配置(经典)
如果您正在使用在Web小部件中的实时聊天(经典)在美国,你可以在Web Widg亚博et (Classic)中提供Zendesk Chat功能,以便网站的访问者可以与代理聊天,并发送和接收可能有助于解决他们问题的文件。代理还可以主动向游客发送信息,了解他们是否需要帮助。
有关的详细信息,请参阅开发人员文档闲谈,聊天对象。
有关旧聊天(Zopim) api如何映射到Web小部件(经典)api的信息,请参见从Chat小部件语法迁移到统一的Web小部件语法.
为终端用户提供多种联系方式
您可以允许最终用户选择一个联系人选项。您可能想要自定义您的网站,以便某些页面允许最终用户做出选择,而其他页面则不允许。确切的行为取决于是否为Web Widget (Classic)配置了Chat或Talk,以及聊天代理是否在线。如果需要,您可以自定义联系人选项的默认文本。
下面是默认文本列表:
接触的选择 | 默认文本 |
---|---|
联系人按钮 | 联系我们 |
聊天标签(代理在线) | 即时聊天 |
聊天标签(座席离线 | 聊天不可用 |
联系表单标签 | 请留言 |
有关的详细信息,请参阅开发人员文档contactOptions设置。
提供与聊天的联系选项
如果为Web小部件(经典)配置了聊天,如果聊天代理可用,则最终用户将自动路由到聊天。但是,您可以允许最终用户在与代理聊天或填写联系表单之间进行选择,即使有聊天代理可用。如果在用户单击启动程序时聊天代理可用,但在聊天开始之前代理已注销,则最终用户可能会看到指示该代理不可用的消息。
当最终用户选择聊天时,他们无法使用后退按钮返回到其他联系人选项,这是一个已知的问题。为此,他们需要完全结束聊天或刷新页面。
与谈话提供联系选项
如果在Web小部件(经典)中启用了Talk和其他联系选项,并且座席在线,则会自动启用联系选项。
格式化多个小部件组件的代码
特定于Contact Form、Help Center和Zendesk Chat的项嵌套在站点HTML中的这些标题下(con亚博tactForm、helpCenter和Chat),而全局项则单独包含。
- Web小部件(经典)在屏幕上的位置已使用偏移量设置更改。Offset是一个全局项,这就是为什么它有自己的条目。
- 帮助中心搜索-不包括查看原文按钮。为英语用户提供“搜索帮助”的标题,为所有其他语言用户提供“发表意见”的标题。
- 禁用聊天功能。
- 联系表单的英文标题为“信息我们”,其他语言为“联系我们”。
- 启动器按钮文本是“Make a request”(英语)和“Get help”(其他语言)。
62条评论
我一直在查看文档,但我还没有找到一种方法来抑制或改变文章标题上方的“顶级结果”文本。是我忽略了这一点,还是有人有想法?谢谢!
嗨,马克,
不幸的是,它不可能自定义'Top results'字符串今天。我将把此记录为我们方面的功能请求,以供将来考虑。出于兴趣,你希望将这个字符串更改为什么?
谢谢,
——米兰达。
谢谢你的快速回复,米兰达。我们一直在尝试各种方法,为问题提供更简短的答案……简短到标题就是答案。如果我们可以将返回的文章列表限制为1篇,或者抑制“顶级结果”,或者只是将其重新标记为“答案”,那么它更像是对他们问题的直接回答,而不是搜索结果列表。
我欢迎你的任何指导(包括如果你认为这种方法不可取)。
我当时正在写如何做到这一点。
提示:在Web Widget中隐藏顶部建议
如果你有什么问题请告诉我。
很高兴听到这个消息,亚历杭德罗!@……抱歉,但是当我点击你的链接时,它会说“哎呀,你没有权限访问这个页面”,即使我已经登录了。谢谢!
不知道那里发生了什么,但这里是GitHub链接https://github.com/Ajhad1/亚博Zendesk-Customizations/tree/main/Web-Widget/Hide-Top-Suggestions-Title
完美,非常感谢!
嗨,有人知道我们是否可以编辑这个文本(附图)吗?
你好,马克,
谢谢你伸出援手。不幸的是,编辑这个功能不在Zendesk的原生功能范围内。亚博尽管如此,这可以通过自定义代码进行更改。
谢谢@kharlo !我感谢你的快速反馈,并注意到至少我们可以通过自定义代码来完成。
如何添加特定的颜色标题?
目前不可能改变标题的字体颜色。在这个阶段,只有标题的背景颜色可以自定义。我将把它记录为一个特性请求,我们将考虑在将来实现它。
谢谢,
——米兰达。
根据所选择的主题颜色,我们会根据对比度自动选择黑色或白色的字体颜色更合适(以满足无障碍阅读标准)。
——米兰达。
如何在默认情况下设置一个值为产品下拉菜单。
嘿,
可以这样做:
使用123456自定义字段的ID和choices选项的值(如果是动态内容,则使用底层标签)
参见:
https://developer.亚博zendesk.com/embeddables/docs/widget/settings#fields
如需更多定制选项,请尝试https://widget.guide/demo/
你好,
在Web Widget上,我希望改变两件对我来说没有意义的事情。
1 /当Web Widget在移动设备上全屏显示时我觉得换个图标会更好。更容易理解。
2 /同样在手机上,我想添加一个“确定”或“搜索”按钮,在搜索栏中。很少有人熟悉必须按下智能手机键盘上的“返回”键来验证表单的情况。当我用HotJar观看我的访客会话时,我大约有20%人们输入他们的搜索,但未能验证表单……
猜这是不可能实现这与自定义代码?你不觉得这些主意不错吗?
谢谢。
嘿,鲍特,
我再次检查了我们的一个web小部件专家,它看起来不像有一个方法来完成你正在寻找的这个时候。
我建议交叉张贴在我们的反馈-票务系统(支援)亚博主题,我一定会与我们的产品经理分享您的想法。
谢谢你花时间和我们分享这些!
你好,布雷特,
不幸的是,我就是这么想的。
我刚创建了一个新主题。
谢谢你!
你好,
我们的Zendesk知识库和一个外部网站使用同一个聊天帐户。亚博官方app亚博是否有一种方法来隐藏聊天字段为我们的聊天小部件只是外部网站?
谢谢你!
劳拉
嗨,劳拉,
我认为本文中的共享代码片段,添加到您的外部网站脚本文件并根据说明进行定制:
https://support.亚博zendesk.com/hc/en-us/articles/115010352968
还有这个:
https://support.亚博zendesk.com/hc/en-us/articles/115009692388-Configuring-components-in-the-Web-Widget
你可以试一次。
谢谢你!
你好!
我有一个关于自定义(1)消息气泡颜色或(2)“联系”按钮样式的问题。
我已经咨询了Web小部件的设置参考(经典),这给了我一个很好的起点,但是我想知道上面的2个元素中的任何一个是否通过设置参考中的JS是可目标对象.
他们目前都从主题颜色设置,这是一个真正的问题,因为其中一个有接近黑色的文本,而另一个是覆盖在小部件的BG颜色(白色)之上。无论小部件使用什么算法来调整颜色,似乎都不活跃……有没有办法强制可访问性颜色算法?
如果没有,找到一个颜色,将在这两种情况下是相当的挑战,所以我希望能够控制一个或两个单独,以及潜在的悬停样式的“取得联系”按钮。
谢谢你的时间。
嗨!
是否有一个设置阻止所选文章在小部件中预览,而是在新页面中打开该文章?
嗨洁!
谢谢你的问题!不幸的是,除了小部件本身之外,没有一个设置可用于在浏览器窗口中查看帮助文章。我会向我方提出这个反馈意见,我们以后再考虑。
你考虑过转到我们的吗消息传递的经验?默认情况下,在消息传递中,帮助文章是在浏览器中查看的(而不是在小部件本身中)。
谢谢,
——米兰达。
亲爱的米兰达,
谢谢你的回答。我还没有机会尝试消息传递的体验,因为它需要Agent Workspace,我刚刚禁用了它,因为我对糟糕的知识库交互不满意(文章建议不如常规的Knowledge Capture App好,加上没有集成KCapture提供的良好功能,如标志,偏转的属性等)。亚博官方app
我会考虑一下,看看我是否应该重新启用它。
谢谢!
嗨Tulasi
也在这里:
玛丽亚(女名)
嗨,末底改·汉默,
很抱歉我这么晚才回复你。感谢您的反馈。
现在没有办法做到这一点,但同意你的反馈。我会记在我方账上,以备将来参考。我们知道这是一个需要改进的领域,希望在2022年花一些时间来完善颜色匹配算法。
谢谢!我也会记录下来以备将来考虑。
——米兰达。
嗨,末底改·汉默,
很抱歉我这么晚才回复你。感谢您的反馈。
现在没有办法做到这一点,但同意你的反馈。我会记在我方账上,以备将来参考。我们知道这是一个需要改进的领域,希望在2022年花一些时间来完善颜色匹配算法。
谢谢!我也会记录下来以备将来考虑。
——米兰达。
你好,
我们有一个客户,有一个固定的页脚,并希望聊天图标在一个按钮格式…有没有HTML代码,我可以尝试这样做?
嗨Ntsako,
要做到这一点,可以先将小部件隐藏在页面上,然后在单击自定义按钮后使用小部件的Javascript api显示它。我们将在中更详细地演示这一点快速入门-为Web小部件创建启动器(经典).
谢谢,
当使用过滤器时,如果我根据标签进行过滤,它是“与”过滤器还是“或”过滤器。意思是,如果我包含标签:Label1和Label2。结果是否仅限于同时具有Label1和Label2的文章,还是仅限于同时具有Label1或Label2的任何文章?
请登录留下评论。