Instalación y uso de Flex WebChat

¿Qué es Flex WebChat?

Flex WebChat es un widget de chat que puedes incrustar en tu sitio web. El widget permite a los clientes chatear con un agente sin tener que salir de tu sitio web. Se integra de forma nativa en el contact center de Flex.

¿Qué puedes hacer con WebChat?

La experiencia de Flex WebChat es totalmente personalizable. WebChat se puede personalizar de las siguientes maneras:

• Cambiar la configuración básica de WebChat
• Cambiar el aspecto de WebChat
• Personalizar formularios y recopilar información contextual
• Agregar, reemplazar o eliminar componentes para personalizar la interfaz de usuario
• Personalizar el comportamiento de WebChat según las acciones del usuario

Primeros pasos con WebChat

Actualmente, hay dos formas de consumir Flex WebChat:

• CDN
• npm

Requisitos previos

Para obtener acceso y configurar Flex WebChat, deberás completar primero el inicio rápido de Flex.

Cómo consumir el paquete desde la CDN

Hay dos formas de agregar Flex WebChat desde la CDN:

Opción 1:

Los siguientes pasos son la forma más rápida de agregar Flex WebChat a tu app. Sin embargo, la configuración de CDN no permitirá la programación avanzada del flujo de inicialización de Flex WebChat.

1. Agrega la siguiente etiqueta script a la etiqueta head de tu archivo index.html para incluir el paquete de WebChat desde la CDN.

Opcionalmente, puedes incluir un token de integridad para verificar que Flex WebChat se proporcione sin ninguna manipulación inesperada. Si quieres hacerlo, incluye las claves "integrity" y "crossorigin" en el script.

<script src="https://assets.flex.twilio.com/releases/flex-webchat-ui/2.9.1/twilio-flex-webchat.min.js" integrity="sha512-yBmOHVWuWT6HOjfgPYkFe70bboby/BTj9TGHXTlEatWnYkW5fFezXqW9ZgNtuRUqHWrzNXVsqu6cKm3Y04kHMA==" crossorigin></script>

En la siguiente tabla se muestran los tokens de integridad de las versiones anteriores (a partir de la versión v2.2.0).

2. Agrega la siguiente etiqueta script a la etiqueta body del archivo index.html para inicializar WebChat.

          <script>
            const appConfig = {
                accountSid:"AC...",
                flexFlowSid:"FO..."
            };
            Twilio.FlexWebChat.renderWebChat(appConfig);
        </script>

Opción 2:

Los siguientes pasos te permitirán personalizar el flujo de inicialización de Flex Web Chat antes de mostrar WebChat, ya que consta de dos pasos: inicializar y mostrar. Esta opción te permite realizar personalizaciones antes de que se ejecute el método encargado de mostrar la interfaz.

Twilio.FlexWebChat.createWebChat(appConfig).then(webchat => {
    const { manager } = webchat;
    
//Posting question from preengagement form as users first chat message
    Twilio.FlexWebChat.Actions.on("afterStartEngagement", (payload) => {
        const { question } = payload.formData;
        if (!question)
            return;

        const { channelSid } = manager.store.getState().flex.session;
        manager
            .chatClient.getChannelBySid(channelSid)
            .then(channel => channel.sendMessage(question));
    });
// Changing the Welcome message
    manager.strings.WelcomeMessage = "New text for welcome message";

// Render WebChat
    webchat.init();
  });

Después de iniciar sesión en Flex como administrador, puedes encontrar flexFlowSid y accountSid en el panel del administrador de Flex(https://flex.twilio.com/admin/developers). Puedes obtener más información sobre los proyectos en la documentación de soporte de Twilio.

Cómo consumir el paquete desde NPM y ejecutarlo localmente

Para empezar a consumir el paquete @twilio/flex-webchat-ui desde npm, ofrecemos un proyecto de ejemplo basado en create-react-app.

Sigue los siguientes pasos para empezar a utilizar el proyecto de ejemplo:

1. Clona el proyecto de ejemplo desde GitHub.

git clone https://github.com/twilio/flex-webchat-ui-sample.git

2. Desplázate al directorio flex-webchat-ui-sample y, a continuación, instala las dependencias.

cd flex-webchat-ui-sample
npm install

3. Copia la configuración de ejemplo y edita webchat-appConfig.js con tu cuenta de Twilio.

cp public/assets/webchat-appConfig.sample.js public/assets/webchat-appConfig.js

4. Inicia el servidor de prueba.

npm start

5. Flex UI (la interfaz de usuario de Flex) local se ejecutará en http://localhost:8081.

Comportamiento predeterminado de WebChat

De forma predeterminada, WebChat está configurado para iniciar el chat (ejecutar la acción startEngagement) en el clic de entryPoint del usuario. Los siguientes pasos se realizan al inicio de la interacción:

• Se emite el token.
• Se crea el canal de chat.
• Se crea el usuario de chat programable con el friendlyName predeterminado y se agrega como miembro al canal.
• Se carga MessagingCanvas con el channelSid creado.
• Se muestra un mensaje predefinido al usuario como una llamada a la acción.

WebChat es uno de los canales que se integra en Flex de forma predeterminada. Cuando se envía un mensaje entrante al canal de chat, se activa un flujo de Studio. Por defecto, este es el flujo de WebChat, que puedes personalizar dentro de la consola de Twilio.

El primer mensaje entrante en el canal de chat activará una nueva ejecución de flujo de Studio. Aquí puedes automatizar una conversación mediante el widget Send & Wait for Reply (Enviar y esperar respuesta) antes de pasar la conversación directamente a un agente con el widget Send to Flex (Enviar a Flex).

A continuación, el widget Send to Flex (Enviar a Flex) crea una tarea de TaskRouter con los atributos proporcionados y elimina el webhook del canal de chat para que los mensajes entrantes futuros no vuelvan a ejecutar el flujo de Studio.

Se puede acceder a los datos previos a la interacción mediante la sintaxis Liquid de Studio. Por ejemplo, podrías incluir esto en el widget Send to Flex (Enviar a Flex):

{"question": "{{trigger.message.ChannelAttributes.pre_engagement_data.question}}"}

¿Qué sigue?

Ahora que ya tienes todo configurado y WebChat está funcionando, puedes hacer esto:

• Cambiar el aspecto de tu página web
• Personalizar el comportamiento del chat con una configuración básica o un marco de acciones
• Agregar un formulario previo a la interacción para solicitar al usuario datos adicionales antes de iniciar el chat
• Recopilar y enviar datos contextuales del usuario para su uso en el enrutamiento del chat a un agente o mostrar dicha información a un agente

¡Eso y mucho más!