使用JavaScript

自定义聊天渠道

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

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

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

目前，所有JavaScript API 都支持每次调用的品牌大使加载程序。如果您在网站上使用独立 CXone Mpower 聊天，则所有这些调用还支持新的 CXone Mpower 加载程序。最终，所有支持聊天的 JavaScript API 都将使用 CXone Mpower 加载程序，而不是 Brand Embassy。

JavaScript 调用的结构因您使用的加载程序而异。您不能同时使用这两种结构。仅使用一个或另一个，具体取决于您使用的加载程序。

如果您使用CXone Mpower Guide 在网站上实现聊天，请使用CXone Mpower加载程序。在 Guide 中不支持此页面上的所有调用，但 Guide 文档列出了所有支持的 JavaScript 调用。

如果您使用CXone Mpower加载器，无论是通过数字聊天还是Guide，请按如下方式构建调用：

cxone('chat','enableChatAlwaysOnline');

如果您使用 Guide 实现聊天，则还必须构建如下所示的默认启动片段：

cxone('guide','init',);

如果您使用品牌大使加载器，请构建如下调用：

brandembassy('chat','enableChatAlwaysOnline');

向聊天频道添加JavaScript调用

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

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

单击应用程序选择器并选择ACD。
转到Digital > 数字联络点。
在“您的渠道”下，点击网站脚本。
从该页面复制 JavaScript 代码并将其粘贴到记事本等文本编辑程序中。务必包含开始和结束 <script> 标记。
在 Notepad++ 中，就在结束符上方</script>在您粘贴的代码的标记中，添加您要使用的 JavaScript 调用。在以下示例图片中，注释指示了添加调用的位置。该页面其余部分中介绍了您可以使用的受支持调用。
复制并粘贴整个脚本，包括开头和结尾<script> tags, into the header of a page of your website.
访问修改后的页面并发送测试聊天消息，以确保您的自定义项按预期运行。
当其经过全面测试并按预期运行后，将最终脚本复制到应包含聊天小部件的每个页面的页眉中。

聊天行为JavaScript 调用

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

打开聊天窗口

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


cxone('chat', 'openChatWindow');

关闭聊天窗口

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


cxone('chat', 'hideChatWindow');

聊天始终在线

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


cxone('chat', '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('guide', 'init',  '1032');
	cxone('guide', '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": "Ichabod",
		"lastName": "Crane",
		"_messageText": "Did you fall asleep again?"
	}
}

查看入站消息示例


{
	...,
	"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-8675309"
	},
	"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 是一种身份验证协议。它允许一个应用代表你与另一个进行交互，而无需泄露密码。其必须在聊天初始化之前调用。


cxone('chat', 'setAuthorizationCode', 'authorization_code');

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

允许之前输入的自定义字段值作为自动填充选项显示在稍后的字段或交互中。特定 ID 告知聊天窗口要保存哪些自定义字段值。当联系人开始新对话时，先前对话中的这些自定义字段将自动可用。如果联系人需要在新聊天会话中输入他们在之前聊天会话中已输入的相同信息（例如电子邮件地址），这有助于节省时间。如果您希望多个字段显示为自动填充选项，请将它们全部包含在同一个 API 调用中。


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

自动启动新的聊天会话

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

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

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

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

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

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

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


// set customer name (as this is required field)
cxone('chat', 'setCustomerName', 'Elizabeth');

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

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

启用并发聊天会话

您可以让联系人在同一浏览器中启动多个聊天会话。如果联系人已经在一个浏览器选项卡中处于活动聊天状态，则可以在新的浏览器选项卡或窗口中开始第二次聊天。

使用以下选项之一指定聊天数据的存储方式：

local：选项卡或窗口关闭后，数据会保留在浏览器中。这是默认存储方法。如果多个聊天会话同时在不同的选项卡中打开，则它们都被视为相同的交互。所有选项卡的聊天对话和体验都是相同的。
会话：存储每个单独的选项卡或窗口的数据，并在选项卡或窗口关闭时清除。这允许用户跨不同的选项卡或窗口启动多个聊天会话。每个聊天会话都被视为单独的交互。
inMemory：sessionId 和 customerId 仅用于聊天应用程序的内存中。数据不会保留在浏览器中。刷新浏览器会删除所有历史记录。当在多个浏览器选项卡或浏览器窗口中打开时，这将启用多个并发聊天会话。

要启用并发聊天会话，请添加值为 session 或 inMemory 的 storageType 键。

如果您使用 storageType： 'local' 但仍想清除对话历史记录，则可以创建一个事件侦听器，在聊天结束后删除 customerId。


cxone('chat', 
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'session',
	},
);

清除对话历史记录

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


cxone('chat', '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') 
		); 
	} 
});

自定义初始自动联系消息

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

覆盖默认的按钮文本。


cxone('chat', 'sendFirstMessageAutomatically', 'Hello');

动态更改初始消息。


cxone('chat', 'setFirstAutomatedMessageContent', 'Hello, I have a question');

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

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

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


cxone('chat', 'hideFirstSentMessage', false);

延迟案例创建

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


cxone('chat', 'sendFirstMessageAutomatically', false);

启用游戏模式

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

查看图像


cxone('chat', 'allowGameMode');

自动满意度调查

这可以启用或禁用它们是否被检测和显示。


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

聊天信息JavaScript调用

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

获取客户身份 ID

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


cxone('chat', 'getCustomerIdentityId');

隐藏联系前调查表单

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


cxone('chat', 'hidePreSurvey');

隐藏队列计数器

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


cxone('chat', 'hideQueueCounterAfterAssignment');
cxone('chat', 'hideAssignedAgent');
cxone('chat', 'hideSystemMessages');

将聊天通知音频静音

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


cxone('chat', 'muteAudioNotification', 'true');
// OR
cxone('chat', 'muteAudioNotification');

覆盖浏览器语言翻译

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


cxone('guide', 'init', 'brandId', 123, 'locale');

设置活动状态

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


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

设置代理图像

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


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

设置客户 ID

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


cxone('chat', 'setCustomerId', 'customer_id');

设置客户姓名

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


cxone('chat', 'setCustomerName', 'Elizabeth');

设置日期格式

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

查看图像


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

设置语言环境


cxone('chat', 'setLocale', 'locale');

显示案例信息

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


cxone('chat', 'showCaseInfo');

显示/隐藏发送记录按钮

如果您将

发送记录

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

查看图像


cxone('chat', 'hideSendTranscript');
cxone('chat', 'showSendTranscript');

隐藏发送转录：

查看图片


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

显示系统消息:

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

内部窗口
外部链接


// Internal Modal Window
cxone('chat', 'showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

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

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

要自定义按钮或内部窗口的外观，请使用本页所述的 CSS API 调用。

自定义字段、标签和短语

创建和填充自定义字段

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

要定义单个案例自定义字段的值：


cxone('chat', 'setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

要定义多个案例自定义字段的值：


cxone('chat', 'setContactCustomFields', { customFieldIndent: 'value', secondCustomFieldIdent: 'value' });

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


cxone('chat', 'setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

自定义字段限制为 1024 个字符。

自定义聊天标签和短语

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

要更改单条消息或标签：


cxone('chat', 'setTranslation', 'key', 'your translation');

要更改多条消息或标签：


cxone('chat', '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} 队列中。
您的NameLabel	您的姓名

翻译自定义字段

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


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

聊天窗口外观调用

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

关闭聊天图标

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

隐藏已分配的代理


cxone('chat', 'enableCloseIcon', true);

查看图像

隐藏标题

查看图像


cxone('chat', 'hideAssignedAgent');

隐藏弹出窗口查看图像

显示发送按钮

查看图像


cxone('chat', 'hideHeader');

大小


cxone('chat', 'hidePopups');


cxone('chat', 'showCustomerAvatar');


cxone('chat', 'chat','showSendButton');

您可以使用 CSS 规格支持的绝对或相对单位。

完整显示模式

位置和偏移

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

设置回复框的字符限制


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

查看图像

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

您可以通过添加自己的 CSS 来自定义聊天窗口的外观。


cxone('chat', 'setReplyBoxLimit', '280'); // default = null

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

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


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

仅使用data-selector属性应用自定义CSS组件。不要将其应用于类选择器或JavaScript代码的其他部分，例如在此示例中：

。Widget__Widget___1qQCf { background： red; }

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

主动操作

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

执行触发器

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


cxone('chat', 'executeTrigger', 'trigger_id');

设置访问者事件

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


cxone('chat', 'setVisitorEvent', 'event_type', 'custom_event_data');

设置访问者变量

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


cxone('chat', 'setVisitorVariable', 'variable_identifier', 'variable_value');

存储转化

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


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

网络访问者标签

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

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

向联系人添加标签：


cxone('chat', 'assignTag', 'tagID');

从联系人中删除标签：


cxone('chat', 'removeTag', 'tagID');

与第三方应用程序集成

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

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


cxone('chat', 'getOngoingThreads');

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


cxone('chat', 'getOngoingContact')

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

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


cxone('chat', 'onPushUpdate', 'event', callback);

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


cxone('chat', 'onPushUpdate', ['event', 'event', 'event'], callback);

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


cxone('chat', '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
  cxone('chat', ‘init’, BRAND_HASH);

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

  // Customer's name
  cxone('chat', 'setCustomerName', 'CUSTOMER_NAME');

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

</script>

使用JavaScript

向聊天频道添加JavaScript调用

聊天行为JavaScript 调用

打开聊天窗口

关闭聊天窗口

聊天始终在线

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

从Adaptive Card

设置授权码

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

自动启动新的聊天会话

启用并发聊天会话

清除对话历史记录

自定义初始自动联系消息

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

延迟案例创建

启用游戏模式

聊天信息JavaScript调用

获取客户身份 ID

隐藏联系前调查表单

隐藏队列计数器

将聊天通知音频静音

覆盖浏览器语言翻译

设置活动状态

设置代理图像

设置客户 ID

设置客户姓名

设置日期格式

显示案例信息

如果您将

自定义字段、标签和短语

创建和填充自定义字段

自定义聊天标签和短语

翻译自定义字段

聊天窗口外观调用

关闭聊天图标

隐藏标题

显示发送按钮

完整显示模式

位置和偏移

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

页眉和导航

消息

用户和代理信息

状态和连接

其他

主动操作

执行触发器

设置访问者事件

设置访问者变量

存储转化

网络访问者标签

与第三方应用程序集成

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

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

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

集成到 Android 或 iOS 应用程序