Personalizar los canales de chat mediante JavaScript

Puede personalizar el chat en directo Los agentes y contactos interactúan en tiempo real y la mensajería de chat Chat asíncrono en el que los contactos envían un mensaje de chat en cualquier momento y esperan una respuesta con JavaScript. CXone ofrece personalizaciones predeterminadas y sus llamadas a la API JavaScript relacionadas. 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 exactas de código que debe introducir. También debería estar familiarizado con JavaScript o el desarrollo web para usar la información de esta página con confianza.

Puede personalizar los siguientes aspectos de sus canales Una forma de que los contactos interactúen con agentes o bots. Un canal puede ser de voz, correo electrónico, chat, redes sociales, etc. 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 de chat: Personalice la información que se muestra en la ventana de chat. Esto incluye cosas como el nombre del cliente, la imagen del agente o el estado de la 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. Un ejemplo del script de inicialización de Javascript con un comentario que indica la ubicación donde agregaría los comandos de la API.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.
Otras funciones: Otras cosas que puede configurar incluyen:
- Tener el entorno de acogidaescuchar ciertos eventos.
- Integrar canales de chat digital en aplicaciones iOS o Android.
- HabilitaciónAutenticación OAuth.

Actualmente, todas las API de JavaScript usan un cargador Brand Embassy para cada llamada. Si utiliza chat independiente CXone en su sitio web, todas estas llamadas también admiten un nuevo cargador CXone. Con el tiempo, todas las API de JavaScript para chat usarán el cargador de CXone en lugar del de Brand Embassy.

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 usa CXone Guide para implementar el chat en su sitio web, utilice el cargador CXone. No todas las llamadas de esta página son compatibles con Guide, pero la documentación de CXone Guide lista todas las llamadas JavaScript compatibles.

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


            cxone('chat','enableChatAlwaysOnline');

Si utiliza el cargador de Brand Embassy, estructure las llamadas de esta manera:


            brandembassy('enableChatAlwaysOnline');

Agregar llamadas JavaScript a un canal de chat

Si aún no lo ha hecho, configure un chat en vivo o un canal de mensajes de chat. Pruebe el canal para asegurarse de que funciona 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 su canal no funcione correctamente.

Haga clic en el selector de aplicaciones y seleccione ACD.
Ir aDigital >Puntos de contacto digital.
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 de apertura y cierre <script>.
En Notepad++, justo encima de la etiqueta de cierre </script> del código que pegó, agregue las llamadas de JavaScript que quiere usar. En la siguiente imagen de ejemplo, el comentario indica dónde agregar llamadas. Las llamadas admitidas que puede usar se describen en el resto de esta página.

Ver imagen
Copie y pegue el script completo, con 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ía mensajes de chat de prueba para asegurarse de que las personalizaciones funcionan como es debido.
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.

Llamadas a JavaScript de comportamiento de chat

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

Abrir ventana de chat

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.


            brandembassy('openChatWindow');

Cerrar ventana de chat

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.


            brandembassy('hideChatWindow');

Chat siempre en línea

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


            brandembassy('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' se refiere al valor del campo Ident al crear un campo personalizado.


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

Enviar los Datos de Postback desde Tarjeta adaptable

Las acciones Studio y los bots pueden enviar Tarjeta adaptable 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 Tarjeta adaptable funciona dentro del bot o la acción de Studio para gestionar y responder a las interacciones con Tarjeta adaptable. Se activa el gestor cuando un usuario interactúa con los componentes de una Tarjeta adaptable, como hacer clic en un botón o seleccionar una opción de 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 Tarjeta adaptable 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('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>

Agregar el comando del gestor Tarjeta adaptable predeterminado:


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

Enviar comando de 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": "John",
					"lastName": "Doe",
					"_messageText": "Submitted something for you"
					}
			}

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

Establecer código de autorización

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


            brandembassy('setAuthorizationCode', 'authorization_code');

Iniciar automáticamente una nueva sesión de chat

Crea un nuevo mensaje de chat Chat asíncrono en el que los contactos envían un mensaje de chat 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 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 oculto inicial.

El inicio automático de una sesión de chat omite elformulario de encuesta previa al contacto. Debido a esto, debe usar otros métodos para recopilar información sobre los contactos. Por ejemplo, puede hacer que los agentes ingresen la información manualmente en la tarjeta del cliente. También puede configurar la autenticación de clientes mediante una integración de OAuth.

El enrutamiento para los casos de inicio automático se produce de acuerdo con las colas de enrutamiento El sistema utiliza colas de enrutamiento para determinar a qué agentes enrutar los casos. El administrador del sistema crea colas de enrutamiento para que ciertos casos se enruten a agentes con experiencia en ese tipo de caso. configuradas en Digital Experience. 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:


            brandembassy('openChatWindow');

brandembassy('autoStartSession');

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


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

Activar sesiones de chat simultáneas

Puede permitir que los contactos inicien varias sesiones de chat en el mismo navegador. Si están en un chat activo en una pestaña del navegador, esto permite al contacto iniciar un segundo chat en una nueva pestaña o ventana del navegador.

Para activar este comportamiento, debe especificar cómo se almacenan los datos del chat. Tiene dos opciones:

localStorage: Los datos persisten en el navegador después de cerrar la pestaña o ventana. Este es el método de almacenamiento predeterminado. Si hay varias sesiones de chat abiertas simultáneamente en distintas pestañas, todas se consideran la misma interacción. La conversación de chat y la experiencia es la misma en todas las pestañas.
sessionStorage: Los datos se almacenan para la pestaña o ventana individual, y luego se borran cuando se cierra la pestaña o ventana. El usuario puede crear varias sesiones de chat en diferentes pestañas o ventanas. La sesión de chat en cada pestaña se considera una interacción única.

Para activar sesiones de chat concurrentes, agregue la clave storageType con un valor de sessionStorage, como se muestra en el siguiente ejemplo.

Si utiliza la opción localStorage y aún así desea vaciar el historial de conversaciones, puede crear una escucha de eventos que elimine el customerID una vez finalizado el chat.


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

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 eliminar específicamente el historial de conversaciones borrando el customerID del almacenamiento local. El siguiente ejemplo crea una escucha de eventos para escuchar el evento caseStatusChanged del chat. Esto indica que una sesión de chat ha finalizado. Después, se llama al comando removeItem que elimina el customerID del almacenamiento local del navegador.


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

Personalizar el mensaje de Contacto automatizado inicial

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

Anula el texto del botón predeterminado.


                brandembassy('sendFirstMessageAutomatically', 'Hello');

Cambie el mensaje inicial de forma dinámica.


                brandembassy('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:


            brandembassy('hideFirstSentMessage', false);

Retraso en la creación de casos

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


            brandembassy('sendFirstMessageAutomatically', false);

Habilitar el modo de juego

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


            brandembassy('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.


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

Llamadas de JavaScript de información de chat

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.


            brandembassy('getCustomerIdentityId');

Ocultar formulario de encuesta previa al contacto

El formulario de encuesta previa al contacto aparece al comienzo de unamensajes de chat Chat asíncrono en el que los contactos envían un mensaje de chat 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.


            brandembassy('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.


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

Silenciar el audio de notificación del chat

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


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

Anular las traducciones del idioma del navegador

Anula la configuración de idioma del navegador del usuario o una configuración regional personalizada a una traducción establecida. Por ejemplo, puede asegurarse de que cierto texto aparezca siempre en inglés, independientemente de la configuración de idioma del navegador de un contacto.


            brandembassy('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.


            brandembassy('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 utiliza la imagen en el 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.


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

Establecer ID de cliente

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


            brandembassy('setCustomerId', 'customer_id');

Establecer nombre de 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 asíncrono en el que los contactos envían un mensaje de chat en cualquier momento y esperan una respuesta canal. Esta llamada completa el campo de forma dinámica.


            brandembassy('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).


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

Establecer configuración regional

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


            brandembassy('setLocale', 'locale');

Mostrar información del caso

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


            brandembassy('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.


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

Mostrar/ocultar mensajes del sistema

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


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

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

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

Campos, etiquetas y frases personalizados

Crear y completar campos personalizados

Los campos personalizados que usa con esta llamada son los mismos que puede utilizar en tarjeta de cliente. Si usa estas llamadas antes de abrir una ventana de chat, los campos en el formulario de precontacto se rellenan con los datos que usted incluya en la llamada de JavaScript.

Para definir el valor de uncampo personalizado del caso:


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

Para definir el valor de un tarjeta de cliente campo personalizado:


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

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:


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

Para cambiar varios mensajes o etiquetas:


            brandembassy('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.

Llave	Etiqueta predeterminada/Mensaje
allAgentsForQueueAreBusy	Todos nuestros agentes dedicados a su cola están ocupados en este momento. Hay {queue, plural,one {una} other {más de}} <strong>{queue, number}</strong> {queue, plural, one {persona} other {personas}} delante de usted en la cola.
beginButton	¡Empieza a charlar!
cancelar	Cancelar
número de caso	Caso # {caseNumber}
cambio	Cambiar
charlado con	Acabas de tener una charla con
commonErrorText	Hubo un error inesperado. Vuelva a intentarlo más tarde.
Hecho	Terminado
dragAndDropDropzone	Arrastre y suelte los archivos aquí para enviarlos
dragAndDropDropzoneRejected	Imposible subir archivo :(
Etiqueta de correo electrónico	Correo electrónico
Chat finalizado	Finalizar chat
endChatTitle	Confirma que quiere finalizar 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 del chat
invalidToken	Token no valido
ipAddressBlocked	Se bloqueó la dirección IP
cargando	Cargando...
loadPreviousButton	Cargar conversaciones anteriores
messageLabel	Mensaje
networkErrorText	Hubo un error de red. Por favor intente de nuevo.
nuevo caso	Nuevo caso
noAgentOnlineForQueue	En este momento, no hay ningún agente disponible para atender su cola.
desconectado	Desconectado
offlineFormDesc	No estamos disponibles en este momento
offlineFormSuccessMsgHead	¡Gracias!
offlineFormSuccessMsgSub	Tu email fue enviado con éxito. Nos pondremos en contacto con usted a la brevedad.
en línea	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 <enter> 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	Estás {cola} en la cola.
startChatInPopup	¡Preguntanos!
startNewChat	Iniciar 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	Intente 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 se comunicará con usted a la brevedad.
esperando	Pulsa <barra espaciadora> para acortar la espera.
esperandoAgente	Esperando agente ...
esperandoInQueue	Esperando agente. Estás {cola} en la cola.
yourNameLabel	Su nombre

Traducir campos personalizados

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


            brandembassy('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 el icono de chat

Cuando está definido como verdadero, aparece el icono X en la ventana, en lugar de la opción Finalizar chat en el menú de configuración.


            brandembassy('enableCloseIcon', true);

Ocultar agente asignado


            brandembassy('hideAssignedAgent');

Ocultar encabezado


            brandembassy('hideHeader');

Ocultar ventanas emergentes


            brandembassy('hidePopups');

Mostrar avatar del cliente


            brandembassy('showCustomerAvatar');

Mostrar el botón Enviar


            brandembassy('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 CSS.


            brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

Modo de pantalla completa


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

Posición y desplazamiento

La setPositionX llamada 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 desde el punto de partida, respectivamente.


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

Establecer límite de caracteres para el cuadro de respuesta


            brandembassy('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 estilizar con un atributo data-selector (selector de datos). El menú desplegable siguiente 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 estilizar varios elementos, debe agregar todo el CSS en una sola llamada JavaScript. Si utiliza la misma llamada JavaScript varias veces, la última llamada JavaScript anulará todas las CSS anteriores. También puede personalizar CSS para el chat directamente en CXone.

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


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

Aplique componentes CSS personalizados utilizando únicamente 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; }

Los componentes de ventana pueden constar de varios 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 disparador

Inicia el Disparador de automatización de flujo de trabajo definido por el trigger_id.


            brandembassy('executeTrigger', 'trigger_id');

Establecer evento de visitante

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


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

Establecer variable de visitante

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


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

Conversión de tiendas

Almacena el comportamiento del cliente como una conversión con fines informativos.


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

Etiquetas de visitantes al sitio web

El contenido de esta sección es para un producto o característica con liberación controlada (CR). Si no forma parte del grupo CR y desea obtener más información, comuníquese con suRepresentante de cuenta CXone.

Puede etiquetar contactos que muestren determinados comportamientos en su sitio web. Esta función utiliza etiquetas de Digital Experience y requiere Guía.

Para agregar una etiqueta a un contacto:


            brandembassy('assignTag', 'tagID');

Para eliminar una etiqueta de un contacto:


            brandembassy('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


            brandembassy('getOngoingThreads');

Reconocer un contacto en curso en la ventana de chat


            brandembassy('getOngoingContact')

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

Haga clic para ver los eventos compatibles

Use cualquiera de las siguientes entradas para reemplazar 'evento' en los ejemplos a continuación.

CaseToRoutingQueueAssignmentChanged
Vista de página creada
MensajeCreado
MensajeEntregadoAlUsuario
MensajeEntregadoAlUsuarioFinal
Mensaje visto por usuario
Mensaje Visto Por Usuario Final
MensajeLeídoCambiado
Mensaje agregado en el caso
CaseInboxAssigneeChanged
CasoCreado
CasoEstadoCambiado
RemitenteEscribiendoIniciado
RemitenteEscribiendoTerminado
MensajeNotaCreado
ContactoDestinatariosCambiado

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


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

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


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

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


            brandembassy('onAnyPushUpdate', callback);

Integrar a 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 utiliza el JavaScript de esta página para modificar el aspecto y el comportamiento de la función del 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
  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>