使用 JavaScript 自定义聊天渠道

您可以使用 JavaScript 自定义在线聊天 坐席和联系人实时交互和聊天消息 异步聊天，联系人可随时发送聊天消息并等待回复。CXone 提供默认自定义及其相关的 JavaScript API 调用。您必须将这些 API 调用包含在将聊天添加到您网站的脚本标记中。要添加这些功能，您需要访问您网站的代码。该页面说明了在何处添加 JavaScript 以及要包含的确切代码行。您还应熟悉 JavaScript 或 Web 开发，以便自信地使用该页面上的信息。

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

• 聊天行为：自定义聊天窗口的行为。这包括打开和关闭聊天窗口或启用游戏模式。游戏模式让客户在等待坐席时可以玩贪吃蛇游戏打发时间。
• 聊天信息：自定义在聊天窗口中显示的信息。这包括客户姓名、坐席图像或活动状态等内容。
• 自定义字段、标签和短语：定义 自定义字段或自定义字段标签。您还可以为显示给联系人的自动消息配置替代文本。
• 聊天窗口外观：自定义聊天窗口的外观。您可以更改网页上窗口的大小和位置等内容。
• 自定义 CSS：为聊天窗口定义自定义 CSS。
• 主动操作：根据客户行为采取的主动操作，自定义体验。
• 其他功能：您可以配置的其他内容包括：
  • 让主机环境监听特定事件。
  • 将数字聊天渠道集成到 OS 或 Android 应用程序。
  • 启用 Oauth 身份验证。

将 JavaScript 调用添加到聊天渠道

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

1. 单击应用程序选择器 并选择 ACD。

2. 转至 数字 > 数字联络点。

3. 在您的渠道下，单击 网站脚本。
4. 从该页面复制 JavaScript 代码并将其粘贴到记事本等文本编辑程序中。务必包含开始和结束 <script> 标记。

5. 在 Notepad++ 中，就在您粘贴的代码的结束 </script> 标记上方，添加您要使用的 JavaScript 调用。在以下示例图片中，注释指示了添加调用的位置。该页面其余部分中介绍了您可以使用的受支持调用。

   查看图像

   

6. 将整个脚本（包括开始和结束 <script> 标记）复制并粘贴到网站页面的标头中。

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

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

聊天行为 JavaScript 调用

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

打开聊天窗口

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

关闭聊天窗口

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

Chat Always Online

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

保留先前聊天中的自定义字段

您可以选择在已发起交互后，您希望自定义字段保留还是从本地存储中清除。这可使您选择哪些自定义字段继续显示在与联系人的所有交互中。'field_id' 是指创建自定义字段时 Ident 字段的值。

从 自适应卡 发送回发数据

Studio 操作和机器人可通过聊天向联系人发送 自适应卡。为了使数字聊天能够将回发数据发送到 Studio 或机器人，您必须启用处理程序。自适应卡 处理程序在机器人或 Studio 操作中运行，用于管理和响应与 自适应卡 的交互。当用户与 自适应卡 的组件进行交互时，例如单击按钮或从下拉菜单中选择一个选项，该处理程序便会激活。该处理程序会破译用户的输入并确定要采取的适当响应或操作。添加默认处理程序命令和发送消息命令，以便 Studio 或机器人可以做出相应响应，或者存储 自适应卡 数据以用于报告目的。您还可以使用自定义处理程序命令覆盖默认处理程序。

添加默认 自适应卡 处理程序命令：

发送消息命令：

创建自定义处理程序命令：

设置授权代码

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

自动开始新的聊天会话

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

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

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

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

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

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

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

启用并发聊天会话

您可以让联系人在同一浏览器中启动多个聊天会话。如果他们正在一个浏览器选项卡中进行活动聊天，则这可使联系人在新的浏览器选项卡或窗口中启动第二个聊天。

要启用此行为，您必须指定聊天数据的存储方式。您有两个选项：

• localStorage：关闭选项卡或窗口后数据仍保留在浏览器中。这是默认存储方法。如果在不同选项卡中同时打开多个聊天会话，则它们都被视为相同的交互。所有选项卡的聊天对话和体验都是相同的。

• sessionStorage：存储单个选项卡或窗口的数据，然后在该选项卡或窗口关闭时会清除这些数据。用户可以跨不同的选项卡或窗口创建多个聊天会话。每个选项卡中的聊天会话均被视为唯一交互。

要启用并发聊天会话，请添加 storageType 键，其值为 sessionStorage，如以下示例所示。

如果您使用 localStorage 选项并且仍想清除对话历史记录，则可以创建一个在聊天结束后删除 customerID 的事件侦听器。

brandembassy(
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'sessionStorage',
	},
);

清除对话历史记录

聊天对话结束后删除对话历史记录。如果您使用聊天的默认存储选项（本地存储），这可能会很有用。即使浏览器实例关闭后，此存储选项也会存储数据。在这种情况下，您可以通过从本地存储中清除 customerID 来专门删除对话历史记录。以下示例创建了一个事件侦听器来侦听聊天中的 caseStatusChanged 事件。这表明聊天会话结束。然后，调用 removeItem 命令，这会从浏览器的本地存储中删除 customerID。

brandembassy('onPushUpdate', ['CaseStatusChanged'], pushUpdatePayload => { 
	if (typeof pushUpdatePayload === 'undefined' || typeof pushUpdatePayload.data === 'undefined') { 
		return; 
	}  
	const { status } = pushUpdatePayload.data.case || {};   
	if (typeof status === 'undefined') { 
		return; 
	}   
	// When a previous case has been closed, this will set the custom fields again. 
	if (status === 'closed') { 
		localStorage.removeItem('_BECustomerID') 
		); 
	} 
}); 

自定义初始自动联系消息

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

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

• 覆盖默认按钮文本。

                brandembassy('sendFirstMessageAutomatically', 'Hello');

• 动态更改初始消息。

                brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');

• 更改翻译页面上的消息文本。

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

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

延迟案例创建

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

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

启用游戏模式

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

自动满意度调查

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

聊天信息 JavaScript 调用

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

获取客户身份 ID

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

隐藏联系前调查表单

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

隐藏队列计数器

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

将聊天通知音频静音

可使您关闭聊天通知声音。默认情况下，聊天通知声音为打开状态。无论其他聊天声音设置如何，都需要配置此项。您可以将该值更改为 'false'，以重新打开聊天通知音频。

覆盖浏览器语言翻译

将用户的浏览器语言设置或自定义区域设置覆盖为设置的翻译。例如，您可以确保某些文本始终以英语显示，无论联系人的浏览器语言设置如何。

设置活动状态

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

设置坐席的图像

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

设置客户 ID

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

设置客户名称

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

设置日期格式

可以设置为使用绝对日期格式 (12/03/2035) 或相对日期格式（今天、周一）。

设置区域

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

显示案例信息

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

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

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

显示/隐藏系统消息

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

使用条款

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

• 内部窗口
• 外部链接

如要自定义按钮或内部模式窗口的外观，请使用该页面中所述的 CSS API 调用。

自定义字段、标签和短语

创建和填充自定义字段

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

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

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

自定义聊天标签和短语

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

要更改单个消息或标签：

要更改多个消息或标签：

翻译自定义字段

您可以翻译聊天窗口中显示的自定义字段。

聊天窗口外观调用

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

关闭聊天图标

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

隐藏分配的坐席

隐藏标题

隐藏弹出窗口

显示客户头像

显示“发送”按钮

尺寸

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

完整显示模式

位置和偏移

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

为回复框设置字符限制

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

您可以通过添加自己的 CSS 来自定义聊天窗口的外观。使用 data-selector 属性指定要设置样式的聊天窗口部分。以下下拉列表包含您可以使用 data-selector 属性选择的所有组件的列表。数据选择器允许您指定要应用自定义 CSS 的聊天窗口部分。在 data-selector 之后，将您的样式添加到大括号内。如果要设置多个元素的样式，则必须在单个 JavaScript 调用中添加所有 CSS。如果多次使用相同 JavaScript 调用，则最后一个 JavaScript 调用将覆盖之前的所有 CSS。您还可以直接在 CXone 中为聊天自定义 CSS。

要使用数据选取器添加自定义 CSS，请使用此 JavaScript 调用作为参考：

主动操作

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

执行触发器

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

设置访问者事件

存储定义的客户行为（事件）以进行报告。当此调用与 CXone Mobile SDK 一起使用时，event_type 更改为 custom_event_type。

设置访问者变量

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

存储转换

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

Web 访问者标记

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

要为联系人添加标记：

要从联系人中移除标记：

与第三方应用程序集成

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

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

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

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

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

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

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

集成到 Android 或 iOS 应用程序

您可以将数字聊天功能集成到 Android 或 iOS 应用程序。本机应用程序必须使用添加了 JavaScript 初始化代码的 WebView。此示例代码使用该页面中的 JavaScript 来修改聊天功能的外观和行为：