使用 API 自定义 Guide 小部件

您可以使用这些 JavaScript API 自定义 Guide 小部件的外观和行为。

调整 CSS

更改 Guide 小部件的 CSS 元素。 在一次调用中进行所有 CSS 更改。 第二个调用会覆盖第一个调用中的更改。

语法示例：

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

要隐藏数据选择器，请使用 display:none。 例如，要隐藏 Guide 菜单按钮：

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_MENU_BUTTON"] {display: none;}');
Guide 界面 数据选择器
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', {email: "dre@classics.com"});

为联系前调查设置自定义字段值

使用此 API 可设置联系前调查中显示的自定义字段的值。 您可以设置以下值：

  • 名称

  • 任何联系人自定义字段

  • 任何客户自定义字段

您可以将自定义字段值标记为 hidden:true。 联系前调查表单不显示隐藏字段。 但您为隐藏字段设置的值将传递到聊天窗口。

对于未标记为 hidden:false 的自定义字段，Guide 会使用 API 命令指定的值预设联系前调查中的自定义字段。 访问者可以使用默认值或根据自己的喜好更改它们。

以下语法示例显示如何指定隐藏并直接传递到聊天的名称：

cxone('guide','setCustomFields', customerName: {value:"Francis", hidden: true});

以下语法示例显示如何指定两个联系人自定义字段值。 电子邮件值隐藏在联系前调查中，而是直接传递到聊天。 地址值在联系前调查中可见并可对其进行编辑。

cxone('guide','setCustomFields', 
contactCustomFields:[
{ident:email', value: 'josey@nice.com', hidden:true}, 
{ident: 'address', value: '123 Main St', hidden:false}
]);

以下语法示例显示如何指定客户自定义字段：

cxone('guide','setCustomFields', 
contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]);

以下语法示例显示如何指定联系人自定义字段和客户自定义字段：

cxone('guide','setCustomFields', 
contactCustomFields:[{ident:email', value: 'josey@nice.com', hidden:true}, {ident: 'address', value: '123 Main St', hidden:false}], contactCustomerFields:[{ident: 'email', value: 'kaya.sanchez@acme.com'}]);

直接显示入口点

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

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

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

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