Personalizar canales de chat usando JavaScript

Puedes personalizar el chat en vivo 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 Mpower 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.

Puedes personalizar los siguientes aspectos de tus canales de chat : 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.

Comportamiento del chat: personaliza 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: personaliza 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, etiquetas y frases personalizados: defina campos personalizados o personalice etiquetas de campo. También puede configurar texto alternativo para los mensajes automáticos que se muestran a los contactos.
Apariencia de la ventana de chat: Personaliza la apariencia 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: define CSS personalizado para la ventana de chat.
Acciones proactivas: personalice la experiencia con acciones proactivas basadas en el comportamiento del cliente.
Otras funciones: Otras cosas que puedes 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 JavaScript API admiten un cargador de Brand Embassy para cada llamada. Si utiliza chat independiente CXone Mpower en su sitio web, todas estas llamadas también admiten un nuevo cargador CXone Mpower. Con el tiempo, todas las API de JavaScript para chat usarán el cargador de CXone Mpower en lugar del de Brand Embassy.

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

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


            cxone('chat','enableChatAlwaysOnline');

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


            brandembassy('enableChatAlwaysOnline');

Agregue JavaScript llamadas a un canal de chat

Si aún no lo ha hecho, configure un chat en vivo o un canal de mensajería 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 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 seleccioneACD.
Ir a Digital > Puntos de Contacto Digital.
En Tus canales, haz clic en Script de 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 del cierre</script> etiqueta del código que pegó, agregue las llamadas JavaScript que desea 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
Copia y pega el script completo, incluida la introducción y el cierre.<script> tags, into the header of a page of your website.
Visite la página modificada y envíe mensajes de chat de prueba para asegurarse de que sus personalizaciones funcionen según lo previsto.
Cuando esté completamente probado y funcione como se espera, copie el script final en el encabezado de cada página que debe tener el widget de chat.

Comportamiento del chat JavaScript Llamadas

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

Conservar campos personalizados del chat anterior

Puede elegir si desea que los campos personalizados persistan o se eliminen del almacenamiento local después de que se haya iniciado 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 datos de postback desde Adaptive Card

Studio acciones y bots pueden enviar Adaptive Cards a 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. Se activa el gestor cuando un usuario interactúa con los componentes de una Adaptive Card, 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 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('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 comando de controlador predeterminado Adaptive Card:


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

Comando de envío de mensaje:


            sendMessage(messageContent: MessageContent)

Comando de creación de controlador 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 un 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');

Establecer campos precargados en encuesta previa al contacto

Permite que los valores de campos personalizados ingresados previamente aparezcan como una opción de autocompletar en campos o interacciones posteriores. ID específicos informan a la ventana de chat de qué valores de campo personalizados guardar. Cuando un contacto inicia una nueva conversación, estos campos personalizados de conversaciones anteriores están disponibles automáticamente. Esto ayuda a ahorrar tiempo si un contacto necesita introducir la misma información en una nueva sesión de chat que ha introducido en una sesión de chat anterior, como una dirección de correo electrónico. Si hay varios campos que desea que aparezcan como opciones de llenado automático, inclúyalos todos en la misma llamada API.


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

Iniciar automáticamente una nueva sesión de chat

Crea una nueva sesión 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 o chat en vivo Los agentes y contactos interactúan en tiempo real si no hay ninguna en curso actualmente. 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.

Puedes personalizar el texto del mensaje inicial oculto.

Al iniciar automáticamente una sesión de chat se omite el formulario 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 de los casos iniciados automáticamente 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, utilice estas llamadas en el orden que se muestra:

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

Habilitar sesiones de chat simultáneas

Puede permitir que los contactos inicien múltiples 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 habilitar este comportamiento, debe especificar cómo se almacenan los datos del chat. Tienes 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 la pestaña o ventana se cierra. 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 habilitar sesiones de chat simultáneas, agregue la clave storageType con un valor de sessionStorage, como se muestra en el siguiente ejemplo.

Si usa la opción localStorage y aún desea purgar el historial de conversaciones, puede crear un detector de eventos que elimine el customerID después de que finalice el chat.


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

Purgar historial de conversaciones

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 inicial automatizado de tres maneras:

Anular el texto del botón predeterminado.


                brandembassy('sendFirstMessageAutomatically', 'Hello');

Cambiar el mensaje inicial dinámicamente.


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

Cambiar el texto del mensaje en la página Traducciones.

Hacer que el mensaje automático 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);

Retrasar la creación del caso

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


            brandembassy('sendFirstMessageAutomatically', false);

Habilitar modo de juego

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


            brandembassy('allowGameMode');

Encuesta de satisfacción automatizada

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


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

Información del chat JavaScriptLlamadas

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 inicio de una sesión 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. 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 cola permite que un contacto sepa qué tan pronto un agente podrá ayudarlo en función de dónde se encuentra 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 audio de notificación de chat

Le permite desactivar el sonido de notificación de 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 traducciones de idioma del navegador

Anula la configuración de idioma del navegador del usuario o una configuración regional personalizada con 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 actividad. 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 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 del cliente

El nombre del cliente es un campo en el formulario de encuesta previa al contacto, que los contactos deben completar antes de chatear con un agente en un canal 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. Esta llamada completa el campo de forma dinámica.


            brandembassy('setCustomerName', 'Elizabeth');

Establecer formato de fecha

Se puede configurar para utilizar el formato de fecha absoluta (12/03/2035) o el 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 u 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 la transcripción del chat a sí mismos. 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');

Términos de uso

Puedes poner a disposición de los contactos un documento de términos de uso 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 de 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 la apariencia del botón o la ventana interna, utilice las llamadas API CSS descritas en esta página.

Campos personalizados, etiquetas y frases

Crear y completar campos personalizados

Los campos personalizados que puede usar con esta llamada son los mismos que puede usar 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 un campo personalizado de 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 utilizan 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 etiquetas que puede personalizar.

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

Clave	Etiqueta predeterminada/Mensaje
allAgentsForQueueAreBusy	Todos nuestros agentes dedicados a su cola están ocupados actualmente. 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	¡Iniciar chat!
cancelar	Cancelar
caseNumber	Caso #{caseNumber}
cambiar	Cambiar
chattedWith	Acabas de chatear con
commonErrorText	Hubo un error inesperado. Vuelva a intentarlo más tarde.
hecho	Hecho
dragAndDropDropzone	Arrastra y suelta archivos aquí para enviarlos
dragAndDropDropzoneRechazado	Imposible cargar el archivo :(
Etiqueta de correo electrónico	Correo electrónico
endChat	Finalizar chat
endChatTitle	¿Estás seguro de que quieres finalizar este chat? conversación?
endGame	Finalizar juego
ending	Finalizando chat...
fileSendingFailed	Error en el envío de archivo
getTranscriptDescription	Enviar transcripción de esta conversación a la siguiente dirección de correo electrónico:
getTranscriptLink	Obtener transcripción del chat
invalidToken	Inválido token
ipAddressBlocked	La dirección IP está bloqueada
cargando	Cargando...
loadPreviousButton	Cargar conversaciones anteriores
messageLabel	Mensaje
networkErrorText	Hubo un error de red. Intente de nuevo.
newCase	Nuevo caso
noAgentOnlineForQueue	No hay ningún agente disponible para tu cola en este momento.
fuera de línea	Fuera de línea
offlineFormDesc	No estamos disponibles en este momento
offlineFormSuccessMsgHead	¡Gracias!
offlineFormSuccessMsgSub	Su correo electrónico fue enviado exitosamente. Nos pondremos en contacto con usted a la brevedad.
en línea	en línea
en líneaFormularioTexto	Para iniciar un chat, dinos tu nombre. Uno de nuestros agentes comenzará a ayudarlo de inmediato.
pleaseSelect	Por favor seleccione...
poweredBy	Desarrollado por
preparingSession	Preparando sesión...
replyBoxPlaceholder	Escriba aquí, presione<enter> para enviar
reintentar	Reintentar
sendFileTextSize	Cargue archivos más pequeños que {filesize}
sendFileTextSupportedFormat	formatos admitidos.
sendFileTextSupportedFormatDesc	Imágenes, Videos, {fileFormats}
sendMessageButton	Enviar mensaje
sendNewEmail	Enviar nuevo correo electrónico
sendTranscript	Enviar transcripción
snakeWaiting	Estás {queue} en la cola.
startChatInPopup	¡Pregúntenos!
startNewChat	Iniciar un nuevo chat
statusReconnecting	¿Intentando conectarse?
surveySuccesfullySent	¡Gracias por tus comentarios!
systemChattingWith	Ahora estás chateando con {name}
topic	Topic
transciptSentFailed	Error de envío.
transciptSuccesfullySent	¡Transcripción enviada exitosamente!
tryAgainButton	Inténtalo de nuevo
unexpectedError	Error inesperado.
validationInvalidEmail	La dirección de correo electrónico no es válida
validationMandatory	Este campo es obligatorio
validationShorterName	Utilice un nombre más corto
validationShortMessage	Su mensaje es demasiado corto
waiting	Esperando...
waitingDescription	Uno de nuestros agentes hablará con usted en breve.
esperandoPie de página	Hit<spacebar> Para acortar la espera.
waitingForAgent	Esperando al agente...
waitingInQueue	Esperando al agente. Estás {cola} en la cola.
yourNameLabel	Tu nombre

Traducir campos personalizadoss

Puedes traducir los campos personalizados que se muestran en la ventana de chat.


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

Apariencia de la ventana de chat

Puede modificar la apariencia de la ventana de chat.

Icono de cerrar chat

Cuando se establece como verdadero, se muestra un ícono 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 la altura de la ventana de chat. Puede utilizar unidades absolutas o relativas admitidas por la especificación CSS.

Modo de visualización completa

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

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


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

Aplica componentes CSS personalizados utilizando únicamente el atributo selector de datos . No lo aplique a selectores de clase ni a 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 interactuar de forma proactiva con los clientes en un chat en función de su comportamiento.

Ejecutar disparador

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


            brandembassy('executeTrigger', 'trigger_id');

Establecer evento de visitante

Almacena el comportamiento definido del cliente (el evento) para fines de informes. Cuando esta llamada se utiliza con el 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 del cliente definida para fines de informes.


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

Almacenar conversión

Almacena el comportamiento del cliente como una conversión para fines de informes.


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

Etiquetas de visitantes 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.

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

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 push cuando ocurren ciertos eventos de chat.

Reconocer hilos activos en la ventana de chat


            brandembassy('getOngoingThreads');

Reconocer contactos en curso en la ventana de chat


            brandembassy('getOngoingContact')

Recibir notificaciones push para eventos de chat específicos

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


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

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


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

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


            brandembassy('onAnyPushUpdate', callback);

Integrar en aplicaciones Android o iOS

Puede integrar el chat digital en aplicaciones 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 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
  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>