Guía para crear y activar formularios de WhatsApp (WhatsApp Flows)

Esta guía explica, paso a paso y en lenguaje sencillo, cómo crear un formulario interactivo de WhatsApp (llamado "Flow") y cómo hacer que funcione correctamente junto con Lynn y Gupshup.

Piensa en el proceso como si tuviera tres etapas:

Diseñar el formulario → se hace en Meta (WhatsApp Manager).
Conectar el "cable" que trae las respuestas → se hace en Gupshup.
Activar el formulario dentro de una conversación → se hace en Lynn.

¿Qué es un WhatsApp Flow?

Es un formulario que aparece dentro del chat de WhatsApp, sin que el usuario tenga que salir a una página web. Sirve para pedir datos, agendar citas, hacer encuestas, etc.

Ventajas:

El usuario no sale de WhatsApp, así que hay menos abandono.
Se recibe información ordenada y sin errores de formato.
Se ve igual de bien en cualquier celular.

Important

Hoy en día estos formularios solo pueden ser estáticos. Es decir, todas las opciones (por ejemplo, las de una lista desplegable) deben quedar definidas de antemano. No es posible que el formulario consulte un sistema externo en tiempo real mientras el usuario lo está llenando (por ejemplo, mostrar sucursales según la ciudad elegida).

Lo que necesitas antes de empezar

Acceso de administrador a Meta Business Suite.
Una cuenta de WhatsApp Business (WABA) ya verificada.
Acceso al WhatsApp Manager de Meta.
Tu canal de WhatsApp en Lynn debe estar configurado con Gupshup como proveedor.

Parte 1: Crear el formulario en Meta

¿Con qué herramienta lo armo?

Meta te da dos formas de crear el formulario:

Herramienta	Para quién es	Cómo funciona
Editor visual (Flows Builder)	Personas sin conocimientos técnicos	Arrastras y ordenas los elementos en pantalla, como armar una diapositiva. Puedes ver una vista previa en tiempo real.
Editor de código (Flow JSON)	Personas con conocimientos técnicos	Se escribe directamente el código que define el formulario. Da más control y permite guardar versiones.

A. WhatsApp Flows Builder (Editor Visual / No-Code)

El Flows Builder es la interfaz gráfica interactiva integrada en el WhatsApp Manager.

Características principales:
- Diseñador Drag-and-Drop: Permite arrastrar y ordenar componentes visuales en el lienzo.
- Previsualización en tiempo real: Simula la apariencia y comportamiento exacto en dispositivos móviles.
- Gestión de pantallas (Screens): Configuración visual de la navegación entre pasos.
- Inspector de propiedades: Ajuste rápido de títulos, textos de ayuda, validaciones y obligatoriedad de campos.
Ideal para: Diseñadores UX, administradores y equipos funcionales.

B. Flow JSON Editor (Editor de Código / Declarativo)

El Flow JSON es la especificación declarativa subyacente que define cada componente, propiedad, pantalla y regla de navegación del Flow.

Características principales:
- Edición directa del schema JSON: Control total sobre las propiedades, estructura jerárquica (screens, layout, children) y acciones (INIT, NAVIGATE, COMPLETE).
- Control de versiones: Facilita almacenar las definiciones del Flow en repositorios de código (Git), clonar plantillas y auditar cambios.
- Validación de esquema: Meta valida la sintaxis contra la versión del schema (ej. v7.3) para asegurar compatibilidad estricta.
Ideal para: Desarrolladores y administradores técnicos que requieren automatización, estandarización o ajustes avanzados.

Si no tienes experiencia técnica, usa el editor visual.

Pasos para crear el formulario

Entra a Meta Business Suite.
Ve a Configuración del negocio → Cuentas de WhatsApp → elige tu cuenta → abre Administrador de WhatsApp.
En el menú de la izquierda, entra a Herramientas de la cuenta → Flujos (Flows).
Haz clic en Crear flujo.
Completa:
- Nombre del flujo (por ejemplo: formulario_contacto_soporte).
- Categoría (por ejemplo: atención al cliente, encuestas, registro).
- Plantilla base: puedes partir de un lienzo en blanco o de una plantilla ya hecha.
Diseña las pantallas del formulario, agregando los campos que necesites (ver tabla abajo).
Muy importante: la última pantalla, donde el usuario envía el formulario, debe estar marcada como pantalla final (en el código esto se ve como "terminal": true). Si usas el editor visual, esto normalmente se configura solo al definir el botón de envío.
Revisa la vista previa (modo Preview) para confirmar que se ve y funciona bien.
Publica el flujo.

Elementos que puedes usar en el formulario

Tipo	Elemento	Para qué sirve
Texto	Título, subtítulo, párrafo, nota	Mostrar información o instrucciones
Entrada de texto	Campo de texto simple	Nombre, correo, teléfono, etc.
Entrada de texto	Campo de texto largo	Comentarios o descripciones
Selección única	Botones de opción	El usuario elige una sola opción visible
Selección única	Lista desplegable	El usuario elige una opción de una lista
Selección múltiple	Casillas de verificación	El usuario puede elegir varias opciones
Fecha	Selector de fecha	Elegir un día de un calendario
Acción	Botón	Para pasar a otra pantalla o para enviar el formulario

Cosa clave a recordar

Como el formulario es estático, todas las opciones de las listas deben quedar escritas de antemano en el diseño. No se pueden traer opciones "en vivo" desde otro sistema mientras el usuario completa el formulario.

Parte 2: Conectar Gupshup para recibir las respuestas

Una vez publicado el formulario en Meta, hay que decirle a Gupshup que reciba las respuestas y se las pase a Lynn. Para eso se configura un webhook (un canal por donde llegan los datos automáticamente).

Pasos

Entra a la consola de Gupshup con tu usuario.
Ve al panel de aplicaciones y selecciona la app de WhatsApp que está conectada a tu número y a Lynn.
Dentro de la configuración de la app, busca la sección Webhooks.
Haz clic en Agregar webhook (Add Webhook).
Completa el formulario con estos datos exactos:

Campo	Qué poner
Nombre del webhook	`flows`
Callback URL	La misma URL que ya está configurada para los mensajes normales en Lynn (no se crea una nueva)
Formato del webhook	`Meta format (v3)`
Eventos a seleccionar	`Flow`, `Read` y `Failed`

Guarda haciendo clic en Agregar webhook.
Verifica que el interruptor (toggle) de este nuevo webhook quede activado (ON).

¿Por qué es necesario este paso?

Sin este webhook, cuando el usuario complete el formulario en su celular, la respuesta no llegaría a Lynn y la conversación no podría continuar automáticamente.

Cómo viaja la información (de forma simple)

flowchart TD
    A[Usuario llena el formulario en WhatsApp] --> B[Meta envía la respuesta]
    B --> C["Gupshup la recibe por el webhook 'flows'"]
    C --> D[Gupshup se la reenvía a Lynn]
    D --> E[Lynn continúa la conversación o pasa el caso a un agente]

Parte 3: Activar el formulario desde Lynn

Aquí es donde defines cuándo y cómo se le muestra el formulario al usuario dentro de la conversación.

Paso previo: vincular la cuenta

Entra a la consola de administración de Lynn.
Ve a Canales → WhatsApp.
Asocia tu cuenta con el ID Partner de Gupshup correspondiente a tu número de WhatsApp.

Elegir cómo se activa el formulario

Existen dos formas, según el momento en que quieras mostrarlo:

1. Envío como mensaje de plantilla (fuera o dentro de la ventana de 24 horas)

Se usa cuando quieres enviar el formulario de forma proactiva, por ejemplo en una campaña o notificación.
En Lynn, esto se configura con el módulo Request HSM (RequestFlowMeta).
Requiere tener previamente una plantilla de WhatsApp aprobada por Meta que incluya el botón del formulario.

2. Envío durante una conversación activa

Se usa cuando el formulario debe aparecer en medio de una conversación en curso (dentro de las 24 horas desde el último mensaje del usuario).
En Lynn, esto se configura con el módulo WhatsappFlowDynamic.
Aquí se indica el ID del formulario, el título, el texto explicativo y el texto del botón que abre el formulario.

¿Cuál elegir? Si vas a enviar el formulario tú primero (por ejemplo, una campaña), usa la opción 1. Si el formulario se dispara como parte de la conversación que ya está teniendo el bot con el usuario, usa la opción 2.

Resumen visual del proceso completo

flowchart TD
    A["1 · Diseñas el formulario<br/>en Meta (WhatsApp Manager)"] --> B["2 · Publicas el formulario"]
    B --> C["3 · Configuras el webhook 'flows'<br/>en Gupshup"]
    C --> D["4 · Vinculas tu cuenta de WhatsApp<br/>con Lynn (ID Partner Gupshup)"]
    D --> E{"5 · ¿Cómo se activa?"}
    E -->|Plantilla| F["RequestFlowMeta"]
    E -->|Mensaje en sesión| G["WhatsappFlowDynamic"]
    F --> H["6 · El usuario completa<br/>el formulario en su WhatsApp"]
    G --> H
    H --> I["7 · La respuesta regresa a Lynn<br/>vía Gupshup y el bot continúa"]

Ejemplo Funcional de Flow JSON (Schema v7.3 - Estático)

A continuación se presenta un ejemplo validado y funcional bajo la especificación v7.3, incluyendo la propiedad obligatoria "terminal": true para la pantalla de cierre:

{
  "version": "7.3",
  "screens": [
    {
      "id": "SCREEN_DATOS_CONTACTO",
      "title": "Solicitud de Información",
      "terminal": true,
      "data": {},
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "TextHeading",
            "text": "Ingresa tus datos"
          },
          {
            "type": "TextBody",
            "text": "Por favor completa los siguientes campos para que un asesor te contacte."
          },
          {
            "type": "TextInput",
            "name": "nombre_completo",
            "label": "Nombre y Apellido",
            "required": true
          },
          {
            "type": "TextInput",
            "name": "correo_electronico",
            "label": "Correo Electrónico",
            "required": true,
            "input-type": "email"
          },
          {
            "type": "Dropdown",
            "name": "motivo_contacto",
            "label": "Motivo de consulta",
            "required": true,
            "data-source": [
              { "id": "soporte", "title": "Soporte Técnico" },
              { "id": "ventas", "title": "Cotizaciones y Ventas" },
              { "id": "reclamos", "title": "Gestión de Reclamos" }
            ]
          },
          {
            "type": "Footer",
            "label": "Enviar Solicitud",
            "on-click-action": {
              "name": "complete",
              "payload": {
                "nombre": "${form.nombre_completo}",
                "email": "${form.correo_electronico}",
                "motivo": "${form.motivo_contacto}"
              }
            }
          }
        ]
      }
    }
  ]
}

Lista de verificación final

Antes de dar por terminada la configuración, revisa que todo esto esté hecho:

[ ] El formulario (Flow) está creado y publicado en el WhatsApp Manager de Meta.
[ ] La pantalla final del formulario tiene marcada la opción de pantalla terminal, para que el botón de enviar funcione.
[ ] El formulario no depende de ninguna consulta externa en tiempo real (todo es estático).
[ ] En Gupshup existe un webhook llamado flows, en formato Meta format (v3), con los eventos Flow, Read y Failed activados.
[ ] La URL de este webhook es la misma que usa el webhook de mensajería normal.
[ ] El interruptor del webhook flows está en estado ON.
[ ] En Lynn, la cuenta de WhatsApp está vinculada con el ID Partner correcto de Gupshup.
[ ] Elegiste el módulo correcto en Lynn según el caso: RequestFlowMeta (plantilla) o WhatsappFlowDynamic (mensaje en sesión).

Preguntas frecuentes

¿Puedo hacer que el formulario muestre opciones distintas según lo que el usuario respondió antes? No por ahora. Todo el contenido del formulario debe quedar definido desde el diseño, ya que no hay conexión con sistemas externos mientras el usuario lo completa.

¿Dónde se diseña el formulario, en Meta o en Lynn? Siempre en Meta. Lynn no tiene una herramienta propia para diseñar formularios; solo se encarga de activarlos y de recibir las respuestas (a través de Gupshup).

¿Qué pasa si no configuro el webhook "flows" en Gupshup? El usuario podrá ver y completar el formulario, pero la respuesta no llegará a Lynn, por lo que la conversación no podrá continuar de forma automática.

Table of Contents