Saltar a contenido

Web Chat

Configuracion del canal Web Chat

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

Diseñador del Widget(Apariencia del Web Chat)

El diseñador del widget, 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.

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.

Configuración

Sección apariencia general

Aquí se configuran los diferentes elementos de diseño general del widget.

Sección de encabezado

Aquí se configuran los diferentes elementos de diseño del encabezado del widget.

Sección de Pie de Pagina

Esta sección es opcional y se configura en caso de tener preguntas frecuentes o información de seguridad,

Sección del botón

En esta sección se configuran los elementos gráficos del botón que abrirá el widget, ya sea presentando el formulario, como también presentando el chat con la que el usuario interactuará con Lynn creando una interacción.

Sección del Chat

Aquí se definen los elementos gráficos que componen el chat del widget, como son las burbujas del bot o ejecutivo (izquierda) y las burbujas del cliente (derecha).

También se configuran de manera general los menús. De acuerdo con la configuración de la burbuja del ejecutivo.

También se puede ajustar la caja de envió de texto.

La caja del bot mostrará como descripción, el nombre que se le haya definido al tenant.

Sección del formulario

Si el formulario esta activo, se presentara un formulario al usuario del widget 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.

Sección Avanzado

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

Tips

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 en el Ambiente de Producción

Para incluir el widget en la página web del cliente se coloca un script de javascript que será el encargado del loading de todos los elementos necesarios para que el widget funcione. A continuación el script que se debe incluir: 

    <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 XXXXX deben ser sustituidas por la URL del widget correspondiente a su tenant. En caso de que se requiera pasar parámetros en la interacción tales como datos adicionales o no abrir el formulario, se puede usar al final del Script la siguiente sentencia: 

mw('create', '', { }, {});

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

1er parámetro:reservado.

2do parámetro: variable de criterio.

3er parámetro: userdata, por ejemplo, rut o departamento del usuario que esta logueado en la página del cliente.

4to parámetro: configuraciones adicionales, por ejemplo, para mostrar el nombre del ejecutivo use “executiveName”, este parámetro sobreescribirá el nombre del ejecutivo.

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

Pasos para su configuracion portal publico y privado

  • Identificar el tenant el cual no tiene un tema asignado para el widget.
  • Se debe crear un tema por defecto. Es importante personalizar el estilo del widget para alinear con la imagen de su marca.

Nota: 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. https://resources.lynn.cx/widget/widget/#disenador-del-widgetapariencia-del-web-chat

  • Inclusión del Script en la Página del Cliente: Es necesario incluir un script específico en la página web del cliente para activar el widget, debe copiar este segmento de código en su pagina web.

Portal Publico

El widget en la página web del cliente puede ser utilizado de manera pública, por lo tanto, se solicitarán datos de autenticación para su acceso.

Script para el sitio publico

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

Portal Privado

El widget en la página web del cliente puede ser utilizado de forma privada, por lo tanto, no se solicitarán datos de autenticación, ya que estos fueron proporcionados por el usuario durante el registro en el sitio privado.

Pasos para su configuracion

<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','rut',{rut:"39XXXX-XXXX",nombre:"Pedro",apellido:"Perez",tipo:"privado"},{ showform: false });
</script>