Personalizar el Chat de Guide Mediante API

Puede personalizar la apariencia y el comportamiento del chat que se implementa con Guide mediante estas API relacionadas con el chat.

Llamadas a la API de Comportamiento de Chat

Las llamadas en esta sección le permiten cambiar el comportamiento de la ventana de chat de Guide.

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 iniciar el chat.

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

Personalizar el Mensaje de Contacto automatizado inicial

Cuando se inicia un chat en Guide, se crea un nuevo caso La conversación completa con un agente a través de un canal. Por ejemplo, una interacción puede ser una llamada de voz, un correo electrónico, un chat o una conversación de redes sociales. y se 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 visitante. Esto reduce la cantidad de tiempo que los visitantes esperan a un agente. Aunque el mensaje inicial está oculto al contacto, el agente puede verlo.

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

• Anula el texto del botón predeterminado.

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

• Cambie 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 visitante pueda ver el mensaje inicial automático, agregue esta llamada a su script:

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

Intervalo en la creación de casos

Guide 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 visitante. Esto reduce la cantidad de tiempo que los visitantes esperan a un agente. Las sesiones de chat comienzan cuando un visitante hace clic en el icono de chat para iniciar una conversación. Aunque el mensaje inicial está oculto al visitante, el agente puede verlo.

Puede configurar Guide para que espere el primer mensaje real del visitante antes de crear un caso usando esta llamada:

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

Activar el modo de juego

Permite que los visitantes 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', false);

Llamadas a la API de Información de chat

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

Obtener ID de identidad del Cliente

Devuelve el identificador único del visitante en el chat.

cxone('chat','getCustomerIdentityId');

Establecer Id de cliente

Define un identificador único para el visitante en el chat.

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

Ocultar Contador de cola

El contador de cola permite que el visitante sepa en cuánto tiempo podrá ayudarlo un agente de acuerdo con su posición en la cola del agente. Puede ocultar el contador de cola después de que el visitante se haya enrutado con éxito hacia un agente. Esto permite a los agentes eliminar tarjetas de clientes de su bandeja de entrada sin que los visitante lo adviertan.

cxone('chat','hideQueueCounterAfterAssignment');

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 Chat asincrónico en el que los contactos envían un mensaje de conversación en cualquier momento y esperan una respuesta.. Esto podría ser útil porque la mensajería de chat es una forma asincrónica de chat, por lo que los visitantes podrían tener que esperar para tener noticias 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. Por defecto, Guide 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.

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

Establecer Nombre del cliente

Nombre del cliente es un campo del formulario de encuesta previa al contacto, que los visitantes deben completar antes de chatear con un agente en un canal 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.. Esta Llamada a la API llena el campo de manera dinámica.

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

Establecer Formato de fecha

Define el formato de fecha como formato de fecha absoluta (01/01/2022) o formato de fecha relativa (hoy, Lunes).

cxone('chat','setDateFormat', 'date_format');

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 la información del caso al visitante.

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 visitantes se envíen la transcripción del chat a sí mismos. Configure esta opción para mensajería de chat o chat en vivo.

cxone('chat','showSendTranscript');

cxone('chat','hideSendTranscript');

Mostrar/Ocultar Mensajes del Sistema

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

cxone('chat','showSystemMessages');

cxone('chat','hideSystemMessages');

Términos de uso

Le permite poner un documento de condiciones de uso a disposición de los visitantes en 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 visitantes lo pulsan. La acción al hacer clic puede mostrar los términos de uso como ventana interna o enlace externo.

Una ventana interna:

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

Un enlace externo:

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

Para desactivar la característica:

cxone('chat','hideTermsOfUse');

Campos personalizados, Etiquetas y Frases

Crear y Completar Campos personalizados

Antes de usar las llamadas de la API de campo personalizado que se indican a continuación, primero debe crear el campo personalizado en NiCE CXone. Cree el campo personalizado para una 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.

Utilice 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 transmitir 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 disponibles dos métodos de API, según el lugar donde desee que se almacenen 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 sean 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 formulario.

  Al usar setCaseCustomField, es posible que vea una advertencia de desuso 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 contacto en todas las interacciones. Utilice esto cuando los datos estén vinculados al cliente mismo. 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.
Configurar múltiples campos personalizados de contacto a la vez	setContactCustomFields	Actualización masiva eficiente de varios campos de casos.
Establezca un solo Customer Card campo personalizado	setCustomerCustomField	Para los 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 de forma fija, por ejemplo, 'Contact Us Page'.
Ejemplo de valor dinámica	setContactCustomField	Valor dinámica, por ejemplo, window.location.href.

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

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 por ejemplo, indicar 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'
     } 
     );
   

• Para definir el valor de un solo campo Customer Card

  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 resulta útil cuando el valor varía según el visitante o la sesión, como al 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

  

  

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 se encuentra el Guide widget está incrustado en su página web. Coloque las llamadas de la 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 incorporar el widget y dónde colocar las llamadas de personalización, consulte Personalizar Guide Usando JavaScript.

Personalizar Etiquetas y Frases

Puede personalizar muchas de las etiquetas y frases que usa el chat de Guide, así como definir las personalizaciones. Si necesita cambiar dinámicamente las frases o etiquetas de pantalla, use estas llamadas API.

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

Llamadas a la API de apariencia de la ventana de conversación

Puede modificar el aspecto de la ventana de chat que usa Guide.

Ocultar Agente asignado

cxone('chat','hideAssignedAgent');

Mostrar Avatar del Cliente

cxone('chat','showCustomerAvatar');

Mostrar el botón Enviar

cxone('chat','showSendButton');

Establecer Límite de caracteres para el cuadro de respuesta

cxone('chat','setReplyBoxLimit', '280');

CSS personalizado con selectores de datos

Puede personalizar la apariencia de las ventanas de chat con CSS personalizado utilizando selectores de datos en sus Llamadas a la API. Los selectores de datos le permiten especificar la parte de la ventana de chat a la que desea aplicar el CSS personalizado. Defina el selector de datos usando el atributo data-selector. Configúrelo igual al nombre del componente de la ventana de chat que desea modificar.

Para agregar CSS personalizado con selectores de datos, use esta Llamada a la API como referencia:

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

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