¿Qué es WhatsApp Flows?

Índice:

Para qué sirve

WhatsApp Flows es una forma de construir interacciones estructuradas para mensajes comerciales. Con Flows, las empresas pueden definir, configurar y personalizar mensajes con interacciones enriquecidas que brindan a los clientes más estructura en la forma en que se comunican.

Puedes usar Flows para casos de uso como agendamiento, exhibición de productos, recolección de retroalimentación de clientes, captura de leads de ventas o cualquier otro caso donde la comunicación estructurada sea más natural o cómoda para tus clientes.

Consultando la documentación oficial de Meta

Meta proporciona una documentación completa con todos los aspectos para entender y crear Flows, con ejemplos prácticos de código y cómo montar las interfaces y componentes. Usa esta referencia para crear y probar tus interfaces; cuando estés listo, podrás usar las APIs de Blip para crear e integrar a tu contacto inteligente.

Documentación completa de Meta aquí.

¿Qué aprenderás en este artículo del Blip Help?

Aquí mostraremos lo básico para crear y enviar en tu bot un Flow básico, que podrás mejorar para satisfacer tus necesidades.

Aprenderás:

Obtener credenciales de la API de comandos de tu bot en Blip.
Crear un Flow, que se creará directamente en tu WABA
Actualizar el Flow proporcionando el código Flow JSON responsable de montar los componentes y el comportamiento de navegación de tu Flow. (Simula un HTML usado para montar componentes para navegadores web; el Flow JSON monta los componentes para mostrarse dentro de WhatsApp.)
Actualizar la clave pública de un Flow, para que la comunicación entre tu servidor y WhatsApp sea cifrada y segura.
Eliminar o descontinuar un Flow
Usar el Builder de Blip para enviar tu Flow a tus contactos.

Cómo crear flows vía APIs de Blip commands

Obteniendo las credenciales para acceder a la API

Para usar la API de comandos de Blip, necesitas obtener las credenciales en la configuración de tu chatbot. Con estos datos en mano, podrás usar cualquier herramienta de llamadas HTTP para gestionar tus Flows. Los ejemplos a continuación usan la herramienta Postman, pero pueden reproducirse en cualquier herramienta similar.

Accede al menú información de conexión para obtener:

Authorization
URL para enviar comandos

Preparación del entorno:

En Postman, configura las variables según los datos de tu Bot obtenidos en la sección de credenciales de la API.

Visión general

Todos los Flows se crean en la WABA del número de WhatsApp. Todo Flow se crea con el estado Draft, lo que significa que está en fase de desarrollo y debe configurarse y publicarse antes de usarse ampliamente.

Después de crear un Flow proporcionando el Nombre y Categoría, debes enviar el archivo Flow JSON, un formato que Meta creó para representar la organización de componentes visuales dentro de cada pantalla del Flow.

Después de actualizar el Flow con el código Flow JSON, puedes probar cómo está quedando usando el Builder de Blip, y cuando todo esté correcto con tu Flow podrás publicarlo dentro de la WABA.

Una vez publicado, el Flow no puede modificarse, solo puede descontinuarse/desactivarse.
Solo es posible editar Flows en formato Draft; si está publicado, ya no puede editarse.
Un Flow que nunca fue publicado puede eliminarse de la WABA.

Cómo crear un Flow

REQUISICIÓN:

Además de los parámetros básicos de la API de comandos de Blip como [id],[to],[type] que deben ser los mismos en todas las solicitudes para gestionar los Flows, indica:

method: set
uri: /whatsapp-flows
name: El nombre de tu Flow
categories: [Al menos una categoría es obligatoria]
1. Valores posibles para categories: SIGN_UP, SIGN_IN, APPOINTMENT_BOOKING, LEAD_GENERATION, CONTACT_US, CUSTOMER_SUPPORT, SURVEY, OTHER

RESPUESTA:

En la respuesta, recibirás el ID del Flow creado. Este ID es importante para todas las demás llamadas siguientes. Al crear el flow, guarda este ID.

Este flow se creará en la WABA vinculada al bot. Con este ID, podrás usar otros endpoints para gestionar este flow.

Este ID también se usará en el Builder de Blip más adelante, para poder enviar el flow a tus contactos.

Listando tus Flows creados

REQUISICIÓN:

method: get
uri: /whatsapp-flows

RESPUESTA:

En la respuesta, además del nombre y categorías, puedes verificar:

El estado, que inicialmente será DRAFT, hasta que publiques el Flow.
Los errores de validación, si los hubiera.

Estos errores de validación solo aparecerán después de enviar el código Flow JSON, y si este código presenta algún problema de semántica o sintaxis.

Enviando el código Flow JSON que representa el aspecto visual de tu Flow

Meta creó para WhatsApp un nuevo tipo de formato y lenguaje que necesitas crear para representar la interfaz gráfica de tu Flow. Similar al código de marcado HTML, delimita qué componentes y estructura tendrá cada pantalla del Flow.

Para entender más sobre este formato y su aplicación, consulta la documentación oficial de Meta en el portal de desarrolladores. Es importante escribir el código en el formato correcto, siempre atento a errores de validación.

Meta pone a disposición el Playground, un constructor visual para ayudar en la ideación y desarrollo de tus Flows, desde el Playground puedes construir tus Flows con unos clics y obtener el JSON. El uso del constructor no es un requisito para crear tu código JSON, pero es una herramienta de apoyo.

Con el JSON, debes actualizar tu Flow creado con este código, para ello solo inserta el código en la siguiente solicitud:

REQUISICIÓN:

method: set
uri: /whatsapp-flows/flow-json/{FLOW_ID}

El código abajo envía el JSON para crear un Flow de ‘hello world’:

El código Flow JSON anterior generará un Flow con el siguiente diseño:

RESPUESTA:

Obteniendo el enlace de vista previa y más detalles de tu Flow

Para visualizar una vista previa de tu Flow, puedes usar un endpoint para obtener el enlace de esta vista previa. La respuesta también trae más información relacionada con la WABA en la que se creó el Flow.

REQUISICIÓN:

method: get
uri: /whatsapp-flows/{FLOW_ID}

RESPUESTA:

En la respuesta, puedes obtener un enlace para acceder a la vista previa, recordando que este enlace tiene una expiración aproximada de 30 días. Esta vista previa se muestra en el navegador, mostrando una experiencia aproximada de cómo se verá en el smartphone del usuario.

Actualizando el nombre y categoría de tu Flow

Antes de publicarse, puedes editar toda la información de tu Flow, como Nombre, categorías e incluso el código Flow JSON

REQUISICIÓN:

method: set
uri: /whatsapp-flows/{FLOW_ID}

RESPUESTA:

Para obtener el JSON de tu Flow actual

REQUISICIÓN:

method: get
uri: /whatsapp-flows/assets/{FLOW_ID}

RESPUESTA:

Accediendo al enlace destacado, obtienes el archivo JSON actual de tu Flow:

Para publicar tu Flow para un estado de uso en producción

Todo Flow se crea en formato DRAFT, es decir: borrador, mientras está en borrador puedes editar este Flow sin problemas.

Para usar el componente en producción, es necesario publicarlo. Al publicarse, el Flow pasa por aprobaciones en Meta (este proceso es automático e instantáneo) y a partir de ahí no podrá editarse.

¡Atención!

Si necesitas eliminar un Flow en estado DRAFT, puedes borrarlo; trataremos este tema más adelante en este artículo.

Si necesitas eliminar un Flow en estado PUBLICADO, deberás marcarlo como DEPRECATED, también lo mostraremos a continuación.

Para publicar un Flow:

REQUISICIÓN:

method: get
uri: /whatsapp-flows/publish/{FLOW_ID}

RESPUESTA:

Desactivando un Flow publicado

Teniendo un Flow publicado, si deseas desactivarlo para que ya no pueda usarse, usa la siguiente solicitud:

REQUISICIÓN:

method: get
uri: /whatsapp-flows/deprecate/{FLOW_ID}

RESPUESTA:

Eliminando un Flow que aún no ha sido publicado

Antes de publicarse, un Flow puede eliminarse completamente de tu WABA. Para ello usa la siguiente solicitud:

Para ello:

REQUISICIÓN:

method: delete
uri: /whatsapp-flows/{FLOW_ID}

RESPUESTA:

Flows con endpoints (canal de datos)

Un Flow puede tener dos comportamientos:

Flujo Interno: Todos los datos recolectados circulan solo entre las pantallas del propio Flow. Por ejemplo, si solicitas el nombre del usuario en la primera pantalla, esa información puede pasarse a la segunda pantalla y, al final del llenado, el dato estará disponible para tu bot.
Flujo con API Externa (Canal de Datos): En esta modalidad, el Flow se comunica con una API intermediaria dedicada. Esto permite, por ejemplo, capturar datos ingresados por el usuario, procesarlos en tu servidor y devolver una respuesta dinámica al Flow. Un caso común es un inicio de sesión, donde el usuario ingresa credenciales, el servidor las valida y devuelve el resultado para mostrar en la pantalla siguiente.

Para implementar la segunda opción, necesitarás:

Configurar el JSON del Flow considerando el uso de un endpoint (consulta la documentación de Meta).
Implementar un certificado de cifrado para garantizar la seguridad de los datos intercambiados entre WhatsApp y tu API. A través de la API de Blip, solo debes informar la clave pública correspondiente.
Importante: la clave pública es válida solo para un número y debe configurarse nuevamente cada vez que el Flow con endpoint se use en un nuevo número o enrutador.

Para ello, usa la solicitud:

REQUISICIÓN:

method: set
uri: /whatsapp-flows/public-key/upload

Observación: La clave pública en el ejemplo es inválida y no debe usarse. Sustitúyela por la clave generada por ti según la documentación indicada.

RESPUESTA

Cómo mostrar tus Flows usando contenido dinámico en el Builder

Creando un bloque y usando el mensaje de envío de Flows.

Para enviar tu Flow al usuario durante una conversación, debes usar un bloque con Contenido Dinámico en el Builder.

En el contenido dinámico podrás indicar el tipo de mensaje que deseas enviar con el siguiente código de ejemplo:

Parámetros que necesitas modificar:

flow_id: el ID del flow que deseas enviar
dentro de [flow_action_payload], el parámetro screen, que es la primera pantalla definida en tu archivo Flow JSON

{
  "recipient_type": "individual",
  "messaging_product": "whatsapp",
  "type": "interactive",
  "interactive": {
    "type": "flow",
    "header": {
      "type": "text",
      "text": "Title of buttom CTA"
    },
    "body": {
      "text": "Body of buttom CTA"
    },
    "footer": {
      "text": "Footer of buttom CTA"
    },
    "action": {
      "name": "flow",
      "parameters": {
        "flow_message_version": "3",
        "flow_token": "any_string_for_this_example",
        "flow_id": "10323711744212514",
        "flow_cta": "Open Flow",
        "flow_action": "navigate",
        "flow_action_payload": {
          "screen": "WELCOME_SCREEN",
          "data": {
            "type": "dynamic_object"
          }
        }
      }
    }
  }
}

Consideraciones finales

WhatsApp Flows es una funcionalidad en constante evolución. Nuestro objetivo es mejorar continuamente la experiencia de creación y gestión de Flows en Blip; por ello, sigue las novedades en nuestra comunidad. Además, actualmente contamos con extensiones en la Blip Store desarrolladas por nuestros socios, diseñadas para agilizar y simplificar el proceso de creación de tus Flows.

¿Necesitas más ayuda? Explora nuestros contenidos en la Blip Academy o en la Blip Community, mira tutoriales en nuestro canal de YouTube o resuelve tus dudas en nuestro canal de atención 😃