使用JavaScript

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

查看示例

The Jungle 是 Classics, Inc. 的子公司，在其网站中运营一家礼品店，作为其网站的一部分。 管理员 Mowgli Kipling 设置了以下 API 调用来帮助他的聊天坐席与礼品店客户合作：

• 自定义访问者变量将收集联系人在浏览礼品店页面时查看的商品颜色信息。 然后，当联系人发起聊天时，该信息可供坐席使用。
• 联系人点击的每个产品都会记录自定义访问者事件。 在点击了五次产品但并未点击购买按钮后，会有一个主动的“有问题决定？” 弹出窗口为联系人提供聊天。

您可以自定义聊天渠道 促进客户在联系中心交互的各种语音和数字通信媒介。的以下方面：

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

            cxone('chat','enableChatAlwaysOnline');

            brandembassy('enableChatAlwaysOnline');

添加JavaScript对聊天渠道的调用

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

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

2. 转到Digital > 数字联络点。

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

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

   查看图片

   

6. 复制并粘贴整个脚本，包括开头和结尾<script> tags, into the header of a page of your website.

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

8. 当其经过全面测试并按预期运行后，将最终脚本复制到应包含聊天小部件的每个页面的页眉中。

聊天行为JavaScript 调用

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

打开聊天窗口

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

            brandembassy('openChatWindow');

关闭聊天窗口

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

            brandembassy('hideChatWindow');

聊天始终在线

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

            brandembassy('chat','enableChatAlwaysOnline');

保留上一次聊天的自定义字段

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

        cxone('chat','enablePrecontactSurveyFieldAutoFill'('field id');

从Adaptive Card

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

查看示例

							<script>
								(function (i, s, o, r, g, v, a, m) {
								g = v ? g + '?v=' + v : g; i['CXoneDfo'] = r;
								i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}; i[r].l = +new Date(); i[r].u = g;
								a = s.createElement(o); m = s.getElementsByTagName(o)[0]; a.async = true;
								a.src = g + '?' + Math.round(Date.now() / 1000 / 3600); m.parentNode.insertBefore(a, m);
								})(window, document, 'script', 'cxone', 'https://web-modules-de-na1.staging.niceincontact.com/loader/1/loader.js');

								cxone('init', '1032');
								cxone('chat', 'init', 1032, 'chat_5184dc2e-0c75-4265-8a2b-4221c5aebfe1');
    
								cxone('chat', ‘adaptiveCardOnExecuteAction’, 'button1Submit', (action, chatSdkInstance) => {
								let messageContent = {
								type: "TEXT",
								payload: {
								text: action.title
								},
								postback: action.id
								}
      
								chatSdkInstance.sendMessage(messageContent)
								});
							</script>

添加默认Adaptive Card处理程序命令：

            adaptiveCardOnExecuteAction(actionId: string, callback: (action: node_modules/adaptivecards/src/card-elements.ts::Action) => void)

发送消息命令：

            sendMessage(messageContent: MessageContent)

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

					{
					"acType": "Action.Execute", // type of action Action.Execute or Action.Submit
					"acVerb": "null|string", // only if `verb` is provided in the Action
					"acActionId": "null|string" // only if id is provided in the Action
					"acData": { // `data` are provided in Action
					"firstName": "John",
					"lastName": "Doe",
					"_messageText": "Submitted something for you"
					}
			}

查看呼入消息示例

							{
							...,
							"messageContent": {
							"type": "TEXT",
							"payload": {
							"text": "Submitted something for you", // use Action.Title if _messageText is not provided (in case Action.Title is not provided, send Action.type)
							},
							"postback": "{\"acType\":\"Action.Execute\",\"acData\":{\"firstName\":\"John\",\"lastName\":\"Doe\",\"_messageText\":\"Submitted something for you\"}}"
							}
							}
					}

查看呼出消息示例

							{
							"thread": {
							"idOnExternalPlatform": "788a67af-263d-48b1-b67e-eb75838c6509"
							},
							"messageContent": {
							"type": "ADAPTIVE_CARD",
							"payload": {
							"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
							"type": "AdaptiveCard",
							"version": "1.4",
							"body": [
							{
							"type": "TextBlock",
							"text": "Present a form and submit it back to the originator"
							},
							{
							"type": "Input.Text",
							"id": "firstName",
							"label": "What is your first name?"
							},
							{
							"type": "Input.Text",
							"id": "lastName",
							"label": "What is your last name?"
							}
							],
							"actions": [
							{
							"type": "Action.Execute",
							"title": "Fire!",
							"data": {
							"_messageText": "Submitted something for you"
							}
							}
							]
							}
							}
					}

设置授权码

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

            brandembassy('setAuthorizationCode', 'authorization_code');

设置联系前调查预填充字段

            cxone('chat', setPrecontactSurveyPrefilledFields', ['fieldIdent1', 'fieldIdent2']);

自动启动新的聊天会话

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

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

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

自动启动案例的路由根据 中 使用诸如坐席具有此类案例专业知识等标准来确定将数字案例路由到哪些坐席。配置的中的路由队列Digital Experience进行。 对于实时聊天会话，如果没有可用的坐席，聊天窗口会显示等待可用坐席消息。

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

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

            // 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');

启用并发聊天会话

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

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

• 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');

• 在“翻译”页面上更改消息文本。

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

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

            brandembassy('hideFirstSentMessage', false);

延迟案例创建

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

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

            brandembassy('sendFirstMessageAutomatically', false);

启用游戏模式

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

            brandembassy('allowGameMode');

自动满意度调查

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

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

聊天信息JavaScript调用

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

获取客户身份 ID

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

            brandembassy('getCustomerIdentityId');

隐藏联系前调查表单

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

            brandembassy('hidePreSurvey');

隐藏队列计数器

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

            brandembassy('hideQueueCounterAfterAssignment');
brandembassy('hideAssignedAgent');
brandembassy('hideSystemMessages');

将聊天通知音频静音

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

            brandembassy('muteAudioNotification', 'true');
// OR
brandembassy('muteAudioNotification');

覆盖浏览器语言翻译

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

            brandembassy('init', 'brandId', 123, 'locale');

设置活动状态

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

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

设置坐席的图像

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

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

设置客户 ID

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

            brandembassy('setCustomerId', 'customer_id');

设置客户姓名

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

            brandembassy('setCustomerName', 'Elizabeth');

设置日期格式

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

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

设置区域设置

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

            brandembassy('setLocale', 'locale');

显示案例信息

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

            brandembassy('showCaseInfo');

显示/隐藏“发送记录文本”按钮

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

            brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');

显示/隐藏系统消息

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

            brandembassy('chat','hideSystemMessages');
brandembassy('showSystemMessages');

使用条款

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

• 内部窗口
• 外部链接

            // 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 调用。

自定义字段、标签和短语

创建和填充自定义字段

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

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

            brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

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

            brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

自定义聊天标签和短语

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

要更改单条消息或标签：

            brandembassy('setTranslation', 'key', 'your translation');

要更改多条消息或标签：

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

单击以查看您的消息和标签可以定制。

大括号表示系统以实际数据替换的变量。 例如，{caseNumber} 被替换为联系人聊天会话的案例编号。

Key	Default label/Message
allAgentsForQueueAreBusy	我们所有专门为您的队列服务的坐席目前都很忙。 队列中排在您前面的人数 {queue, plural,one {是} other {是}} <strong>{queue, number}</strong> {queue, plural, one {人} other {人}}。
beginButton	开始聊天！
cancel	Cancel
caseNumber	Case #{caseNumber}
change	Change
chattedWith	您刚刚与
commonErrorText 聊天	出现意外错误。 请稍后再试。
done	已完成
dragAndDropDropzone	拖放文件到这里发送
dragAndDropDropzoneRejected	无法上传文件:(
EmailLabel	电子邮件
endChat	结束聊天
endChatTitle	你确定要结束这个对话吗？
endGame	结束游戏
ending	结束聊天...
fileSendingFailed	文件发送失败
getTranscriptDescription	将此对话的记录发送到以下电子邮件地址：
getTranscriptLink	Get chat transcript
invalidToken	Invalid token
ipAddressBlocked	IP 地址被阻止
正在加载	正在加载 ...
loadPreviousButton	加载以前的对话
messageLabel	Message
networkErrorText	出现网络错误。 请再试一次。
新案例	新案例
noAgentOnlineForQueue	您的队列目前没有可用的坐席。
offline	offline
offlineFormDesc	我们目前无法联系到
offlineFormSuccessMsgHead	谢谢！
offlineFormSuccessMsgSub	您的电子邮件已成功发送。 我们会尽快回复您。
在线	在线
onlineFormText	要开始聊天，请告诉我们您的名字。 我们的一位坐席将立即开始为您提供帮助。
请选择	请选择...
poweredBy	Powered by
preparingSession	正在准备会议...
replyBoxPlaceholder	写到这里，按<enter> send
retry	Retry
sendFileTextSize	请上传小于 {filesize} 的文件
sendFileTextSupportedFormat	支持的格式。
sendFileTextSupportedFormatDesc	Images， Videos， {fileFormats}
sendMessageButton	Send message
sendNewEmail	Send new email
sendTranscript	Send transcript
snakeWaiting	你正在排队。
startChatInPopup	咨询我们！
startNewChat	开始新聊天
状态重新连接	正在尝试连接...
surveySuccesfullySent	感谢您的反馈！
systemChattingWith	您现在正在与 {name}
聊天 主题	主题
transciptSentFailed	发送失败。
transciptSuccessallySent	记录文本已成功发送！
tryAgainButton	重试
unexpectedError	意外错误。
validationInvalidEmail	电子邮件地址无效
validationMandatory	此字段为必填字段
validationShorterName	请使用较短的名称
validationShortMessage	您的消息太短
正在等待	正在等待...
waitingDescription	我们的一名坐席很快就会与您联系。
等待页脚	点击<spacebar>以缩短等待时间。
waitingForAgent	正在等待坐席...
waitingInQueue	正在等待坐席。 您已在 {queue} 队列中。
yourNameLabel	您的姓名

翻译自定义字段

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

            brandembassy('chat', 'setCustomTranslations', {
    myCustomFieldATranslationKey: "Custom field value A",
    myCustomFieldBTranslationKey: "Custom field value B",
});

聊天窗口外观调用

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

关闭聊天图标

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

            brandembassy('enableCloseIcon', true);

隐藏已分配的坐席

            brandembassy('hideAssignedAgent');

隐藏标题

            brandembassy('hideHeader');

隐藏弹出窗口

            brandembassy('hidePopups');

显示客户头像

            brandembassy('showCustomerAvatar');

显示“发送”按钮

            brandembassy('chat','showSendButton');

尺寸

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

完整显示模式

位置和偏移

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

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

为回复框设置字符限制

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

使用数据选择器的自定义 CSS

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

要添加带有数据选择器的自定义 CSS，请参考此 JavaScript 调用作为参考：

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

可用数据选择器

• ACTIVITY_BAR
• AGENT_MESSAGE
• AGENT_MESSAGE_BUBBLE
• 阿凡达
• 内容
• CUSTOMER_MESSAGE
• CUSTOMER_MESSAGE_BUBBLE
• DELIMITER
• DROPDOWN_MENU
• 标头
• 输入
• IS_TYPING
• 信使
• 弹出窗口
• PRECONTACT_SURVEY
• PRECONTACT_SURVEY_DESCRIPTION
• PRIMARY_BUTTON
• REPLY_BOX
• SECONDARY_BUTTON
• SEND_BUTTON
• 文本区域
• TEXT_BUTTON
• 小部件
• 窗口

查看自定义 CSS API调用示例

以下 JavaScript 调用会生成具有黑色背景和白色文本的聊天气泡：

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

下图显示了示例 API 调用的结果：

主动操作

本部分中的调用可让您根据客户的行为主动与客户进行聊天。

执行触发器

启动由 定义的Workflow Automation 触发器trigger_id。

            brandembassy('executeTrigger', 'trigger_id');

设置访问者事件

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

            brandembassy('setVisitorEvent', 'event_type', 'custom_event_data');

设置访问者变量

存储已定义的客户信息，用于报告目的。

            brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');

存储转化

将客户行为存储为转化，用于报告目的。

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

网络访问者标签

您可以为在您网站上表现出某些行为的联系人添加标签。 此功能使用 Digital Experience 中的标记，并需要 Guide。

向联系人添加标签：

            brandembassy('assignTag', 'tagID');

从联系人中删除标签：

            brandembassy('removeTag', 'tagID');

与第三方应用程序集成

本节中的调用允许您在发生某些聊天事件时接收推送通知。

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

            brandembassy('getOngoingThreads');

识别聊天窗口中的持续联系

            brandembassy('getOngoingContact')

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

单击以查看兼容的事件

在下面的示例中，使用下列任何输入来替换“事件”。

• CaseToRoutingQueueAssignmentChanged

• PageView已创建

• 消息已创建

• MessageDeliveredToUser

• MessageDeliveredToEndUser

• MessageSeenByUser

• MessageSeenByEndUser

• MessageReadChanged

• MessageAddedIntoCase

• CaseInboxAssigneeChanged

• 案例已创建

• CaseStatusChanged

• SenderTypingStarted

• SenderTypingEnded

• MessageNote已创建

• ContactRecipientsChanged

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

            brandembassy('onPushUpdate', 'event', callback);

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

            brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);

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

            brandembassy('onAnyPushUpdate', callback);

集成到 Android 或 iOS 应用程序

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

            <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>