WebChat (Widget)

ID del canal: 20 — Proveedor: Lynn.
Tipo de canal: Texto (mensajería tipo chat embebida en sitio web).
Visibilidad del canal: Público; habilitado por defecto en cada aplicativo de Lynn en ambiente productivo (en ambiente de desarrollo se usa el Sandbox de canales para pruebas).
Complejidad de integración: Baja (habilitado por defecto; requiere incluir un script de embebido en la página del cliente).
Chat general o solo Kyubo: Chat general.
Sandbox disponible: Sí, mediante el Sandbox de Canales (ambiente de Desarrollo).

Definición

El WebChat es una herramienta widget (WG) que puede ser embebida o llamada mediante un script HTML en una página web destino. Su función principal es disponer de una interfaz de chat configurable con capacidades de media data, que sirve de entrada para el segmento de páginas web.

Una de las principales ventajas del widget de Lynn es que incorpora una herramienta de personalización y diseño de la interfaz y comportamiento visual. Permite habilitar temas personalizados y cambiar entre ellos libremente, incluir formularios de acceso, definir variables clave de entrada, personalizar estilos CSS y otras características adicionales.

Adicionalmente, el canal WebChat nativo ofrece:

Formulario de inicio.
Descarga del registro de conversación para el usuario.
Encuestas con botones de emojis.
Integraciones con Active Directory.
Historial de conversación previa en el chat.
Token de autenticación.
Data de origen chat: el canal permite notificar información o data adicional (tokens, identificadores de sesión web, tags generados en la página que aloja el widget) para que Lynn le dé un tratamiento diferenciado (ej. un cliente VIP autenticado en la página host puede transmitir esa clasificación al iniciar el chat).

Arquitectura

El canal se configura en el diagrama del tenant; desde allí se accede a la configuración del tema y, finalmente, se incluye en la página del cliente para su despliegue.

Crear canal Web Chat

Acceder al diseñador de flujo y realizar clic derecho, donde se despliega la opción "Configurar canal".
Seleccionar "Agregar canal a [Ambiente]". Se abre la ventana "Lista de canales"; seleccionar el canal Chat y hacer clic en "Crear".
Definir el tiempo de espera configurado para detectar inactividad y cerrar la interacción (TIMEOUT_SECONDS, límite máximo 7200 segundos / 2 horas).
Optar por mostrar los históricos de las conversaciones del día en el widget (DIALOGUES_OF_THE_DAY).
Hacer clic en "Verificar". El canal aparecerá en gris hasta ser activado.
Activar canal: clic derecho sobre el canal → "Activar". Tras unos segundos, el canal queda activo.

Diagrama de arquitectura: canal en el tenant → configuración de tema → despliegue en la página del cliente

Temas

Los temas son los diferentes diseños en los que el widget será presentado en la página web del cliente. Se pueden crear tantos temas como se desee; el tema que se mostrará será el que esté seleccionado como default. Cada tema admite un nombre y una descripción.

Listado de temas del widget (1)

Listado de temas del widget (2)

El diseñador presenta distintas secciones según el nivel de experticia de diseño web: general, encabezado, pie de página, botón, chat, formulario y una sección avanzada de CSS.

Ventana general del diseñador

El menú vertical de herramientas de configuración se activa según el entorno seleccionado para el webchat (Entorno del chat, Entorno del botón, Entorno del Formulario, Entorno de Transcripción), con opción de previsualización.

Ventana general del diseñador del widget

Entorno del chat: configuración de apariencia de la ventana del webchat.
Entorno del botón: configuración de los elementos gráficos del botón que abre el webchat.
Entorno del Formulario: si está activo, presenta un formulario al usuario solicitando datos como Criterio (identificación: RUT, teléfono, email, etc.) e Identificación (nombre con el que el usuario se presenta ante Lynn o el ejecutivo). La información enviada por el formulario se considera "User Data".
Entorno de Transcripción: habilita una pestaña para que el usuario descargue la transcripción de la conversación (configurable: título, subtítulo, descripción del botón y activación del check).

Entorno Chat — Configuración

Habilitar tema: activa el tema como predeterminado para el canal.
Nombre / Descripción: identificación del tema.
Idioma: idioma en el que se visualizará el webchat.

Sección "Configuración" del entorno Chat

Entorno Chat — Apariencia

Permite definir para la ventana del webchat: altura, ancho, radio del borde (cuatro esquinas), borde de la caja (ancho/estilo/color), fondo (color de fondo y de texto), sombra de la caja (longitud horizontal/vertical, radio de desenfoque, radio de extensión, opacidad, color), encabezado (título, altura, color de fondo, color de texto) y footer (altura, color de fondo, color de texto).

Sección "Apariencia" del entorno Chat

Configuración de la sombra de la caja

Configuración del encabezado (1)

Configuración del encabezado (2)

Configuración del footer

Entorno Chat — Chat

Color burbuja ejecutivo/bot y color burbuja cliente: color de fondo, color de texto, ancho/estilo/color del borde de la burbuja.
Caja de envío de texto y botón de envío: máximo de caracteres del mensaje, placeholder de entrada, imagen personalizada del botón de envío (.JPG/.PNG, máx. 900 KB).

Elementos gráficos configurables del chat

Configuración de burbujas de chat (1)

Configuración de burbujas de chat (2)

Entorno Chat — Componentes Fecha y Hora

Permite ajustar diseño de campos, radio de borde, botones, encabezado, encabezado de días, focus y hover del selector de fecha/hora.

Detalle de configuración de fecha y hora

Entorno Chat — Remember Session Data

Mantiene la sesión activa mientras el usuario navega entre páginas del sitio. Configurable: finalizar sesión al cerrar navegador, activar recordatorio de sesión entre páginas, encriptar datos de sesión, tipo de almacenamiento (cookies o almacenamiento local del navegador) y tiempo de refrescamiento (segundos).

Configuración de "Remember Session Data"

Entorno Chat — Eventos

Cuando está en conversación de chat: restringe visualización al área de escritura cuando se solicita una interacción puntual (ej. ingresar RUT o nombre).
Cuando se escribe en la caja de texto: mostrar contador de caracteres (ligado a "Máxima longitud del mensaje"), ocultar botón de envío hasta que se escriba, ocultar botón de envío de archivos mientras se escribe.

Entorno Chat — CSS Avanzado

Permite ajustes directos al CSS del widget mediante una hoja de estilos que sobrescribe (overwrite) los estilos básicos.

Sección de CSS avanzado

Entorno Chat — Preguntas frecuentes

Permite configurar textos que ejecutan intenciones sin depender del flujo del bot/ejecutivo, como accesos rápidos a información. Admite hasta 10 preguntas (intenciones), con ícono configurable.

Sección de preguntas frecuentes

Entorno Chat — Información de seguridad

Ventana para configurar un texto con información de seguridad u otra información para el cliente, hasta 500 caracteres, con ícono configurable.

Sección de información de seguridad

Entorno botón

Radios de borde, estilo/color de borde, color de fondo y de texto del botón, imagen de fondo, ancho/alto del ícono y tooltips personalizables.

Configuración detallada del entorno del botón

Entorno del formulario

Título, subtítulo, información en HTML, definición de campos de entrada (nombre, tipo, obligatoriedad, ocultamiento; columna "Criterio" o "Identificación"), diseño del botón enviar (valor, color de fondo/texto), diseño de los campos y borde. Admite JavaScript adicional para tratamiento de campos (ej. detectar cambios en un campo).

Vista del formulario configurado

Presione el botón para agregar un nuevo campo al formulario.

Configuración de campos del formulario

Diseño del botón de envío del formulario

Entorno Transcripción

Configuración de título, subtítulo, descripción del botón y activación del check para la descarga de la transcripción.

Tips de diseño

Si los cambios de diseño no se reflejan sobre el widget, se puede invocar:

https://lynn-latam-production-br-ch-reg-t{IdApp}.azurewebsites.net/widget/refreshcss

Reemplazando {IdApp} por el identificador del aplicativo. Al invocar este enlace se limpia el entorno del widget y el diseño se carga nuevamente desde Lynn.

Se debe incluir un script de JavaScript que carga los elementos necesarios para que el widget funcione:

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

XXXXXX debe reemplazarse por la URL del widget correspondiente al tenant.

Parámetros adicionales del script

mw(<1er parámetro>, <2do parámetro>, <3er parámetro>, <4to parámetro>)

Reservado para uso interno.
Variable de criterio.
Información personalizada del usuario (ej. RUT o departamento).
Configuraciones adicionales (ej. nombre del ejecutivo que atenderá la interacción).

Ejemplo: mw('create', 'uid', {page_name: 'Consultas'}, {executiveName: "Julio Pérez"});

Portal público y portal privado

Diseño del chat: en las propiedades del canal Widget, verificar si existe un estilo creado o crear uno nuevo, alineado con la imagen de marca del cliente.
Incluir el script en la página del cliente: copiar el segmento de código correspondiente según se trate de portal público o privado.

Comparación entre portal público y portal privado

Portal Público

No requiere datos de autenticación. Token, Script y Validator son los mismos para todas las sesiones de todos los usuarios (no cambian entre sesiones), pero cada sesión sigue siendo privada e independiente entre usuarios distintos.

Ejemplo de configuración de portal público

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

XXXXXX representa el Token público.

Portal Privado

Incluye credenciales otorgadas por Lynn en cada sesión, que permiten la interacción servidor a servidor con la API CreateToken de Lynn. Esta API valida las credenciales y genera un token y un validator únicos que el backend del cliente intercambia con Lynn para autorizar una nueva sesión. Cada nueva sesión genera un nuevo token.

Ejemplo de configuración de portal privado

Flujo:

Creación del token: el backend del cliente se comunica con el backend de Lynn para generar un token.
Validación del token: el backend del cliente envía el token al frontend (navegador) para su validación.
Obtención del script: el frontend utiliza el token para solicitar el script desde el backend de Lynn.

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

Campo	Valor
`UrlWidgetGeneradaPorLynn`	Varía según el aplicativo; provista por el equipo Lynn, se obtiene desde la configuración del Widget (generada automáticamente).
`aquiToken`	Token de autenticación necesario para validar la sesión/acceso al widget desde el frontend. Generado por el backend de Lynn, único por sesión.
`aquiValidation`	Código de validación adicional que confirma que el token recibido es válido.

Para usar el canal Widget en el Sandbox:

En la lista de Propiedades del diseñador de flujos, hacer clic en el ícono del canal Widget. Se muestran dos opciones: "Ir al Sandbox" y "Diseños del Chat".
Seleccionar "Ir al Sandbox": se abre una nueva pestaña con el formulario de registro del Sandbox (idioma de interfaz, código de registro del tenant).
Se muestra un mensaje de bienvenida y el código para desregistrarse del Sandbox.
Hacer clic en "Ir al Widget" para iniciar la prueba.

Note

El Sandbox de Canales solo está disponible en el ambiente de Desarrollo/Testing. Ver detalle general en la sección "Sandbox disponibles" de tabla-caracteristicas-canales.md y la guía completa de uso en Acceso al Sandbox.

Table of Contents