Configuracion del canal Web Chat
El diseñador del Webchat, es una funcionalidad que permite crear temas de diseño gráfico que se adapten al look & feel de la página web del cliente.
Aquí se pueden crear varios temas y se seleccionará eñl tema por default con el cual el widget se presentará de cara a la página web del cliente.
Este diseñador presentara varias secciones dependiendo del nivel de experticia que se tenga a nivel de diseño web. Se puede personalizar a nivel general, encabezado, pie de página, botón, chat, formulario y avanzado donde se podrán usar CCS.
Crear canal Web Chat
Para llevar a cabo este procedimiento, el usuario deberá acceder al diseñador de flujo y realizar un clic derecho en donde se despliegara la opcion de configurar canal. A continuación, se debe seleccionar la opción "Agregar canal a desarrollador", lo que desplegará la siguiente ventana:
Durante este proceso, es esencial definir el tiempo de espera configurado para detectar la inactividad y cerrar la interacción. En este caso, el límite máximo es de 7200 segundos (2 horas) (TIMEOUT_SECONDS). Además, se debe optar por la opción de mostrar los históricos de las conversaciones del día en el widget (DIALOGUES_OF_THE_DAY).
Si deseas utilizar el widget en ambiente de desarrollo, consulta la sección Sandbox de canales.
Arquitectura
El canal se configura en el diagrama del tenant, desde allí se puede ir a la configuración del tema y por último se incluye en la página del cliente para su despliegue.
Temas
Los temas son los diferentes diseños en los que el widget será presentado en la pagina web del cliente. Para ello se pueden crear tantos temas como se desee y el tema que se mostrará será el que este seleccionado como default.
Se puede colocar un nombre y descripción para saber que tipo de tema se ha diseñado.
Personalización del Widget
Nota!: Para configurar opciones más avanzadas puede usar la sección de Avanzado CSS.
Ventana general del diseñador
Dentro de la ventana general del diseñador poda encontrar el menú vertical de herramientas de configuración (1) ubicado a lado izquierdo. Las opciones de este menú se activan según el entorno que haya seleccionado para el webchat. Dicho escenario puede seleccionarse y haciendo click en los botones ubicados en la parte superior derecha (2), asi como tambien una previsualización del webchat (3):
- Entorno del chat: selecionando este entorno, el menú vertical le proporcionará una opción de configuración de apariencia de la ventana del webchat.
- Entorno del botón: En esta sección se configuran los elementos gráficos del botón que abrirá el webchat.
-
Entorno del Formulario: Si esta activo, se presentara un formulario al usuario del webchat donde se pedirán los datos correspondientes a:
-
Criterio: valor de identificación del usuario, rut, teléfono, email, etc.
-
Identificación: Es la manera como el usuario se identificará de cara a Lynn o el ejecutivo. Normalmente es el nombre de la persona.
También se pueden agregar todos los campos necesarios según sea la necesidad del cliente. La información que se envía a través del formulario se considera como “User Data” o la información de la interacción del usuario.
-
-
Entorno de Transcripción: Esta sección habilita una pestaña que permite al usuario realizar la descarga de la transcripción de la conversación realizada dentro del chat. Aquí, se puede configurar el título, subtítulo, descripción del botón y la activación del check.
Entorno Chat
Configuración
Aquí se identifica el tema a diseñar, así como tambien definir su idioma.
- Habilitar tema: Activa este tema con predeterminado para el canal de webchat.
- Nombre: asignar un nombre al tema
- Descripción: indicar una pequeña descripción
- Idioma: seleccione el idioma en el que se visualizará el webchat.
Apariencia
Aquí se configuran los diferentes elementos de diseño general de la ventana del webchat. Podrá definir un nombre para la Clase personalisada y posteriormente configurar cada elemento descrito a continuación:
1- Altura:Aquí puede definir la altura de la ventana en píxeles.
2- Ancho:Aquí puede definir lel ancho de la ventana en píxeles.
3- Radio del borde: Aquí puede definir el radio del borde superior izquierdo,superior derecho, inferior izquierdo e inferior derecho.
4- Borde de la caja:En esta sección se puede definir el ancho estilo y color del borde de la ventana.
5- Fondo: Aquí puedo definir el color del fondo Y el color del texto de la ventana.
6- Sombra de la caja: Aquí puede definir la longitud horizontal, longitud vertical, radio de desenfoque, radio de extensión, opacidad y color de la sombra.
7- Encabezado: donde es posible definir el titulo (1), altura (2), color de fondo (3) y color del texto (4) de la ventana del webchat.
8- Footer: donde es posible definir altura (1), color de fondo y color del texto (2) del footer la ventana del webchat.
Chat
Aquí se definen los elementos gráficos que componen el webchat
-
Color burbuja ejecutivo/bot: Aquí puede configurarse el aspecto de la burbuja del ejecutivo/bot determinando el color de fondo, color de texto, ancho del borde de la burbuja, estilo del borde de la burbuja y color del borde de la burbuja (1).
-
Color burbuja cliente: Aquí puede configurarse el aspecto de la burbuja del cliente o persona que solicita información determinando el color de fondo, color de texto, ancho del borde de la burbuja, estilo del borde de la burbuja y color del borde de la burbujav (2).
-
Caja de envío de texto y botón de envío: En esta sección puedes indicar un máximo de caracteres para el campo del mensaje que está escribiendo nuestro cliente (3); así como también, un mensaje descriptor o sugerido para la entrada y además, pude persobalizar el botón de envío del mensaje cargando una imagen de formatos .JPG o .PNG cuyo peso no sea mayor a 900KB.
Componentes Fecha y Hora
En esta sección se pueden realizar ajustes a los componentes de fecha y hora.
- Diseño de los campos: En esta sección puede definir: el color de fondo, color del texto, ancho del borde (2), estilo del borde (2) y color del borde (2) de los campos de fecha y hora.
- Radio del borde: En esta sección puede definir el radio del borde superior izquierdo, superior derecho, inferior izquierdo e inferior derecho para dar una pareciancia mas redondeada a la ventana.
- Botones: en está sección puede definir el color de fondo (4), color del texto (49), ancho del borde (5), estilo del borde (5) y color del borde (5) de los botones de fecha y hora.
- Radio del borde: En estos campos puede definirse el radio del borde superior, derecho, inferior e izquierdo (6), estos datos deben ser en pixel.
- Encabezado: Acá puede definir el color de fondo y el color de texto del encabezado del elemento fecha y hora (7).
- Encabezado dias: puede definir el color de fondo color de texto del elemento fecha y hora en 10 (8).
- Focus: aquí puede definir el color de fondo y color de texto que se observan cuando está seleccionado un día en específico dentro de la ventana del calendario (9).
- Hover: aquí puede definir el color de fondo y color de texto que se observan cuando el cursor está sobre un día en específico dentro de la ventana del calendario (10).
Remember Session Data
La función de "Remember Session Data" proporciona la capacidad de mantener la sesión activa mientras el usuario navega entre diferentes páginas del sitio web.
- Finalizar sesión al cerrar el navegador: Cierra la sesión automáticamente al cerrar la pestaña del navegador.
- Activar: Permite recordar la sesión entre páginas dentro del sitio del cliente.
-
Encriptar data: Encripta los datos de la sesión en el almacenamiento del buscador para mayor seguridad.
-
Tipo de almacenamiento: Esta función permite almacenar información de la sesión, ya sea como cookies o en el almacenamiento local del navegador.
-
Tiempo de refrescamiento (seg): Se puede configurar el tiempo durante el cual se mantiene activa la sesión o la información almacenada.
Eventos
En esta sección puede configurar eventos del webchat:
- Cuando está en conversación de chat: Este campo permite al usuario visualizar y acceder únicamente al area de escritura del chat cuando se solicita interacción por parte de el. Por ejemplo, el chat solicita ingresar el Rut o el nombre.
-
Cuando se escribe en la caja de texto:
-
Mostrar contador de caracteres: Este campo, cuando está seleccionado, permite visualizar la cantidad de caracteres ingresados. Para indicar el límite correspondiente, este debe configurarse en el parámetro Máxima longitud del mensaje, ubicado en la sección de la caja de envío de texto dentro del chat.
-
Ocultar botón de envío y mostrarlo al realizar escritura: Campo que al ser seleccionado permite visualizar botón de envío de mensaje solamente cuando se ingresen campos en la caja de texto.
-
Ocultar botón de envío de archivos al realizar escritura: Campo que al ser seleccionado permite visualizar botón de envío de archivos solamente cuando no se ingresen campos en la caja de texto.
Css Avanzado
En esta sección se pueden realizar ajustes directos al css del widget. En caso de que el cliente cuente con el apoyo de un diseñador web se podrá definir una hoja de estilos que haga overwrite de los estilos básicos del widget.
Preguntas frecuentes
Esta sección permite configurar texto que ejecuten intenciones, sin estar ligadas al flujo del bot/ejecutivo, puede usarse como un "acceso rápído" a información importante para su cliente. Puede activar o desactivar esta opción, seleccionar un icono y crear hasta un total de 10 preguntas (o itenciones).
Información de seguridad
Ventana que permite configurar un campo de texto con información de seguridad u otra información disponible para el cliente. Puede activar o desactivar esta opción, seleccionar un icono y crear hasta un total de 500 caracteres.
Entorno botón
En esta sección se configuran los elementos gráficos del botón que abrirá el widget. los radios del borde también pueden configurarse(1), estilo del borde y color del borde (2), se puede definir el color de fondo del botón (3) y color del texto del botón (4). Otra opción que es configurable es la asignación de una imagen de fondo, asi como tambien un ancho y la altura del ícono (5). Los tooltips que se observan al posicionarse sobre el icono tambien son customizables (6).
Entorno del formulario
Si el formulario esta activo, se presentara un formulario:
- Titulo: titulo del formulario (2)
- Subtitulo: breve descripción del formulario (2)
- Información (HTML): Puede usarse para agregar notas al pié el formulario, puede agregarse en formato HTML
- Botón Campos de entrada: Se abre una nueva ventana flotante donde se define el detalle de los campos que se solicitaran al clientes al ingresar al menú (3): Nombre del campo, tipo, si es o no obligatorío y si puede ocultarse. tambien posee la opción de eliminarse. En la columna "Criterio" puede indicar si el valor de ese campo (rut, teléfono, email, etc.) o "identificación" que es la manera como el usuario se identificará de cara a Lynn o el ejecutivo. Normalmente es el nombre de la persona.
Presione el botón para agregar un nuevo campo al formulario.
Cada campo puede poseer caracteriticas configurables, por ejemplo, la longitud máxima de caracteres que permite, el mensaje a mostrar cuando el valor es incorrecto o no se ingresa el valor obligatorio, etc.
Adicionalmente es posible añadir sentencias JavaScript para el tratamiento de los campos, por ejemplo, indicar que el archivo ha sido cambiado:
$('.chat-channel-lynn .chat-form [name="rut"]').change(function () {
console.log("The field has been changed.");
});
- Diseño del botón enviar: Aquí se podrá configurar el Valor (Nombre del botón)(4), color de fondo y color de texto del botón que permite enviar los datos del formulario.
- Diseño de los Campos: Aquí podrá configuarar el color de fondo y color de texto de los campos definidos.
- Borde: defina el ancho del borde, estilo estilo del borde, color del borde, y radios del borde.
Entorno Transcripción
Esta sección habilita una pestaña que permite al usuario realizar la descarga de la transcripción de la conversación realizada dentro del chat. Aquí, se puede configurar el título, subtítulo, descripción del botón y la activación del check.
Tips de diseño
Los cambios del diseño no se reflejan sobre el widget
Se puede colocar este enlace sobre el navegador
https://lynn-latam-production-br-ch-reg-t{IdApp}.azurewebsites.net/widget/refreshcss
El texto {IdApp} debe ser reemplazado por el identificador del aplicativo, tal como se muestra en el ejemplo a continuación
https://lynn-latam-production-br-ch-reg-t31.azurewebsites.net/widget/refreshcss
Al invocar este enlace se limpian el entorno del widget y el diseño se carga nuevamente desde Lynn.
Incluir el widget en la página web del cliente
Para integrar el widget en la página web del cliente, se debe incluir un script de JavaScript encargado de cargar todos los elementos necesarios para que el widget funcione correctamente.
A continuación, se muestra el script que se debe agregar en la página web:
<script>
(function (window, document, scriptTagName, globalName, scriptAddress, scriptElement, otherScriptElement) {
window['ChatLynn-Widget'] = globalName;
window[globalName] = window[globalName] || function () {
(window[globalName].q = window[globalName].q || []).push(arguments);
window[globalName].s = scriptAddress;
};
scriptElement = document.createElement(scriptTagName);
otherScriptElement = document.getElementsByTagName(scriptTagName)[0];
scriptElement.async = 1;
scriptElement.src = scriptAddress;
otherScriptElement.parentNode.insertBefore(scriptElement, otherScriptElement);
})(window, document, 'script', 'mw', 'XXXXXX');
mw('create', '', { }, {});
</script>
Las XXXXXX deben ser reemplazadas por la URL del widget correspondiente a su tenant. Este script se encargará de cargar el widget en la página.
Personalización del Widget
Si es necesario enviar parámetros adicionales en la interacción, como datos personalizados del usuario o configuraciones específicas, se puede ajustar la última línea del script:
mw(<1er parámetro>, <2do parámetro>,<3er parámetro> , <4to parámetro>)
Los cuales se componen de los siguientes parámetros:
1er parámetro: Reservado para uso interno.
2do parámetro: Variable de criterio.
3er parámetro: Información personalizada del usuario (por ejemplo, RUT o departamento).
4to parámetro: Configuraciones adicionales (por ejemplo, nombre del ejecutivo que atenderá la interacción).
Ejemplo:
mw('create', 'uid', {page_name: 'Consultas'}, {executiveName: "Julio Pérez"});
Pasos para su configuracion portal publico y privado
-
Acceder al diseño del chat: Ingrese al diseñador de flujo, y en las propiedades del canal Widget, dentro de la opción "Diseño del chat", verifique si ya existe un estilo creado. Si no es así, cree uno nuevo utilizando el botón "+". Es fundamental personalizar el estilo del widget para que esté alineado con la imagen de su marca.
-
Incluir el script en la página del cliente: Para activar el widget, es necesario incluir un script específico en la página web del cliente. Asegúrese de copiar el segmento de código correspondiente. Verifique el tipo de script que se debe utilizar según se trate de un portal público o privado.
Nota: Recuerde que para configurar el estilo propio del cliente, puede consultar nuestra documentación en el Resource Center. Acceda a través del siguiente enlace: Guía de Personalización del Widget
Portal Publico
El widget en la página web del cliente puede configurarse para uso público, lo que significa que no se requerirán datos de autenticación para acceder a él. En este escenario:
-
Token, Script y Validator: Estos valores serán los mismos para todas las sesiones iniciadas por los usuarios. No cambian entre sesiones.
-
Privacidad de las interacciones: Es crucial destacar que no es posible compartir o acceder a la información de una sesión iniciada por un usuario (Usuario A) con otro usuario (Usuario B). Esto garantiza que cada interacción sea completamente privada y aislada, manteniendo la confidencialidad de los datos.
Este enfoque es ideal para portales donde la autenticación no es necesaria y se busca ofrecer una experiencia uniforme para todos los usuarios.
Ejemplo de Script Publico obtenido
<script>
(function(w,d,scriptTagName,globalName,scriptAddress,tk,val){
w['ChatLynn-Widget']=globalName;w[globalName]=w[globalName]||function(){w[globalName].s=scriptAddress;(w[globalName].q=w[globalName].q||[]).push(arguments);};if(tk){w[globalName].t=tk;} if(val){w[globalName].v=val;} var formData=new FormData();formData.append("tk",tk);var request=new XMLHttpRequest();request.open("POST",scriptAddress,true);request.onreadystatechange=function(){if(this.readyState===4){scriptElement=d.createElement(scriptTagName);otherScriptElement=d.getElementsByTagName(scriptTagName)[0];scriptElement.async=1;scriptElement.text=this.responseText;otherScriptElement.parentNode.insertBefore(scriptElement,otherScriptElement);}};request.send(formData);})
(window, document, 'script', 'mw', 'XXXXXX');
mw('create', '', { }, {});
</script>
Nota: En la linea '(window, document, 'script', 'mw', 'XXXXXX');', el valor 'XXXXXX' representa el Token publico.
Portal Privado
El widget en la página web del cliente puede utilizarse de forma privada
La versión privada del widget incluye credenciales directamente otorgadas por Lynn en cada sesion de comunicación, las cuales permiten la interacción servidor a servidor con la API CreateToken de Lynn. La cual valida las credenciales y genera un token y un validator únicos que el backend del cliente intercambia con Lynn, para autorizar una sesion nueva.
Es importante destacar que cada vez que se inicie una nueva sesión, se generará un nuevo token, lo que garantiza que cada sesión sea única. El proceso se desarrolla de la siguiente manera:
Paso 1: Creación del Token: El backend del cliente se comunica con el backend de Lynn para generar un token.
Paso 2: Validación del Token: El backend del cliente envía el token al frontend (navegador) para su validación.
Paso 3: Obtención del Script: El frontend utiliza el token para solicitar el script desde el backend de Lynn, completando así la interacción.
Ejemplo de Script Privado obtenido
<script>
(function(w,d,scriptTagName,globalName,scriptAddress,tk,val){
w['ChatLynn-Widget']=globalName;w[globalName]=w[globalName]||function(){w[globalName].s=scriptAddress;(w[globalName].q=w[globalName].q||[]).push(arguments);};if(tk){w[globalName].t=tk;} if(val){w[globalName].v=val;} var formData=new FormData();formData.append("tk",tk);var request=new XMLHttpRequest();request.open("POST",scriptAddress,true);request.onreadystatechange=function(){if(this.readyState===4){scriptElement=d.createElement(scriptTagName);otherScriptElement=d.getElementsByTagName(scriptTagName)[0];scriptElement.async=1;scriptElement.text=this.responseText;otherScriptElement.parentNode.insertBefore(scriptElement,otherScriptElement);}};request.send(formData);})
(window,document,'script','mw','<UrlWidgetGeneradaPorLynn>','<aquiToken>','<aquiValidation>');
mw('create','uid',{uid:"3453-6789"},{});
</script>
Considere que en la linea "(window,document,'script','mw','
Campo | Valor |
---|---|
UrlWidgetGeneradaPorLynn | Este campo varia según el aplicativo y debe ser provista por equipo Lynn. Considere que este parametro se obtiene desde la configuracion de Widget y es generado de forma automatica. |
aquiToken | Este parámetro representa el token de autenticación necesario para validar la sesión o el acceso al widget desde el frontend. El token es generado por el backend de Lynn y es único para cada sesión. |
aquiValidation | Este campo se refiere a un código de validación adicional que se utiliza para confirmar que el token recibido es válido. Es un mecanismo de seguridad que permite validar tanto el token como la sesión del usuario antes de permitir el acceso completo al widget. |