Twilio Flex y API de WhatsApp en minutos

Tiempo de lectura: 3 minutos

November 12, 2020

Redactado por

Jennifer Aprahamian

Twilion

Maria Bermudez

Twilion

Revisado por

Sander Sōnajalg

Twilion

Twilio Flex y API de WhatsApp en minutos

Con el reciente anuncio de la API de Twilio para WhatsApp y el entusiasmo constante que existe en torno a Twilio Flex, pensé que podría ser divertido llevar WhatsApp al espacio del centro de contacto. Con solo unos minutos de configuración, los clientes pueden comunicarse con su empresa a través de un canal completamente diferente. Echemos un vistazo a cómo las novedades más populares en Twilio funcionan en conjunto sin problemas.

Requisitos

Si desea seguir estos pasos e integrar WhatsApp en Flex, necesitará lo siguiente:

Una cuenta de Twilio (regístrese aquí para obtener una cuenta de Twilio gratuita)
Un proyecto con Twilio Flex (comience aquí)
El canal del sandbox de WhatsApp Siga estas instrucciones para instalar el canal del sandbox de WhatsApp en su cuenta. También tendrá que conectar su propia cuenta de WhatsApp con el sandbox.

¡Comencemos!

Comenzar con Flex

Si ya configuró 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 configuración de Flex. Durante este proceso, se crearán varios servicios de Twilio para usted.
Inicie la interfaz de usuario de Flex en su navegador y verá algo como esto:

Interfaz de usuario de Flex de forma predeterminada

Crear una dirección URL de controlador de mensajes

El formato de la URL del controlador de mensajerí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 página Services [Servicios]). Esta será la URL del controlador de mensajes.

Configurar el sandbox de WhatsApp

Vaya al Sandbox de WhatsApp. (Si aún no ha configurado su sandbox, hágalo ahora) Vaya a la sección Sandbox Configuration (Configuración del sandbox) y pegue la URL del controlador de mensajes en el campo de texto “When A Message Comes In” (Cuando aparezca un mensaje). Guarde la configuración del sandbox.

Configuración del webhook del sandbox de WhatsApp

Recopilar algunos detalles de la cuenta

Mientras está en el Sandbox de WhatsApp, guarde su número de WhatsApp para usarlo más tarde.

Vaya a Studio y busque el flujo de mensajería para Flex. Guarde el SID de flujo, el cual comienza con FWxx.

Ubicación de SID del flujo de mensajería

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

Por último, anote su token de autenticación para poder realizar una solicitud de API a Twilio. El token de autenticación es un valor oculto que se encuentra en el panel de control de su cuenta Flex.

Panel de control de la cuenta de WhatsApp en Flex

Vincule WhatsApp con un flujo de Studio

Finalmente, inicie una sesió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

Reemplace los valores anteriores con los siguientes:

Número de WhatsApp (en ContactIdentity) en formato E.164
SID de flujo de Studio (en Integration.FlowSid)
SID de instancia de servicio de chat
SID de la cuenta
Token de autenticación

Ejemplo de respuesta de API de flujos de Flex

{
  "integration": {
    "retry_count": 3,
    "flow_sid": "FWda89b731a3cce381b3c37c69e0cd1013"
  },
  "janitor_enabled": false,
  "integration_type": "studio",
  "date_updated": "2020-11-10T23:20:30Z",
  "enabled": true,
  "friendly_name": "Flex WhatsApp FlexFlow",
  "contact_identity": "whatsapp:+14155238886",
  "account_sid": "ACxx",
  "channel_type": "whatsapp",
  "url": "https://flex-api.twilio.com/v1/FlexFlows/FOb939520aee88d161ae0f750db8ead4b9",
  "sid": "FOb939520aee88d161ae0f750db8ead4b9",
  "date_created": "2020-11-10T23:20:30Z",
  "long_lived": false,
  "chat_service_sid": "IS75c3668972364ff28a4d7ad06f0e6073"
}

Puede manejar sus mensajes con mucho más que solo Studio. Obtenga más información desde nuestra documentación sobre la mensajería en Flex. Para obtener más detalles sobre las propiedades de flujo de Flex, consulte la página de referencia de la API.

Comience a chatear

Ya puede comenzar a usar WhatsApp con Flex. Márquese como disponible en la interfaz de usuario de Flex, envíe un mensaje de WhatsApp al número del sandbox y vea cómo aparece como una nueva tarea en Flex.

Acepte la tarea y comience a chatear. Su centro de contacto ahora puede recibir chats entrantes de WhatsApp y responder a ellos como si fueran mensajes de SMS, chat de Twilio o mensajes de Facebook Messenger.

Seguir practicando con Flex

Ahora que agregó esta integración rápida de canal a Flex, intente agregar otro canal de mensajería. También puede personalizar Flex editando la interfaz de usuario para reflejar su marca, o bien creando componentes personalizados para extender lo que puede hacer con Twilio Flex.

¿Está listo para hacer más con la API de Twilio para WhatsApp? Pruebe nuestra app de traducción de emoji o nuestro bot de búsqueda npm. También puede crear su propio programa único para WhatsApp.

Estamos ansiosos por ver lo que es capaz de crear.

Este artículo fue traducido del original "Twilio WhatsApp API and Flex in Minutes". Mientras estamos en nuestros procesos de traducción, nos encantaría recibir sus comentarios en help@twilio.com - las contribuciones valiosas pueden generar regalos de Twilio.