Personalizar los Canales de chat mediante JavaScript

Puede personalizar chat en vivo Los Agentes y contactos interactúan en tiempo real. y mensajería de chat Chat asincrónico en el que los contactos envían un mensaje de conversación en cualquier momento y esperan una respuesta. con JavaScript. NiCE CXone proporciona personalizaciones predeterminadas y sus llamadas de API JavaScript correlacionadas. Debe incluir estas Llamadas a la API con la etiqueta del script que agrega el chat a su sitio web. Para agregar estas características, debe acceder al código de su sitio web. Esta página explica dónde agregar JavaScript y las líneas de código exactas que se deben incluir. Usted también debe tener familiaridad con JavaScript o con el desarrollo web para usar con confianza la información de esta página.

Puede personalizar los siguientes aspectos de sus canales Diversos medios de comunicación de voz y digitales que facilitan las interacciones con los clientes en un centro de contacto. de chat:

Comportamiento de chat: Personalice cómo se comporta la ventana de chat. Esto incluye abrir y cerrar la ventana de chat o habilitar el modo de juego. El modo de juego permite a los clientes jugar a la Serpiente mientras esperan a un agente.
Información del chat: Personalice la información que se muestra en la ventana de chat. Esto incluye elementos como el nombre del cliente, la imagen del agente o el estado de actividad.
Campos personalizados, etiquetas y frases: Defina los campos personalizados o personalice las etiquetas de campo. También puede configurar texto alternativo para los mensajes automáticos que se muestran a los contactos.
Aspecto de la ventana de chat: Personalice el aspecto de la ventana de chat.Puede cambiar cosas como el tamaño y la posición de la ventana en la página web.
CSS personalizado: Defina CSS personalizado para la ventana de chat.
Acciones proactivas: Personalice la experiencia con las acciones proactivas según el comportamiento del cliente.
Other functions: Other things you can configure include:
- Que el entorno host escuche determinados eventos.
- Integración de canales de conversación digital en aplicaciones de iOS o Android.
- Habilitar la autenticación de OAuth.

Actualmente, todas las JavaScript API admiten un cargador de Representación de marca para cada llamada. Si utiliza chat independiente NiCE CXone en su sitio web, todas estas llamadas también admiten un nuevo cargador NiCE CXone. Finalmente, todas las JavaScript API de chat utilizarán el cargador NiCE CXone en lugar de Representación de marca.

La estructura de la llamada JavaScript es diferente dependiendo del cargador que utilice. No puede utilizar ambas estructuras al mismo tiempo. Utilice sólo una u otra dependiendo del cargador que utilice.

Si utiliza NiCE CXone Guide para implementar el chat en su sitio web, use el cargador NiCE CXone. No todas las llamadas de esta página son compatibles con Guide, pero la documentación de Guide enumera todas las llamadas de JavaScript compatibles.

Si utiliza el cargador NiCE CXone, ya sea a través del chat digital o de Guide, estructure las llamadas de esta manera:

cxone('chat','enableChatAlwaysOnline');

Si usa Guide para implementar el chat, también debe estructurar los fragmentos de lanzamiento predeterminados de esta manera:

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

Si utiliza el cargador de Representación de marca, estructure las llamadas de esta manera (verdadero/falso es opcional):

brandembassy('enableChatAlwaysOnline',true);

Agregar Llamadas JavaScript a un Canal de chat

Si aún no lo ha hecho, configure un canal de chat en vivo o de mensajería de chat. Pruebe el canal para asegurarse de que funcione con la configuración predeterminada antes de agregar personalizaciones. Configure las personalizaciones de chat en un entorno de Prueba antes de liberarlas en su entorno de producción. Esto ayudará a minimizar las interrupciones para los visitantes de su sitio web. También ayudará a garantizar que sus personalizaciones funcionen según lo previsto.

Copie el script y las Llamadas a la API exactamente como se muestra. Cualquier cambio inesperado podría hacer que tu canal no funcione correctamente.

Haga clic en el selector de aplicaciones y seleccione ACD.
Vaya a Digital > puntos de contactoDigital.
En Sus Canales, haga clic en Script del sitio web.
Copie el código JavaScript de la página y péguelo en un programa de edición de texto como Notepad++. Asegúrese de incluir las etiquetas <script> de apertura y cierre.
En Notepad++, justo encima de la etiqueta de cierre </script> del código que pegó, agregue las llamadas de JavaScript que desee utilizar. En la siguiente imagen de ejemplo, el comentario indica dónde agregar llamadas. Las llamadas admitidas que puede utilizar se describen en el resto de esta página.
Copie y pegue todo el script, incluidas las etiquetas de apertura y cierre <script>, en el encabezado de una página de su sitio web.
Visite la página modificada y envíe mensajes de chat de prueba para asegurarse de que sus personalizaciones funcionen como se espera.
Cuando esté totalmente probado y funcione como se espera, copie el script final en el encabezado de cada página que deba tener el widget de chat.

Comportamiento de chat JavaScript Llamadas

Las llamadas en esta sección le permiten cambiar el comportamiento de las ventanas de chat.

Abrir ventana de conversación

Abre una ventana de chat automáticamente. El comportamiento predeterminado es que las ventanas de chat se abran cuando un contacto hace clic en el icono de chat.


cxone('chat', 'openChatWindow');

Cerrar ventana de conversación

Cierra una ventana de chat automáticamente. El comportamiento predeterminado es que las ventanas de chat se cierren cuando un contacto hace clic en el icono de chat.


cxone('chat', 'hideChatWindow');

Chat Siempre Conectado

Muestra la ventana de chat como si hubiera agentes disponibles, incluso cuando no hay agentes en línea.


cxone('chat', 'chat','enableChatAlwaysOnline');

Campos personalizados persistentes del chat anterior

Puede elegir si desea que los campos personalizados persistan o se purguen del almacenamiento local una vez iniciada la Interacción. Esto permite seleccionar qué campos personalizados siguen apareciendo en todas las interacciones con un contacto. El 'field_id' hace referencia al valor del campo Ident cuando crear un campo personalizado.

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

Enviar los Datos de Postback desde Adaptive Card

Studio actions y bots pueden enviar Adaptive Cards a los contactos a través del chat. Para que el chat digital envíe datos de retorno a Studio o a un bot, debe activar un gestor. Un gestor de Adaptive Card funciona dentro del bot o la acción de Studio para gestionar y responder a las interacciones con Adaptive Card. El controlador se activa cuando un usuario interactúa con los componentes de un Adaptive Card, como hacer clic en un botón o seleccionar una opción en un menú desplegable. El gestor descifra la entrada del usuario y determina la respuesta o acción apropiada a tomar. Agregue el comando del gestor predeterminado y el comando de enviar mensaje, para que puedan responder Studio o los bots según corresponda o para que almacenen los datos de Adaptive Card con fines informativos. También puede anular el gestor predeterminado con un comando de gestor personalizado.

Ver ejemplo


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

Agregar el comando del gestor Adaptive Card predeterminado:


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

Comando de enviar mensaje:


 sendMessage(messageContent: MessageContent)

Crear comando de gestor personalizado:


{
	"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?"
	}
}

Ver ejemplo de mensaje entrante


{
	...,
	"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\"}}"
	}
							}
}

Ver ejemplo de mensaje saliente


{
	"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"
					}
				}
			]
		}
	}
}

Establecer código de autorización

Establece un código de autorización para un flujo de OAuth. OAuth es un protocolo de autenticación. Permite que una aplicación interactúe con otra en su nombre sin exponer contraseñas. Se debe llamar antes de la inicialización del chat.


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

Configurar los Campos Prellenados de la Encuesta Previa al Contacto

Allows previously-entered custom field values to appear as an auto-fill option in later fields or interactions. Specific IDs inform the chat window which custom field values to save. When a contact begins a new conversation, these custom fields from previous conversations are automatically available. This helps save time if a contact needs to enter the same information in a new chat session that they've entered in a previous chat session, such as an email address. If there are multiple fields you want to appear as autofill options, include them all in the same API call.


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

Iniciar automáticamente una nueva Sesión de chat

Crea un nuevo mensaje de chat Chat asincrónico en el que los contactos envían un mensaje de conversación en cualquier momento y esperan una respuesta. o sesión de chat en vivo Los Agentes y contactos interactúan en tiempo real. si no está actualmente en curso. Utilice esta llamada en las páginas de menor tráfico de su sitio web para evitar abrumar a sus agentes con contactos.

Digital Experience (DX) crea un nuevo caso y lo agrega a la cola cuando se envía el primer mensaje de la sesión de chat. Cuando se inicia la sesión de chat, se envía un mensaje automático oculto en nombre del cliente. Esto disminuye la cantidad de tiempo que los contactos esperan a un agente al iniciar el proceso antes. Las sesiones de chat comienzan cuando un contacto hace clic en el icono de chat para iniciar una conversación o cuando se abre la ventana de chat para sesiones de chat iniciadas automáticamente. Aunque el mensaje inicial está oculto para el cliente, el agente puede verlo.

Puede personalizar el texto del mensaje inicial oculto.

Auto-starting a chat session skips the precontact survey form. Because of this, you need to use other methods to collect information about contacts. For example, you can have agents enter the information manually into the customer card. You can also configure customer authentication using an OAuth integration.

Routing para los casos iniciados automáticamente ocurre según las colas de enrutamiento Determina a qué agentes enrutar los casos digitales, utilizando criterios como que el agente tenga experiencia en ese tipo de caso. configurado en Digital Experience (DX). Para las sesiones de chat en vivo, si no hay agentes disponibles, la ventana de chat muestra un mensaje de Esperando agente disponible.

Para iniciar automáticamente una sesión de chat, utiliza estas llamadas en el orden que se muestra:


cxone('chat', 'openChatWindow');

cxone('chat', 'autoStartSession');

Si agrega llamadas adicionales al script, autoStartSession debe ser siempre la última llamada en el script. Por ejemplo:


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

Habilitar Sesiones de Chat Simultáneas

Puede permitir que los contactos inicien múltiples sesiones de chat en el mismo navegador. Si un contacto ya se encuentra en un chat activo en una pestaña del navegador, puede iniciar un segundo chat en una nueva pestaña o ventana del navegador.

Especificar cómo se almacenan los datos del chat utilizando una de las siguientes opciones:

local: Los datos persisten en el navegador después de que se cierra la pestaña o ventana. Este es el método de almacenamiento predeterminado. Si hay múltiples sesiones de chat abiertas en diferentes pestañas al mismo tiempo, todas se consideran la misma interacción. La conversación y la experiencia del chat son las mismas en todas las pestañas.
sesión: Los datos se almacenan para cada pestaña o ventana individual y se eliminan cuando la pestaña o ventana se cierra. Esto permite que los usuarios inicien múltiples sesiones de chat en diferentes pestañas o ventanas. Cada sesión de chat se trata como una interacción independiente.
inMemory: Los sessionId y customerId solo se usan en la memoria de la aplicación de chat. Los datos no persisten en el navegador. Actualizar el navegador elimina todo el historial. Esto habilita sesiones de chat concurrentes múltiples cuando se abren en varias pestañas o ventanas del navegador.

Para habilitar las sesiones de chat simultáneas, agregue la clave storageType con un valor de session o inMemory.

Si usa storageType: 'local' y aún desea vaciar el historial de conversación, puede crear un objeto de escucha de eventos que elimine el customerId después de que finalice el chat.


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

Vaciar historial de conversación

Elimina el historial de conversaciones una vez finalizada una conversación de chat. Esto puede ser útil si utiliza la opción de almacenamiento predeterminada del chat, almacenamiento local. Esta opción de almacenamiento almacena los datos incluso después de que se cierren las instancias del navegador. En este caso, puede quitar específicamente el historial de la conversación al borrar el customerID del almacenamiento local. El siguiente ejemplo crea un objeto de escucha de eventos para detectar el evento caseStatusChanged del chat. Esto indica que una sesión de chat ha finalizado. Posteriormente, se llama al comando removeItem, que elimina el customerID del almacenamiento local del navegador.


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

Personalizar el Mensaje de Contacto automatizado inicial

El mensaje predeterminado es el texto en el botón que el cliente hace clic para iniciar la conversación. Puede personalizar el texto del mensaje automatizado inicial de tres maneras:

Reemplace el texto del botón predeterminado.


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

Cambiar el mensaje inicial de forma dinámica.


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

Cambie el texto del mensaje en la página de traducciones.

Hacer que el Mensaje automatizado inicial sea visible para los contactos

Si desea que el contacto pueda ver el mensaje automático inicial, agregue esta llamada a su secuencia de comandos:


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

Intervalo en la creación de casos

Puede configurar Digital Experience (DX) para esperar el primer mensaje real del contacto antes de crear un caso usando esta llamada:


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

Habilitar el modo de juego

Permite que los contactos jueguen al juego Snake mientras esperan a un agente.


cxone('chat', 'allowGameMode');

Encuesta de satisfacción automatizada

Una encuesta de satisfacción se puede detectar y mostrar automáticamente en una ventana emergente. Esto permite detectarlas y mostrarlas o no.


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

Información de Chat JavaScript Llamadas

Estas llamadas le permiten personalizar la información que está disponible para los contactos durante una sesión de chat.

Obtener ID de identidad del Cliente

Devuelve el identificador único del cliente en el chat.


cxone('chat', 'getCustomerIdentityId');

Ocultar formulario de Encuesta previa al contacto

El formulario de encuesta previa al contacto aparece al comienzo de unamensajes de chat Chat asincrónico en el que los contactos envían un mensaje de conversación en cualquier momento y esperan una respuesta. sesión. Recopila información sobre el contacto, como su nombre. Si lo desea, puede ocultar el formulario de encuesta previa al contacto y hacer que aparezca la ventana de chat tan pronto como un contacto inicie una sesión de mensajería de chat.


cxone('chat', 'hidePreSurvey');

Ocultar Contador de cola

El contador de colas permite a un contacto saber en cuánto tiempo podrá ayudarlo un agente en función de su posición en la cola del agente. Puede ocultar el contador de la cola después de que el contacto se haya enrutado con éxito a un agente. Esto permite a los agentes eliminar tarjetas de clientes de su bandeja de entrada sin que los contactos se den cuenta.


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

Silenciar el audio de Notificación de chat

Permite desactivar el sonido de notificación de chat. El sonido de notificación de chat está activado de forma predeterminada. Esto debe configurarse independientemente de otras configuraciones de sonido de chat. Puede cambiar el valor a 'false', para volver a activar el audio de notificación de chat.


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

Anular las traducciones del Idioma del navegador

Reemplaza la configuración de idioma del navegador del usuario o un local personalizado por una traducción establecida. Por ejemplo, puede asegurarse de que cierto texto siempre aparezca en inglés sin importar la configuración de idioma del navegador de un contacto.


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

Establecer Estado de actividad

Cambia el mensaje en la barra de actividades. Por ejemplo, puede usarlo para comunicar su tiempo de respuesta para una sesión de mensajería de chat.Esto podría ser útil porque la mensajería de chat es una forma asincrónica de chat, por lo que los contactos podrían tener que esperar para saber de un agente.


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

Establecer la Imagen del Agente

Cambia dinámicamente la imagen del agente que se muestra en la ventana de chat. De forma predeterminada, Digital Experience (DX) utiliza la imagen del perfil del agente.Cuando incluye esta llamada en su script, utiliza la imagen especificada por la URL en el snippet de código. Reemplace la URL de ejemplo con la URL de la imagen que desea que use el chat.


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

Establecer Id de cliente

Establece un identificador único para el cliente en el chat.


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

Establecer Nombre del cliente

Nombre del cliente es un campo en elformulario de encuesta previa al contacto, qué contactos deben completar antes de chatear con un agente en unmensajes de chat Chat asincrónico en el que los contactos envían un mensaje de conversación en cualquier momento y esperan una respuesta. canal. Esta llamada completa el campo de forma dinámica.


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

Establecer Formato de fecha

Se puede configurar para usar formato de fecha absoluta (03/12/2035) o formato de fecha relativa (hoy, Lunes).


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

Establecer Local

Establece la configuración regional para las traducciones en la ventana de chat.


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

Mostrar Información del Caso

Solo para canales de mensajería de chat Chat asincrónico en el que los contactos envían un mensaje de conversación en cualquier momento y esperan una respuesta.. Muestra información del caso al contacto.


cxone('chat', 'showCaseInfo');

Mostrar / Ocultar el botón Enviar transcripción

Si hace visible el botón Enviar transcripción, debe configurar el canal de chat para permitir que los contactos se envíen a sí mismos la transcripción del chat.Configure esta opción para la mensajería de chat o el chat en vivo.


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

Mostrar/Ocultar Mensajes del Sistema

Muestra u oculta mensajes del sistema como el historial de asignación de agentes.


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

Términos de uso

Puede hacer que un documento de condiciones de uso esté disponible para los contactos desde la ventana de chat. Esta función agrega un botón a la ventana.Puede personalizar la etiqueta y el estilo del botón, y lo que sucede cuando los contactos hacen clic en él. La acción al hacer clic puede mostrar los términos de uso como:

Una ventana interna
Un enlace externo


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

Para personalizar el aspecto del botón o la ventana interna, use las Llamadas a la API de CSS que se describen en esta página.

Campos personalizados, Etiquetas y Frases

Crear y Completar Campos personalizados

Antes de usar las siguientes llamadas de la API de campo personalizado, primero debe crear el campo personalizado en NiCE CXone. Cree el campo personalizado para un Customer Card o para un Contact, según el tipo de campo personalizado que desee completar mediante la API.

El valor de ident que asigna al campo personalizado durante la creación es el mismo valor al que hará referencia en la Llamada a la API. Si el campo personalizado no existe en la plataforma, la Llamada a la API no tendrá ningún efecto.

Para obtener instrucciones paso a paso sobre cómo crear campos personalizados, consulte Manage Custom Fields.

Use la API de JavaScript de CXone Digital Chat para capturar datos de su página web y almacenarlos como un valor de campo personalizado. Esto le permite pasar automáticamente información contextual, como la página en la que se encuentra el visitante, su id de cuenta o cualquier otro dato importante directamente a NiCE CXone cuando comienza una interacción de chat.

Hay dos métodos de API disponibles, según el lugar donde desee almacenar los datos del campo personalizado:

setContactCustomField : almacena el valor del campo personalizado en el Contact, que representa una sola interacción o conversación. Utilice esto cuando los datos son específicos de esa sesión de chat en particular. Por ejemplo, la URL de la página donde se inició el chat, un producto seleccionado o un número de referencia de un formulario.
Al usar setCaseCustomField, es posible que vea una advertencia de obsolescencia en la consola del navegador que sugiere usar setContactCustomField en su lugar.

setCustomerCustomField — Almacena el valor del campo personalizado en el Customer Card, que representa el perfil del cliente en todas las interacciones. Utilice esto cuando los datos estén vinculados al cliente en sí. Por ejemplo, su ID de cuenta, nivel de membresía o idioma preferido.

Perspectiva general de la implementación

La siguiente tabla resume los métodos de API disponibles para establecer valores de campo personalizado. Consulte los ejemplos de código detallados debajo de la tabla para obtener orientación sobre la implementación.

Ejemplo	Método de API	Descripción
Establecer un campo personalizado de contacto único	`setContactCustomField`	Para completar un campo de Caso a la vez.
Establecer varios campos personalizados de contacto a la vez	`setContactCustomFields`	Actualización masiva eficiente de varios campos de Case.
Establecer un solo campo personalizado Customer Card	`setCustomerCustomField`	Para campos de perfil de Customer Card.
Configurar varios campos personalizados de Customer Card a la vez	`setCustomerCustomFields`	Actualización masiva de varios campos de Customer Card.
Ejemplo de valor estático	`setContactCustomField`	Valor codificado directamente, por ejemplo, `'Página Póngase en contacto con nosotros'`.
Ejemplo de valor dinámica	`setContactCustomField`	Valor dinámica, por ejemplo, `window.location.href`.

Los valores de campo personalizado se pueden establecer de dos formas:

Estáticamente — El valor está codificado directamente en la Llamada a la API. Esto es útil cuando el valor siempre es el mismo para una página determinada, como etiquetar en qué página se encuentra el widget de chat.

Para definir el valor de un campo personalizado de contacto único

cxone('chat','setContactCustomField', 'pagesource', 'Contact Us Page');

Para definir el valor de más de un campo personalizado de contacto

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

El valor de un solo campo Customer Card para definir

cxone('chat','setCustomerCustomField', 'email', 'leia@starwars.com');

Para definir el valor de más que un campo Customer Card

cxone('chat','setCustomerCustomFields',
   {
   customFieldIdent: 'value',
   secondCustomFieldIdent: 'value'
   } 
   );

Dinámicamente — El valor se obtiene de la página web en tiempo de ejecución mediante JavaScript. Esto es útil cuando el valor varía según el visitante o la sesión, como capturar la URL de la página actual o el id de un usuario que inició sesión.
```
cxone('chat','setContactCustomField', 'currentPage', window.location.href);
```
Ver imagen

Si está usando un formulario previo al contacto para recopilar información de los visitantes antes de que inicie el chat, no necesita usar estos métodos de API para capturar los mismos datos. Los campos del formulario previo al contacto se guardan automáticamente en el caso y en la tarjeta del cliente según lo configurado.

Para definir el valor de un campo personalizado Customer Card:

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

Los campos personalizados están limitados a 1024 caracteres.

Agregue las llamadas de API de campo personalizado al mismo bloque de script donde está incrustado el widget de Guide en su página web. Coloque las llamadas de API justo encima de la etiqueta de cierre </script>, después del código de inicialización del widget. Por ejemplo:

<script>
   // CXone widget initialization code
   cxone('guide', 'init');
   // Add custom field API calls here
   cxone('chat', 'setCaseCustomField', 'pageSource', 'Contact Us Page');
   cxone('chat', 'setCustomerCustomField', 'accountTier', 'Premium');
   </script>

Para obtener instrucciones detalladas sobre cómo integrar el widget y dónde colocar las llamadas de personalización, consulte Personalizar Guide con JavaScript.

Personalizar Etiquetas y Frases de Chat

Puede personalizar muchas de las etiquetas y frases que usan los canales de chat digitales, así como definir las personalizaciones. Si necesita cambiar las frases o etiquetas en pantalla de forma dinámica, use estas llamadas JavaScript.

Para cambiar un solo mensaje o etiqueta:


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

Para cambiar múltiple mensajes o etiquetas:


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

Haga clic para ver los mensajes y las etiquetas que puede personalizar.

Las de llaves indican variables que el sistema reemplaza por datos reales. Por ejemplo, {caseNumber} se reemplaza con el número de caso de la sesión de chat del contacto.

Clave	Etiqueta/mensaje predeterminado
allAgentsForQueueAreBusy	Todos nuestros agentes dedicados a su cola están ocupados actualmente. {queue, plural, one {Hay} other {Hay}} <strong>{queue, number}</strong> {queue, plural, one {persona} other {personas}} adelante de usted en la cola.
beginButton	¡Comience a chatear!
cancelar	Cancelar
número de caso	Caso # {caseNumber}
cambio	Cambiar
charlado con	Acabas de tener una charla con
commonErrorText	Hubo un error inesperado. inténtelo de nuevo más tarde.
Terminado	Terminado
dragAndDropDropzone	Arrastrar y descartar archivos aquí, para enviarlos
dragAndDropDropzoneRejected	Imposible subir archivo :(
Etiqueta de correo electrónico	Correo electrónico
Chat finalizado	Finalizar chat
endChatTitle	¿Estás seguro de que quieres terminar esta conversación?
endGame	Finalizar juego
Finalizando	Finalizando chat ...
fileSendingFailed	Se produjo un error al enviar el archivo
getTranscriptDescription	Envíe la transcripción de esta conversación a la siguiente dirección de correo electrónico:
getTranscriptLink	Obtener la transcripción de la conversación
simbolo no valido	Token no válido
ipAddressBlocked	Se bloqueó la dirección IP
cargando	Cargando...
loadPreviousButton	Cargar conversaciones anteriores
messageLabel	Mensaje
networkErrorText	Hubo un Error de red. inténtelo de nuevo.
nuevo caso	Nuevo caso
noAgentOnlineForQueue	No hay ningún agente disponible para su cola en este momento.
Desconectado	Desconectado
offlineFormDesc	MI no está disponible en este momento
offlineFormSuccessMsgHead	¡Gracias!
offlineFormSuccessMsgSub	Su correo electrónico se envió correctamente. Nos pondremos en contacto con usted pronto.
Conectado	Conectado
onlineFormText	Para iniciar un chat, díganos su nombre. Uno de nuestros agentes comenzará a ayudarlo de inmediato.
por favor seleccione	Seleccione…
energizado por	Desarrollado por
preparando sesión	Preparando sesión…
responseBoxPlaceholder	Escriba aquí, presione <intro> para enviar
rever	Reintentar
sendFileTextSize	Cargue archivos más pequeños que {filesize}
sendFileTextSupportedFormat	formatos compatibles.
sendFileTextSupportedFormatDesc	Imágenes, videos, {fileFormats}
sendMessageButton	Enviar mensaje
sendNewEmail	Enviar nuevo correo electrónico
sendTranscript	Enviar transcripción
serpiente esperando	Usted está en la posición {queue} en cola.
startChatInPopup	¡Preguntanos!
startNewChat	Comenzar un nuevo chat
Estado Reconectando	Intentando conectarse...
Encuesta	¡Gracias por sus comentarios!
systemChattingWith	Ahora estás chateando con {name}
Tema	Tema
transciptSentFailed	Error en el envío.
transciptSuccesfullySent	La transcripción se envió de forma exitosa.
tryAgainButton	Inténtelo de nuevo
error inesperado	Error inesperado.
validationInvalidEmail	La dirección de correo electrónico no es válida
validación Obligatorio	Este campo es obligatorio
validationShorterName	Use un nombre más corto
validationShortMessage	Su mensaje es muy corto
Esperando	Esperando...
Esperando descripción	Uno de nuestros agentes hablará contigo en breve.
Esperando	Presione <spacebar> para acortar la espera.
esperandoAgente	Esperando a un agente...
esperandoInQueue	Esperando agente. Usted está {queue} en cola.
yourNameLabel	Su nombre

Traducir Campos personalizados

Puede traducir los campos personalizados que aparecen en la ventana de chat.


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

Llamadas de apariencia de la ventana de chat

Puede modificar la apariencia de la ventana de chat.

Cerrar Icono de chat

Cuando se establece en verdadero, se muestra un icono X en la ventana en lugar de la opción finalizar chat en el menú de configuración.


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

Ocultar Agente asignado


cxone('chat', 'hideAssignedAgent');

Ocultar Encabezado


cxone('chat', 'hideHeader');

Ocultar ventanas emergentes


cxone('chat', 'hidePopups');

Mostrar avatar del Cliente


cxone('chat', 'showCustomerAvatar');

Mostrar el botón Enviar


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

Tamaño

Personaliza el ancho y alto de la ventana de chat. Puede utilizar unidades absolutas o relativas admitidas por la especificación de CSS.


cxone('chat', 'setWindowWidth', '100%');
cxone('chat', 'setWindowHeight', '100%');

Modo de visualización completo


cxone('chat', 'setFullDisplay');
// OR
cxone('chat', 'chat','setWindowWidth', '100%');
cxone('chat', 'chat','setWindowHeight', '100%');

Posición y Desplazamiento

La llamada setPositionX define el lado izquierdo o derecho de la pantalla como la posición inicial. Las llamadas setOffsetX y setOffsetY definen cuántos píxeles se desplaza la ventana de chat horizontal y verticalmente, respectivamente, desde el punto inicial.


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

Establecer Límite de caracteres para el cuadro de respuesta


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

CSS personalizado con selectores de datos

Puede personalizar la apariencia de la ventana de chat agregando su propio CSS. Especifique la parte de la ventana de chat que desea personalizar con un atributo data-selector. La lista desplegable que aparece a continuación contiene una lista de todos los componentes que puede seleccionar con el atributo data-selector. Los selectores de datos le permiten Especificar la parte de la ventana de chat a la que desea aplicar el CSS personalizado. Después del data-selector, agregue su estilo entre llaves. Si desea aplicar estilo a múltiples elementos, debe agregar todo su CSS en una sola llamada JavaScript. Si utiliza la misma llamada a JavaScript múltiples veces, la última llamada a JavaScript anulará todo el CSS anterior. También puede personalizar el CSS para el chat directamente en NiCE CXone.

Para agregar CSS personalizado con selectores de datos, use esta llamada JavaScript como referencia:

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

Aplique componentes de CSS personalizados utilizando solo el atributo data-selector. No lo aplique a selectores de clase u otras partes del código JavaScript, como en este ejemplo:

.Widget__Widget___1qQCf { background: red; }

Las ventanas pueden estar compuestas de múltiples bloques anidados. Los selectores de componentes enumerados en esta sección nombran la raíz de cada componente. Si desea aplicar CSS a uno de los bloques anidados de un componente, use la consola del desarrollador para inspeccionar el componente y poder seleccionar el bloque correcto.

Acciones Proactivas

Las llamadas en esta sección le permiten involucrar de manera proactiva a los clientes en un chat en función de su comportamiento.

Ejecutar Activar

Inicia el disparador de Workflow Automation definido por el trigger_id.


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

Establecer Evento de visitante

Almacena el comportamiento del cliente definido (el evento) para fines de generación de Reporting. Cuando esta llamada se usa con el Mobile SDK, event_type se cambia a custom_event_type.


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

Establecer Variable de visitante

Almacena la información definida del cliente para fines de generación de informes.


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

Conversación de tiendas

Almacena el comportamiento del cliente como una conversación con fines de generación de reportes.


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

Etiquetas de Visitante Web

El contenido de esta sección corresponde a un producto o función que forma parte de un programa de vista previa pública. Si usted no forma parte de la vista previa y desea obtener más información, comuníquese con su representante de cuenta.

Puede etiquetar contactos que muestren determinados comportamientos en su sitio web. Esta función utiliza etiquetas de Digital Experience (DX) y requiere Guide.

Para agregar una etiqueta a un contacto:


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

Para eliminar una etiqueta de un contacto:


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

Integrar con Aplicaciones de Terceros

Las llamadas en esta sección le permiten recibir notificaciones automáticas cuando ocurren ciertos eventos de chat.

Reconocer hilos activos en la ventana de chat


cxone('chat', 'getOngoingThreads');

Reconocer un contacto en curso en la ventana de chat


cxone('chat', 'getOngoingContact')

Reciba notificaciones automáticas para Eventos de chat específicos

Para recibir una notificación de un evento de chat:


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

Para recibir una notificación de más que un evento de chat:


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

Para recibir una notificación de todos los eventos de chat:


cxone('chat', 'onAnyPushUpdate', callback);

Integrar con Aplicaciones de Android o iOS

Puede integrar un chat digital en aplicaciones de Android o iOS. La aplicación nativa debe usar WebView donde se agrega el código de inicialización de JavaScript. Este código de ejemplo usa el JavaScript de esta página para modificar la apariencia y el comportamiento de la función de chat:


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