You are viewing the Spanish (Mexico) site, but your language preference is set to English. Switch to English site →

Menu

Instalación y uso de Flex WebChat

Actualmente estás leyendo documentación de mensajería antigua de Flex. Si estás empezando con una nueva implementación de Flex, considera la posibilidad de utilizar Flex Conversations.

La documentación generada automáticamente para la interfaz de usuario de Flex WebChat ahora está disponible como una distribución beta. La documentación generada automáticamente es precisa y completa, y puede diferir de lo que se ve en la documentación oficial de la interfaz de usuario 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:

La siguiente documentación de WebChat se aplica a WebChat 2.0.0 y versiones posteriores. Consulta las notas de la versión para ver qué ha cambiado desde la versión 2.0.0.

Primeros pasos con WebChat

Actualmente, hay dos formas de consumir Flex WebChat:

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

Versión Token de integridad
2.9.1 sha512-yBmOHVWuWT6HOjfgPYkFe70bboby/BTj9TGHXTlEatWnYkW5fFezXqW9ZgNtuRUqHWrzNXVsqu6cKm3Y04kHMA==
2.9.0 sha512-gfk5re40mGDic7co5dfTc4ZVtL2sQ0xFrzsJsMg1QbDisA3UyQB5Crd7Yyk7AOeGvdX1pltln7pq/aADzTJD4g==
2.8.1 sha512-KzpB56iRohSbDOkfM/V0PTp9DGHMno2EJJx6Zg8Ul3byOV3xtAurIZ+NibcO+cc0SEDvodI/5SKMSv2p+gwSYw==
2.8.0 sha512-442DGR3EEEkHK5QAlm+JpfehHr8+x3wq5TAbypQRbmEE5oHl0LeAtCVk3xfZ6bV+QjrlwKGkbT51zQ+v1A2Ueg==
2.7.1 sha512-uxirrFUoGuvGOOIkCX5ZzQ5WfEuDqRwtherlm5QjZxNeVoFgzL3KZXA98NHV8RsAdR2awLmOmBN1r/QCgEFvhA==
2.7.0 sha512-DWeN99d0UwyKwY/cBk9bMrjwdU6XFWynM4kQ+Yee6dZNwf0ZVzLJhJs2d6GbG/W3VOw6mUVS0JhSw4WI2wVeyA==
2.6.1 sha512-cQHsT9wKBmSjqHJxF85LdMKQiTXW6Bvmvq8mgg05lvcq0RMZmIdAe/hBjlmwZR1WgZVbq1CW2e+8DWfifDdiLw==
2.6.0 sha512-E1OX3Cyq3KaDo4WM6fITGRv2eiGQbK40AJxNdsvC6BRxkUGp7f4RchZeOAVXHTTA3+4KjSeZDJB1cFpikR5EVw==
2.5.1 sha512-PtzV20UxBmoawZw6NrwzeHTrGYUBTVOe2dRO1PFnhilM48HKgbQ6BId5QURWoK3d3Fjgw03h8xTl3YvBvqzIuQ==
2.5.0 sha512-aJbAHiYQxwqK+Hi32EnFKywUXDp8bPtKNwm/pSgd5Eie7OW28RQlKxmKqvDhiekVRD0reJNSbzF5wjK4VG85sQ==
2.4.0 sha512-sJe2ZYbixQ0qDkEDC0c0DWjEAo6a5+fwPjCVQ4uWAj89hnFsYZgwbG/AFWlbNzFKkue7lM5oWqXjMp7p6Fi0KQ==
2.3.1 sha512-v+iq1pWN5HHQtNoUKDnQCVJhTgmbozCgRKkIdCI4Ub8bKuXs7TmPDoEAtPZJXExY+0CNw4vU+TlosD6MEvNn+g==
2.3.0 sha512-G4oFESS6nt1URwN23X670e1N7UIgiGJyINEsyrexNp28GSSrJ6GVwJCDElIDaZUIHOJiEwoJPdi2iT5S03XzKw==
2.2.1 sha512-q5oRRUPjLeW69a3nlGBt0iR4V5yBY/7ALQ85veEPFRh1xfp8LPy6/JwITfHJVqfNnDOqXpvnyiijNGWYlK8dSw==
2.2.0 sha512-bOmqok+FZdtlOKVEy830tV9tNvTm7dknDYWwZLcB/O4q3Cg5oS7jDoZO4zzHL2nAjlc5Im4Ws+4RZNemvetSHA==

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

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:

¡Eso y mucho más!

Calificar esta página:

¿Necesitas ayuda?

Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

Gracias por tus comentarios.

Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

Enviando tus comentarios…
🎉 Gracias por tus comentarios.
Se produjo un error. Inténtalo de nuevo.

Gracias por tus comentarios.

thanks-feedback-gif