Cómo transferir chats de WhatsApp de un BOT a Twilio Flex

Tiempo de lectura: 3 minutos

December 03, 2021

Redactado por

Felipe Mora

Twilion

Clara Hernandez

Twilion

Rosario Corres

Twilion

Cómo transferir chats de WhatsApp de un BOT a Twilio Flex

Uno de los casos de uso más comunes en nuestra solución de Twilio Flex es habilitar el canal de WhatsApp, y generalmente lo que se hace es iniciar una conversación desde un flujo de conversación en Studio que luego dará paso a una conversación con un agente en Twilio Flex; para ello es necesario usar el Widget de “Send to Flex” en Twilio Studio.

Este Widget generalmente requiere de configuración extra para que funcione.

En este tutorial, vamos a listar el paso a paso para configurar el widget correctamente para transferir chats de WhatsApp desde un flujo de Twilio Studio a Twilio Flex, complementando los pasos descritos en Twilio Flex y WhatsApp en minutos, para casos de uso en los cuales se quiera implementar un BOT antes de transferir el chat a un agente humano en Twilio Flex.

Adicionalmente, estos pasos resuelven el error "SendToFlexWidget is not supported for this channel/trigger combination" que puede surgir al intentar transferir una conversación de WhatsApp a Twilio Flex.

Manos a la obra

Pre requisitos:

Una cuenta en Twilio
Un ambiente de flex
Numero de whatsapp sender aprobado
Un flujo de studio, desde el cual se quiera hacer transferencias a Flex

Pasos:

1. Comenzar con Twilio Flex

Si ya configuró la instancia de Flex, puede saltar al siguiente paso.

Si es nuevo en Flex, cree una nueva cuenta de Flex. Siga las indicaciones para iniciar la configuración de Flex. Durante este proceso, se crearán varios servicios de Twilio para usted.

Inicie la interfaz de usuario de Flex en su navegador (Flex -> Overview -> Launch Flex) y verá algo como esto:

2. Crear una dirección URL de controlador de mensajes

El formato de la URL del controlador de mensajería debe seguir lo siguiente:

https://webhooks.twilio.com/v1/Accounts/ACxx/Proxy/KSxx/Webhooks/Message

Reemplace ACxx con su SID de cuenta (se encuentra en el panel de control de su cuenta) y KSxx con su SID de servicio de proxy Flex (se encuentra en la página Services [Servicios]). Esta será la URL del controlador de mensajes.

3. Obtener el SID de Programmable Chat

Dentro del chat programable, anote su SID de instancia de servicio de chat, el cual comienza con ISxx:

4. Obtener el Token y SID de la Cuenta

Ahora, anote su token de autenticación para poder realizar una solicitud de API a Twilio. El token de autenticación es un valor oculto que se encuentra en el panel de control de su cuenta Flex.

5. Vincule el número de WhatsApp con un flujo de Studio

Inicie una sesión de shell de comandos y ejecute la siguiente solicitud curl:

curl -X POST "https://flex-api.twilio.com/v1/FlexFlows" \ --data-urlencode "ChannelType=whatsapp" \ --data-urlencode "Enabled=true" \ --data-urlencode "IntegrationType=studio" \ --data-urlencode "ContactIdentity=whatsapp:+xxxx" \ --data-urlencode "FriendlyName=Flex WhatsApp FlexFlow" \ --data-urlencode "Integration.FlowSid=FWxx" \ --data-urlencode "ChatServiceSid=ISxx" \ -u ACxx:yourAuthToken

Este curl va a crear un Flex Flow, el mismo se encuentra dentro de Flex > Manage > Messaging:

Nota: Si se tiene más de 1 número de WABA, hay que ejecutar el curl una vez por cada número.

6. Setear el Flujo de Studio dentro del Flex Flow

En el Flex Flow, configurar el flujo de studio que se quiere ejecutar, así:

7. Asociar el número de WhatsApp con el Flex Flow

Ir a Messaging > Senders > WhatsApp senders y configurar la URL del paso 2 ("Crear una dirección URL de controlador de mensajes") en el campo de "Weboook URL for incoming messages":

8. Crear Flujo de Studio

Una vez tenemos toda la configuración previa, podemos empezar a construir el Flujo en Studio, para ello ingresar a Studio > Flows y dar click en el botón (+). Allí el sistema va a solicitar el nombre del Flujo y luego de esto le va a dar algunas opciones para obtener flujos predefinidos; en este caso vamos a trabajar con un flujo en blanco por lo cual debe seleccionar Start from scratch

Si es la primera vez que va a trabajar con Twilio Studio lo invitamos a consultar la siguiente documentación: https://www.twilio.com/docs/studio

En Studio, configurar el widget Send to Flex, se la siguiente manera:

Workflow: flujo deseado
Channel: Programmable Chat
Atributos: ver a continuación

{
    "name": "{{trigger.message.ChannelAttributes.from}}", 
    "channelType": "{{trigger.message.ChannelAttributes.channel_type}}", 
    "channelSid": "{{trigger.message.ChannelSid}}"
}

Una vez realizada la configuración anterior, al recibir un mensaje entrante a la línea de WhatsApp que configuramos se va a iniciar una interacción en Flex:

Idealmente se sugiere configurar un chatbot previo a que la interacción con el cliente pase a ser atendida por un agente en Flex, por lo cual lo invitamos a consultar el siguiente enlace donde se muestra cómo construir un chatbot usando Twilio Studio: https://www.twilio.com/docs/studio/tutorials/how-to-build-a-chatbot

Conclusión

Ahora, puedes construir BOTs con Twilio Studio y garantizar que, si fuese necesario, tu usuario pueda recibir atención de un agente humano en Twilio Flex.