使用 API 自定义聊天渠道

Digital First Omnichannel实时聊天关闭 坐席和联系人实时交互聊天消息关闭 异步聊天,联系人可随时发送聊天消息并等待回复由您添加到希望聊天可用的网站页面上的 JavaScript 代码提供支持。您可以通过向此 JavaScript 代码添加 API 调用来自定义 Digital First Omnichannel 聊天。

您可以使用 API 自定义聊天渠道关闭 联系人与坐席或机器人交互的一种方式。通道可以是语音、电子邮件、聊天、社交媒体等。的这些方面:

如果您尚未这样操作,请设置实时聊天聊天消息渠道。在添加自定义之前测试渠道,确保其使用默认设置。先在测试环境中设置聊天自定义,然后再发布到生产环境。这将有助于最大限度地减少对您的网站访问者的干扰。它还可以帮助您确保自定义内容按预期工作。

将 API 调用添加到聊天渠道

完全按照所示来复制脚本和 API 调用。任何意外更改都可能导致您的渠道出现故障。

  1. 单击应用程序选择器 并选择 ACD
  2. 转至 DFO > 数字联络点

  3. 单击聊天
  4. 找到您要自定义的渠道,然后单击初始化和测试

  5. 从“初始化和测试”页面复制 JavaScript 代码并将其粘贴到记事本等文本编辑程序中。
  6. 在记事本中,就在您粘贴的代码的结束 </script> 标记上方,添加您要使用的 API 调用。在以下示例图片中,注释指示了添加调用的位置。本主题其余部分中介绍了您可以使用的受支持调用。

  7. 将整个脚本(包括您添加的 API 调用)复制到您网站页面的标头中。

  8. 访问修改后的页面并发送测试聊天信息,以确保您的自定义设置按预期运行。

  9. 完全测试通过并按预期运行后,将最终脚本复制到每个应该有聊天窗口小部件的页面的标题中。

聊天行为 API 调用

本节中的调用允许您更改聊天窗口的行为方式。

打开聊天窗口

自动打开聊天窗口。默认行为是在联系人单击聊天图标时打开聊天窗口。

var(--codeSnippetCopyLabel)
brandembassy('openChatWindow');

关闭聊天窗口

自动关闭聊天窗口。默认行为是在联系人单击聊天图标时关闭聊天窗口。

var(--codeSnippetCopyLabel)
brandembassy('hideChatWindow');

Chat Always Online

即使没有在线坐席,也会显示聊天窗口,就像有可用的坐席一样。

var(--codeSnippetCopyLabel)
brandembassy('enableChatAlwaysOnline');

设置授权代码

为 oAuth 流程设置授权代码。OAuth 是一种身份验证协议。它可以让一个应用程序代表您与另一个应用程序交互,而不会泄露您的密码。必须在聊天初始化之前调用。

var(--codeSnippetCopyLabel)
brandembassy('setAuthorizationCode', 'authorization_code');

自动开始新的聊天会话

如果没有正在进行的会话,那么会创建一个新的聊天消息关闭 异步聊天,联系人可随时发送聊天消息并等待回复实时聊天关闭 坐席和联系人实时交互会话。在您网站流量较低的页面上使用此调用,从而避免坐席接洽过多联系人而不堪重负。

Digital First Omnichannel 创建一个新案例,并在发送聊天会话的第一条消息时将其添加到队列中。聊天会话开始时,会代表客户发送隐藏的自动消息。这可以通过更快地启动流程来减少联系人等待坐席的时间。当联系人单击聊天图标开始对话或打开自动启动的聊天会话的聊天窗口时,聊天会话开始。尽管初始消息对客户隐藏,但坐席可以看到它。

您可以自定义初始隐藏消息的文本

自动启动聊天会话会跳过联系前调查表单。因此,您需要使用其他方法来收集有关联系人的信息。例如,您可以让坐席将信息手动输入到客户卡中。您还可以使用 OAuth 集成来配置客户身份验证

自动启动案例的路由根据 Digital First Omnichannel配置路由队列关闭 系统使用路由队列决定将案例路由给的坐席。您的系统管理员创建路由队列,以便将某些案例路由给专长于该类案例的坐席。发生。对于实时聊天会话,如果没有可用的坐席,聊天窗口会显示“等待可用坐席”消息。

如要自动启动聊天会话,请按所示顺序使用这些调用:

var(--codeSnippetCopyLabel)
brandembassy('openChatWindow');

brandembassy('autoStartSession');

如果向脚本添加其他调用,则 autoStartSession 必须始终是脚本中的最后一个调用。例如:

var(--codeSnippetCopyLabel)
// set customer name (as this is required field)
brandembassy('setCustomerName', 'Elizabeth');

// open chat window so user can start to chat
brandembassy('openChatWindow');

// and finally start the new chat session (without the pre-chat form)
brandembassy('autoStartSession');

自定义初始自动联系消息

Digital First Omnichannel 创建一个新案例,并在发送聊天会话的第一条消息时将其添加到队列中。聊天会话开始时,会代表客户发送隐藏的自动消息。这可以通过更快地启动流程来减少联系人等待坐席的时间。当联系人单击聊天图标开始对话或打开自动启动的聊天会话的聊天窗口时,聊天会话开始。尽管初始消息对客户隐藏,但坐席可以看到它。

默认消息是客户单击以开始对话的按钮上的文本。您可以通过三种方式自定义初始自动消息的文本:

  • 覆盖默认按钮文本。
var(--codeSnippetCopyLabel)
brandembassy('sendFirstMessageAutomatically', 'Hello');
  • 动态更改初始消息。
var(--codeSnippetCopyLabel)
brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');

使初始自动消息对联系人可见

如果您希望联系人能够看到初始自动消息,请将此调用添加到您的脚本中:

var(--codeSnippetCopyLabel)
brandembassy('hideFirstSentMessage', false);

延迟案例创建

Digital First Omnichannel 创建一个新案例,并在发送聊天会话的第一条消息时将其添加到队列中。聊天会话开始时,会代表客户发送隐藏的自动消息。这可以通过更快地启动流程来减少联系人等待坐席的时间。当联系人单击聊天图标开始对话或打开自动启动的聊天会话的聊天窗口时,聊天会话开始。尽管初始消息对客户隐藏,但坐席可以看到它。

您可以配置 Digital First Omnichannel 在使用此调用创建案例之前等待联系人的实际第一条消息:

var(--codeSnippetCopyLabel)
brandembassy('sendFirstMessageAutomatically', false);

启用游戏模式

允许联系人在等待坐席时玩贪吃蛇 (Snake) 游戏。

var(--codeSnippetCopyLabel)
brandembassy('allowGameMode');

自动满意度调查

满意度调查可以自动检测并显示在弹出窗口中。这可以启用或禁用它们是否被检测和显示。

var(--codeSnippetCopyLabel)
brandembassy('automatedSatisfactionSurveyModal', 'true');
brandembassy('automatedSatisfactionSurveyModal', 'false');
//if not defined, the default is 'true'

聊天信息 API 调用

这些调用允许您自定义聊天会话期间联系人可用的信息。

获取客户身份 ID

返回聊天中客户的唯一标识符。

var(--codeSnippetCopyLabel)
brandembassy('setCustomerIdentityId');

隐藏联系前调查表单

联系前调查表单会在聊天消息关闭 异步聊天,联系人可随时发送聊天消息并等待回复会话开始时出现。它会收集有关联系人的信息,例如他们的姓名。如果需要,您可以隐藏联系前调查表单,并在联系人开始聊天消息会话时立即显示聊天窗口。

var(--codeSnippetCopyLabel)
brandembassy('hidePreSurvey');

隐藏队列计数器

队列计数器可以让联系人知道,根据他们在坐席人员队列中的位置,坐席多久可以为其提供帮助。您可以在联系人成功路由到坐席后隐藏队列计数器。这样,坐席即可从收件箱中移除客户卡,而不会被联系人察觉。

var(--codeSnippetCopyLabel)
brandembassy('hideQueueCounterAfterAssignment');
brandembassy('hideAssignedAgent');
brandembassy('hideSystemMessages');

设置活动状态

更改活动栏中的消息。例如,您可以使用它来传达您对聊天消息会话的响应时间。因为聊天消息是一种异步的聊天形式,因此联系人可能必须等待坐席才能收到消息,这一功能就会比较实用。

var(--codeSnippetCopyLabel)
brandembassy('setStatusMessage', 'We typically reply within 3 hours.');

设置坐席的图像

动态更改聊天窗口中显示的坐席图像。默认情况下, Digital First Omnichannel 使用坐席配置文件中的图像。当您在脚本中包含此调用时,它会使用代码片段中 URL 指定的图像。将示例 URL 替换为您希望聊天使用的图像的 URL。

var(--codeSnippetCopyLabel)
brandembassy('setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');

设置客户 ID

为聊天中的客户设置唯一标识符。

var(--codeSnippetCopyLabel)
brandembassy('setCustomerId', 'customer_id');

设置客户名称

客户姓名是联系前调查表单上的一个字段,联系人需要在与聊天消息关闭 异步聊天,联系人可随时发送聊天消息并等待回复渠道中的坐席聊天之前完成填写。此 API 调用会动态填充该字段。

var(--codeSnippetCopyLabel)
brandembassy('setCustomerName', 'Elizabeth');

设置日期格式

可以设置为使用绝对日期格式 (01/01/2022) 或相对日期格式(今天、周一)。

var(--codeSnippetCopyLabel)
brandembassy('setDateFormat', 'date_format');
// date_format can be 'absolute' or 'relative'

设置区域

设置聊天窗口中翻译的区域。

var(--codeSnippetCopyLabel)
brandembassy('setLocale', 'locale');

显示案例信息

仅限聊天消息关闭 异步聊天,联系人可随时发送聊天消息并等待回复渠道。向联系人显示案例信息

var(--codeSnippetCopyLabel)
brandembassy('showCaseInfo');

显示/隐藏“发送转录”按钮

如果将发送转录按钮设置为可见,则必须配置聊天渠道,允许联系人将聊天转录发送给自己。(为聊天消息实时聊天配置此选项。)

var(--codeSnippetCopyLabel)
brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');

显示/隐藏系统消息

显示或隐藏坐席分配历史记录等系统消息。

var(--codeSnippetCopyLabel)
brandembassy('hideSystemMessages');
brandembassy('showSystemMessages');

使用条款

您可以在聊天窗口中向联系人提供使用条款文档。此功能可以向窗口添加一个按钮。您可以自定义按钮的标签和样式,以及联系人单击它时发生的操作。单击操作可以将使用条款显示为:

  • 内部窗口
  • 外部链接
var(--codeSnippetCopyLabel)
// Internal Modal Window
brandembassy('showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

// External Link
brandembassy('showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');

// If you want to explicitely disable this feature, you can use
brandembassy('hideTermsOfUse');

如要自定义按钮或内部模式窗口的外观,请使用本主题中所述的 CSS API 调用

自定义字段、标签和短语

创建和填充自定义字段

此调用可使用的自定义字段与 客户卡 中可使用的字段相同。如果您在打开聊天窗口之前使用这些调用,联系前表单中的字段将填充您在 API 调用中包含的数据。

如要定义案例自定义字段的值:

var(--codeSnippetCopyLabel)
brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

如要定义客户卡自定义字段的值:

var(--codeSnippetCopyLabel)
brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

自定义聊天标签和短语

您可以自定义 Digital First Omnichannel 聊天渠道使用的许多标签和短语,以及定义自定义内容。如果您需要动态更改短语或屏幕标签,请使用这些 API 调用。

要更改单个消息或标签:

var(--codeSnippetCopyLabel)
brandembassy('setTranslation', 'key', 'your translation');

要更改多个消息或标签:

var(--codeSnippetCopyLabel)
brandembassy('setTranslations', {
   key1: 'your custom label',
   key2: 'your custom message'
});

聊天窗口外观 API 调用

您可以修改聊天窗口的外观。

关闭聊天图标

设置为真时,窗口上会显示X图标,而不是设置菜单中的“结束聊天”选项。

var(--codeSnippetCopyLabel)
brandembassy('enableCloseIcon', true);

隐藏分配的坐席

var(--codeSnippetCopyLabel)
brandembassy('hideAssignedAgent');

隐藏标题

var(--codeSnippetCopyLabel)
brandembassy('hideHeader');

隐藏弹出窗口

var(--codeSnippetCopyLabel)
brandembassy('hidePopups');

显示客户头像

var(--codeSnippetCopyLabel)
brandembassy('showCustomerAvatar');

显示“发送”按钮

var(--codeSnippetCopyLabel)
brandembassy('showSendButton');

尺寸

自定义聊天窗口的宽度和高度。您可以使用 CSS 规格支持的绝对或相对单位。

var(--codeSnippetCopyLabel)
brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

完整显示模式

var(--codeSnippetCopyLabel)
brandembassy('setFullDisplay');
// OR
brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

位置和偏移

setPositionX 调用将屏幕的左侧或右侧定义为起始位置。setOffsetXsetOffsetY 调用分别定义聊天窗口从起点水平和垂直偏移多少像素。

var(--codeSnippetCopyLabel)
// set horizontal starting position
brandembassy('setPositionX', 'right');
                                                    
// set horizontal and vertical offset
brandembassy('setOffsetX', '40'); // default = 20
brandembassy('setOffsetY', '40'); // default = 20

为回复框设置字符限制

var(--codeSnippetCopyLabel)
brandembassy('setReplyBoxLimit', '280'); // default = null

带有数据选择器的自定义 CSS

您可以通过使用 API 调用中的数据选择器的自定义 CSS,来自定义聊天窗口的外观。数据选择器允许您指定要应用自定义 CSS 的聊天窗口部分。使用 data-selector 属性定义数据选择器。将其设置为您要修改的聊天窗口组件的名称。

要使用数据选择器添加自定义 CSS,请使用此 API 调用作为参考:

var(--codeSnippetCopyLabel)
brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');

仅使用 data-selector 属性应用自定义 CSS 组件。请勿将其应用于类选择器或 JavaScript 代码的其他部分,例如本示例:

.Widget__Widget___1qQCf { background: red; }

窗口组件可以由多个嵌套块组成。本节中列出的组件选择器会命名每个组件的根。如果您希望将 CSS 应用到组件的嵌套块之一,请使用开发人员的控制台检查组件,以便可以选择正确的块。

主动操作

本节中的调用允许您根据客户的行为主动与客户进行聊天。

执行触发器

启动由 trigger_id 定义的工作流自动化触发器

var(--codeSnippetCopyLabel)
brandembassy('executeTrigger', 'trigger_id');

设置访问者事件

存储定义的客户行为(事件)以进行报告。当此调用与 CXone Mobile SDK 结合使用时,将“event_type”更改为“custom_event_type”。

var(--codeSnippetCopyLabel)
brandembassy('setVisitorEvent', 'event_type', 'custom_event_data');

设置访问者变量

存储定义的客户信息以进行报告。

var(--codeSnippetCopyLabel)
brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');

存储转换

将客户行为存储为转换以进行报告。

var(--codeSnippetCopyLabel)
brandembassy('storeConversion', 'conversion_type', 'conversion_value', 'conversion_date'); 
// conversion_date is optional, default is now

Web 访问者标记

本节中的内容适用于受控版本 (CR) 中的产品或功能。如果您不是 CR 组的成员,如需了解更多信息,请联系您的 CXone 客户代表

您可以标记在网站上表现出特定行为的联系人。此功能使用 DFO 中的标记,并需要 指南

要为联系人添加标记:

var(--codeSnippetCopyLabel)
brandembassy('assignTag', 'tagID');

要从联系人中移除标记:

var(--codeSnippetCopyLabel)
brandembassy('removeTag', 'tagID');

与第三方应用程序集成

当某些聊天事件发生时,此部分中的调用允许您接收推送通知。

在聊天窗口中识别活动线程

var(--codeSnippetCopyLabel)
brandembassy('getOngoingThreads');

在聊天窗口中识别正在进行的联系

var(--codeSnippetCopyLabel)
brandembassy('getOngoingContact')

接收特定聊天事件的推送通知

接收一个聊天事件的通知:

var(--codeSnippetCopyLabel)
brandembassy('onPushUpdate', 'event', callback);

接收多个聊天事件的通知:

var(--codeSnippetCopyLabel)
brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);

接收所有聊天事件的通知:

var(--codeSnippetCopyLabel)
brandembassy('onAnyPushUpdate', callback);

集成到 Android 或 iOS 应用程序

您可以将 Digital First Omnichannel 聊天功能集成到 Android 或 iOS 应用程序。本机应用程序必须使用添加了 JavaScript 初始化代码的 WebView。此示例代码使用来自本主题的 API 调用来修改聊天功能的外观和行为:

var(--codeSnippetCopyLabel)
<script async type=”text/javascript”>
  (function(i,s,o,r,g,v,a,m){g=v?g+'?v='+v:g;i['BrandEmbassy']=r;
    i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};i[r].l=+new Date();
    a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;
    a.src=g+'?'+Math.round(Date.now()/1000/3600);m.parentNode.insertBefore(a,m)
  })(window,document,'script','brandembassy','https://livechat-static.brandembassy.com/3/chat.js');

  //init of Livechat
  brandembassy(‘init’, BRAND_HASH);

  // hiding unwanted UI elements
  brandembassy('hideHeader');
  brandembassy('hidePopups');
 
  // stretching livechat to full width and height
  brandembassy('setFullDisplay');

  // Customer's name
  brandembassy('setCustomerName', 'CUSTOMER_NAME');

  // Other optional Custom Fields
  brandembassy('setCustomField', 'CUSTOM_FIELD_IDENT', 'CUSTOM_FIELD_VALUE');
    
  // Start Chat
  brandembassy('openChatWindow');
  brandembassy('autoStartSession');

</script>