使用 JavaScript 自定义Guide

要在您的网站上使用 Guide，您只需将 Guide 嵌入到您想要提供参与的网站的每个页面上。

但是，如果您熟悉 Web 开发，并且想要自定义 Guide 小部件的外观和行为，则可以对 JavaScript 代码使用 API 应用程序编程接口。允许您通过将CXone Mpower系统与其他软件连接来自动化某些功能。调用。您可以进行以下类型的更改：

Guide 小部件外观和行为：自定义 Guide 小部件的外观和行为。这包括更改该小部件的大小、更改按钮的大小、以全屏模式显示该小部件等。
在 Guide 小部件中提供时的聊天首选项：自定义在 Guide 中提供聊天时聊天的外观和行为。这包括更改聊天窗口中的信息、更改聊天窗口外观、设置自定义 CSS 等。
报告首选项：自定义 Guide 如何跟踪参与度和转化。您可以在定义自定义事件、存储访问者变量、存储转化数据、分配和删除 Web 标签等时使用这些 API。

了解 Guide 的工作方式

Guide 小部件是一个网络模块，由 CXone Mpower 加载程序加载到您的网站上。该 Web 模块包含使用 Svelte 框架构建的 JavaScript 应用程序。该应用程序使用可跟踪 Guide 配置、活动模板、活动聊天状态、UI 状态等的基本状态存储。这些状态存储的值决定了向访问者显示的内容。

当您将 Guide 嵌入到您网站的页面上并且访问者查看该页面时，Guide 会获取特定于您租户的配置。此请求返回一个 JSON 结果，其中包含规则、按钮、入口点、翻译、引用的文章和功能标志。然后，它使用捆绑的规则引擎来处理可能会也可能不会导致该页面上显示模板或主动优惠的规则和条件。

为管理页面重新加载之间的访问者数据，Guide 使用本地和会话存储。这可使 Guide 在受支持的浏览器上提供跨域支持。这也意味着 Guide 不使用任何浏览器 cookie。

在将 Guide 自定义发布到生产环境之前，请在测试环境中进行设置。这将有助于最大限度地减少对您的网站访问者的干扰。它还可以帮助您确保自定义内容按预期工作。

添加 JavaScript 调用

单击应用程序选择器并选择Guide。
单击 Integrations。将显示一个页面，其中包含特定于您租户的 JavaScript 代码。
单击Copy code with Guide复制代码。
将复制的代码片段粘贴到代码或文本编辑程序中。
在您粘贴的代码的结束 </script> 标记上方，添加要使用的 JavaScript 调用。在以下示例图片中，注释指示了添加调用的位置。

有关您可以使用的调用的完整详细信息，请参阅Guide小部件相关 API、聊天相关 API 和报告相关 API。
将整个脚本（包括开始和结束 <script> 标记）复制并粘贴到网站页面的标头中。
访问已修改的页面并确保 Guide 自定义按预期工作。
完全测试通过并按预期运行后，将最终脚本复制到每个应该有此 Guide 自定义的页面的标题中。

设置将用于 Guide 的语言

要覆盖任何浏览器语言设置并强制 Guide 访问者查看特定语言的内容，则修改嵌入脚本。将 locale 参数添加到脚本末尾的 cxone('guide','init'); 命令中，并指定所需的语言。例如，您可以将其设置为法语，如下所示：


cxone('init','####'); 
cxone('guide','init', {locale: 'fr-fr'});

将 #### 替换为您的四位数租户 ID。

请注意，您在主动优惠中编写的内容仍使用编写该内容时的语言显示。这假设您已设置了法语的 Guide 翻译字符串。