问题
如何使用 JavaScript API 自定义 Zendesk Chat 小组件?
回答
使用 JavaScript API 更改和自定义网站或页面上已本地化的 Web Widget(经典)。
如果您是初学者,首先弄清楚您在页面上使用的是 Web Widget(经典)还是 Web Widget 代码片段。这两者都提供 Chat 功能,网站访问者难以分辨其外观。
了解不同的代码片段
- Chat 代码段如下所示:
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?ACCOUNT_KEY";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
ACCOUNT_KEY
是您帐户的唯一标识符。如果您从仅限 Chat 的帐户开始,这就是您所拥有的代码片段。
- Web Widget 代码片段如下所示:
<script id="ze-snippet"
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>
ACCOUNT_KEY
是唯一标识符,但其格式与 Chat 帐户密钥不同。如果您从 Support 帐户开始使用 Chat 帐户,则适用于您。
唯一确定的方法是打开您的帐户,查看小组件页面,明确您的小组件代码段。
添加一些自定义 JavaScript
使用我们的 JavaScript API 最常见的问题是事件未设置为以正确的顺序执行。JavaScript 通常在页面上异步运行,如果不加以注意,更改小组件颜色的命令可能在小组件存在之前就已执行。因此,添加正确的“就绪”函数以实现可靠的自定义。
-
Web Widget(经典)代码
在这种情况下,您的自定义代码应如下所示:
$zopim(function(){ // Custom code here });
此代码段将等待页面完成加载,然后等待 Web Widget(经典)完成加载,最后再添加自定义。
-
Web Widget 代码
使用以下脚本:
zE(function(){ $zopim(function(){ // Custom code here }); });
在此示例中,代码正在等待页面加载,然后等待 Web Widget 加载,最后等待 Web Widget 加载 Chat 功能。Chat 加载后,您可以安全添加所需的自定义到 Web Widget(经典)。
有关更多信息,请参阅文章: