使用 API 自定义 Guide

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

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

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

了解指南的工作方式

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

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

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

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

添加 JavaScript 调用

单击应用程序选择器并选择ACD。
转至数字 > 数字联络点。
在您的渠道下，单击网站脚本。
从页面复制 JavaScript 代码并将其粘贴到您的代码或文本编辑程序中。务必包含开始和结束 <script> 标记。
在您粘贴的代码的结束 </script> 标记上方，添加要使用的 JavaScript 调用。在以下示例图片中，注释指示了添加调用的位置。

查看图像

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

自定义 Guide 小部件

通过此调用，您可以调整 Guide 小部件的外观和行为。

调整 CSS

更改 Guide 小部件的 CSS 元素。例如：

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');

要使用此代码片段，请将 GUIDE_ELEMENT 替换为下表中的值，并将大括号 { } 中的示例 CSS 替换为自定义 CSS：

Guide 界面	GUIDE_ELEMENT 值
Guide 小部件和按钮	GUIDE_CHANNEL_BUTTON GUIDE_CHANNEL_BACK_BUTTON GUIDE_SINGLE_MENU_CLOSE_BUTTON GUIDE_MULTIPLE_MENU_CLOSE_BUTTON GUIDE_CUSTOMER_PORTAL_CLOSE_BUTTON GUIDE_FRAME_CONTENT GUIDE_CHANNEL_ICON GUIDE_CHANNEL_MENU_ICON
门户	PORTAL_HEADER_iCON PORTAL_HEADER PORTAL_TITLE PORTAL_SUBTITLE GUIDE_CHANNEL_BUTTON_1 GUIDE_CHANNEL_BUTTON_2 GUIDE_CHANNEL_BUTTON_3 GUIDE_CHANNEL_BUTTON_4 GUIDE_MENU_BUTTON KB_WIDGET_TITLE KB_WIDGET_SEARCHBAR KB_SEE_MORE_BUTTON PORTAL_BODY KB_WIDGET CHANNELS_WIDGET
文章	KB_HEADER KB_BODY
聊天和电子邮件	PRECONTACT_SURVEY BEGIN_CHAT SEND_EMAIL INPUT TEXTAREA DROPDOWN TREE PRECONTACT_SURVEY_DESCRIPTION PRECONTACT_SURVEY_ICON TREE_POPUP_BACK_BUTTON CLOSE_TREE_POPUP CLOSE
主动提议	OFFER_CLOSE_BUTTON OFFER_HEADER OFFER_BODY OFFER_BUTTON_1 OFFER_BUTTON_2 OFFER_BUTTON_3

调整渠道按钮大小

设置渠道按钮的大小。输入以 ems 或像素为单位的值。默认按钮大小为 3em。

cxone('guide', 'setButtonSize', '80px');

调整渠道按钮偏移量

设置渠道按钮的偏移值。输入以 ems 或像素为单位的值。

cxone('guide', 'setOffsetX', '48px');

cxone('guide', 'setOffsetY', '3em');

打开 Guide 菜单

显示按钮的 Guide 菜单。

cxone('guide', 'openMenu');

关闭 Guide 菜单

关闭按钮的 Guide 菜单。

cxone('guide', 'closeMenu');

更改字体大小

设置 Guide 小部件中使用的默认字体大小。输入以像素为单位的值。默认字体大小为 13 像素。此处设定的值决定了整个 Guide 中使用的 em 大小。

cxone('guide','setFontSize',12);

更改 Guide 小部件的高度

设置 Guide 小部件的高度。输入以 ems 或像素为单位的值。默认高度为 40em。最大高度为 40 rem。

cxone('guide','setDesiredGuideHeight','30em');

更改 Guide 小部件的宽度

设置 Guide 小部件的宽度。输入以 ems 或像素为单位的值。默认宽度为 23.125em。

cxone('guide','setDesiredGuideWidth','608px');

以全屏模式显示 Guide

您能够以全屏模式显示 Guide。Guide 内容显示在窗口中，而不是 Guide 小部件中。

cxone('guide','setFullDisplay');

在全屏模式下的最佳做法是隐藏最小化按钮。为此，请使用以下命令：

cxone('guide','setFullDisplay');

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');

省略聊天联系前网络调查

使用此 API 来指示 Guide 启动聊天，而不显示联系前网络调查。

cxone('guide','hidePreSurvey');

使用聊天 API 来预设联系前网络调查值。或者，您可以将它们指定为 hidePreSurvey API 的参数。例如：

cxone('guide','hidePreSurvey', 'Dre', 'dre@classics.com');

直接显示入口点

使用此 API 可在窗口中手动显示入口点。使用入口点的默认按钮。

提供此 API 的目的是为了应对有人可能需要在窗口中手动显示入口点的特定情况。一般不建议使用它，也不应将其与 Guide 参与规则结合使用。

要使用此 API，您必须传递要显示的入口点的 ID。您可以通过单击入口点旁边的编辑，然后复制页面 URL 的最后部分来获取入口点 ID。

cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');