Configurar el widget web

Luma Virtual Agent es compatible con distintos canales de chat, pero para algunas organizaciones es crítico para proporcionar acceso a través de la intranet de una empresa o de un sitio de internet. El Widget web es una pequeña porción de código que se puede incrustar fácilmente en un sitio web para permitir iniciar una sesión de chat con un bot.

Para configurar el Widget web en un sitio web, un administrador debe completar los siguientes tres pasos de alto nivel:

Descargar el código del widget (luma-web-widget.zip).
Configurar el Widget web en el portal web usando la clave secreta, el código de la cabecera y el cuerpo desde la pestaña Channels (Canales) de Configuration (Configuración) en la interfaz de Bot Builder (Consola de Administración de Luma).
Activar el canal del widget web en Bot Builder (Consola de Administración de Luma).

Activar el Canales de los widgets web

Para activar el Widget web en la interfaz de Bot Builder (Consola de Administración de Luma), haga lo siguiente:

Haga clic en el menú Bots en el panel de navegación izquierdo y, a continuación, haga clic en Configuration (Configuración).
Aparece la página Configuration (Configuración).
En la página Configuration (Configuración), haga clic en la pestaña Channels (Canales) como se muestra a continuación.
Haga clic en el ícono del Widget web en la lista de canales.
Aparecerá la página de configuración del Widget web como se muestra a continuación. Se puede establecer Status (Estado) del widget web como Active (Activo).
Cambie Trigger Welcome Skill when chat window is minimized & re-opened (Activar la habilidad de Introducción cuando se minimiza la ventana de chat y se vuelve a abrir) a ON (Activado) para mostrar la habilidad de bienvenida cada vez que la ventana de chat se minimiza o se vuelve a abrir.

Copie la Secret Key (Clave secreta), el Header Code (Código de encabezado) y, por último, el Body Code (Código del cuerpo) y consérvelos en una ubicación de fácil acceso como un bloc de notas o una herramienta de edición de texto. Estos datos se utilizarán más adelante al ajustar el código del widget web en su sitio web. Puede utilizar el ícono de copia que está a la derecha de cada sección para simplificar la operación.
En la sección Widget Code (Código de widget), haga clic en el ícono de descarga para descargar la carpeta luma-web-widget.zip , que incluye los archivos index.html, luma-web-widget.js y web-widget.css con imágenes.
La sección Customize Welcome Screen (Personalizar la pantalla de bienvenida) proporciona un mensaje de introducción a los usuarios invitados y a los usuarios que se inician por primera vez. Uno de los desafíos habituales para los usuarios que interactúan con un bot de chat es comprender lo que puede y no puede hacer el bot. Esta es una forma de educarlos sobre lo que puede hacer el bot. La sección Customize your Welcome Screen (Personalizar la pantalla de bienvenida) consiste en lo siguiente:
- Título de bienvenida: un mensaje de saludo para los usuarios cuando abren la ventana del bot de charla. La cantidad máxima de caracteres es 45.
- Descripción de bienvenida: la Descripción de bienvenida permite comunicar una breve descripción general, el propósito y las capacidades del bot. Especifique un mensaje personalizado para dar la bienvenida al usuario cuando abre el widget web por primera vez. La cantidad máxima de caracteres es 580.
- El Título de bienvenida y la Descripción forman parte de la pantalla de bienvenida. El mensaje de bienvenida aparece para un usuario registrado solo durante su primera interacción con el bot. Sin embargo, para un usuario invitado (un usuario no registrado), el mensaje de bienvenida aparece cada vez que se va e inicia el widget web.
En la sección Customize Widget Color (Personalizar color del widget), se puede personalizar la paleta de colores ingresando o seleccionando el color primario requerido. También se puede seleccionar el color de la lista de colores comunes.
Cambie el botón Show welcome screen (Mostrar pantalla de bienvenida) a ON (Activado). Esto garantiza que se muestre la pantalla de bienvenida cuando un nuevo usuario abre el widget por primera vez.
Haga clic en Save (Guardar) para activar el canal del widget web. Se puede desactivar el widget web si no se desea que este canal esté disponible para los usuarios.

Instalar el Widget web en su sitio

Sin contar las pruebas, la configuración del widget web en el sitio web puede tomar entre 10 y 30 minutos en función de si está familiarizado con el sitio web y la incrustación del HTML.

Para configurar el widget web en su portal web, haga lo siguiente:

Abra la carpeta luma-web-widget (descargada en el paso 5 de la Enable the Web Widget Channel sección anterior).
Abra la página index.html de su portal web en un editor de texto. Pegue los siguientes detalles en la página index.html:
1. Pegue el contenido de la página de índice de la carpeta luma-web-widget en la página index.html.
2. Pegue el Código de encabezado de la página de configuración del Web Widget (Widget web) (copiado en el paso 4 de la sección Enable the Web Widget Channel anterior) en el index.html. El código de encabezado incluye la hoja de estilo CSS asociada con el widget web. Para obtener más información sobre cómo personalizar la hoja de estilo para cambiar la apariencia del widget web, consulte el artículo Personalizar estilos del widget web . Consulte el siguiente ejemplo de una página index.html de muestra.
  Ejemplo de código de cabecera
```
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
<link href='luma-web-widget.css' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <style>
  .luma-chat-toggle {
    position: fixed;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06), 0 2px 32px rgba(0,0,0,0.16);
    cursor: pointer;
  }
  </style> 
```
3. Pegue el Código de cuerpo de la página de configuración del Web Widget (Widget Web) (copiado en el paso 4 de la sección Enable the Web Widget Channel anterior) en el index.html.El código del cuerpo (que incluye la clave secreta) contiene el siguiente javascript, que se utiliza para incrustar el control del chat web en su sitio web.
  Ejemplo de código de cuerpo
```
<div id='botHere'>

    <div class="luma-chat-toggle" onclick="toggleChatWidget()">

      <i class="bot-icon"></i>

    </div>

      <script type='text/javascript' src='luma-web-widget.js'></script>

      <script>

        LumaBot({

          botName: 'LumaChatBot',

          user: {

            clientUserId: 'xxxxx-xxxxx-xxxxx-xxxxxxxx',

            additionalProperties: {

            }

          },

          secretkey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

          domain: 'https://luma3.serviceaide.com'

        },

        document.getElementById('botHere'));

        // Function to call init for LumaBot

        function toggleChatWidget() {

          LumaBot.toggleChatWidget();

        }

      </script>

    </div>
```
  El código de cuerpo consta de los siguientes elementos:
  1. Contenedor div: el elemento “div” se pasa como un parámetro al bot de Luma, que lo utiliza para iniciar el bot.
  2. Script: consta de los siguientes parámetros:
    - Nombre del bot: el nombre del bot con el que está conversando. Puede editar el nombre del bot según sea necesario en la página index.html. Este nombre de bot aparece en la ventana de chat del widget web como se muestra a continuación. No es necesario que coincida con el nombre del bot dentro de la interfaz de Bot Builder (Consola de Administración de Luma).
      Nota
      
      En la página index.html de muestra, el nombre del bot es “LumaChatBot”.
    - Objeto de usuario: consta de dos parámetros (el ID de usuario del cliente y el nombre para mostrar del usuario).
    - ID de usuario del cliente: es un ID asignado a cada usuario único de su sitio web. Si el usuario inicia sesión en el portal web con sus credenciales, esas credenciales (ID de correo electrónico o nombre de usuario) se transfieren al widget web para autenticar a los usuarios automáticamente. Si no se pasa el ID de usuario del cliente al widget web, el usuario continúa como invitado y se le solicita que se registre.
    - Clave secreta: el código único generado en Bot Builder (Consola de Administración de Luma) que se utiliza para autenticar las llamadas de la API realizadas al bot.
    - Dominio: la dirección URL del dominio es la dirección URL utilizada para comunicarse con la plataforma de Luma Virtual Agent. Esta dirección URL se rellena previamente en el código del cuerpo. Asegúrese de que se proporcione la dirección URL del dominio correcta en el cuerpo; de lo contrario, no se conectará a la instancia de Luma Virtual Agent.
Guarde la página index.html con los cambios y actualice el portal web y la memoria caché para cargar el widget web automáticamente en la pantalla para los usuarios, como se muestra en la siguiente página de muestra.
Nota

Puesto que el Widget web se completa automáticamente en la pantalla, los usuarios no necesitan configurar nada para ver el widget web.
Haga clic en el ícono del chat para abrir el widget web que, en la primera interacción, muestra la habilidad de bienvenida como se muestra en la siguiente página de ejemplo.
En las sesiones de chat posteriores, el widget web mostrará el historial de conversaciones anteriores para los usuarios autenticados. En el caso de los usuarios invitados, el mensaje de bienvenida se muestra cada vez que el usuario chatea en el widget web.

Aplicar estilos a elementos HTML individuales

Se pueden aplicar estilos a los elementos HTML individuales de forma dinámica especificando el siguiente objeto en el código de cuerpo de la página index.html.

Ejemplo de código de cuerpo

LumaBot({
    botName: "LumaChatBot",
    user: {
        clientUserId: '<USER ID>',
        additionalProperties: {
        }
    },
    secretkey: '<YOUR SECRET KEY>',
    domain: "<YOUR DOMAIN>",
    styleOptions: {
        lumaChatContainer: {
            height: '400px',
            right: '0px',
            bottom: '0px',
            width: '25%'
        }
    },
},document.getElementById("botHere"));

La siguiente lista de propiedades se puede editar usando el objeto anterior:

lumaChatContainer
lumaChatHeaderContainer
lumaTextBot
lumaTextUser
lumaTextAgent
messageInfoBot
messageInfoUser
botFaceIcon
agentIcon
welcomeContainer
welcomeImage
brokenBot
downloadLink
chatInput
attachFile
connectionStart
cardText
cardTitle
cardSubTitle
cardButton
quickReplyTitle
quickReplySubTitle
quickReplyButton

Activar devolución de llamada en el widget web

Puede permitir la devolución de llamada en el widget web incrustado en su sitio web. Esto permite que el bot realice una acción en su página web como navegar a una nueva pestaña, navegar a una sección de la página, redirigir a una nueva página web o asignar un valor a un atributo sin mostrar la información al usuario final.

A continuación se muestra el código de muestra para activar la devolución de llamada en el widget web. Los usuarios finales se redirigen a la página de contacto del sitio web cuando se solicita la habilidad Customer Support Queries (Consultas de Servicio de Atención al Cliente) (identificador de la habilidad: customer_support_queries). Puede personalizar el código y agregarlo al código del cuerpo en el archivo index.html para cambiar el comportamiento según sea necesario.

Ejemplo de código de cuerpo

<script>
    LumaBot({
      botName: "LumaChatBot",
      user: {
        clientUserId: '<USER ID>',
        additionalProperties: {
        }
      },
      secretkey: '<YOUR SECRET KEY>',
      domain: "<YOUR DOMAIN>",
      styleOptions: {
        lumaChatContainer: {
          width: '400px'
        }
      }
    },
      document.getElementById("botHere"));
    function toggleChatWidget() {
      LumaBot.toggleChatWidget();
    }
    LumaBot.getIncomingMessages(callback);
    function callback(data) {
      console.log(data);
      if (data) {
        if (data && data.conversationContext && data.conversationContext.conversationAttributes.skillIdentifier === 'customer_support_queries') {
          console.log("moving to another page");
          window.location.href = "./contact/index.html";
        }
        if (data && data.conversationContext && data.conversationContext.conversationAttributes.skillIdentifier === 'corporate_office_location') {
          console.log("moving to another page");
          window.location.href = "./customer-support/index.html";
        }
      }
    }
  </script>

Chatear con el bot

Una vez que el servicio esté funcionando, se pueden enviar y recibir mensajes desde el bot.

Si ocurre algún problema con la configuración, comuníquese con el equipo de Soporte de Serviceaide.

Información adicional

A continuación, se muestra la lista de información adicional al utilizar el widget web:

El bot muestra un recuento de mensajes sin leer tal como se muestra en el ejemplo siguiente. Para ver los mensajes, haga clic en el ícono del bot.
En el caso de que haya varias opciones, se mostrarán las tarjetas de respuesta al usuario, tal como se muestra en el siguiente ejemplo.
Durante la conversación por chat, se admite la vista de respuestas rápidas, como se muestra en el siguiente ejemplo.
Durante la conversación por chat, el bot muestra la escala de tiempo de fechas del chat con la hora del mensaje para consultar fácilmente como se muestra en el siguiente ejemplo.

Sugerencias para la resolución de problemas

Durante la conversación por chat con el bot, pueden surgir problemas. Para obtener más información sobre cómo solucionar los problemas del widget web, consulte Solución de problemas del Widget web.

Luma Virtual Agent - Spanish