Ejemplos de Flow JSON para clonar

Una sola pantalla: nombre, correo y consentimiento para recibir novedades. Termina el Flow con la acción complete, que envía los datos a tu webhook de mensajes.

{
  "version": "3.0",
  "screens": [
    {
      "id": "REGISTRO",
      "title": "Regístrate",
      "terminal": true,
      "success": true,
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          { "type": "TextHeading", "text": "Déjanos tus datos" },
          { "type": "TextInput", "name": "nombre", "label": "Nombre completo", "input-type": "text", "required": true },
          { "type": "TextInput", "name": "email", "label": "Correo electrónico", "input-type": "email", "required": true },
          { "type": "OptIn", "name": "acepta_novedades", "label": "Acepto recibir novedades por WhatsApp", "required": true },
          {
            "type": "Footer",
            "label": "Enviar",
            "on-click-action": {
              "name": "complete",
              "payload": {
                "nombre": "${form.nombre}",
                "email": "${form.email}",
                "acepta_novedades": "${form.acepta_novedades}"
              }
            }
          }
        ]
      }
    }
  ]
}

Calificación de 5 opciones con RadioButtonsGroup y un comentario opcional. Útil después de una venta o un ticket de soporte cerrado.

{
  "version": "3.0",
  "screens": [
    {
      "id": "ENCUESTA",
      "title": "Tu opinión",
      "terminal": true,
      "success": true,
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          { "type": "TextHeading", "text": "¿Cómo calificarías tu última compra?" },
          {
            "type": "RadioButtonsGroup",
            "name": "calificacion",
            "label": "Calificación",
            "required": true,
            "data-source": [
              { "id": "5", "title": "Excelente" },
              { "id": "4", "title": "Buena" },
              { "id": "3", "title": "Regular" },
              { "id": "2", "title": "Mala" },
              { "id": "1", "title": "Muy mala" }
            ]
          },
          { "type": "TextArea", "name": "comentario", "label": "¿Algo que quieras contarnos? (opcional)", "required": false },
          {
            "type": "Footer",
            "label": "Enviar respuesta",
            "on-click-action": {
              "name": "complete",
              "payload": {
                "calificacion": "${form.calificacion}",
                "comentario": "${form.comentario}"
              }
            }
          }
        ]
      }
    }
  ]
}

Elegir servicio con Dropdown, pasar a una segunda pantalla con navigate, y elegir fecha con DatePicker. Sin servidor propio — el enrutado entre pantallas se genera automático al no usar un extremo de datos.

{
  "version": "3.0",
  "screens": [
    {
      "id": "SERVICIO",
      "title": "Reserva tu cita",
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          { "type": "TextHeading", "text": "¿Qué servicio necesitas?" },
          {
            "type": "Dropdown",
            "name": "servicio",
            "label": "Servicio",
            "required": true,
            "data-source": [
              { "id": "corte", "title": "Corte de cabello" },
              { "id": "color", "title": "Color" },
              { "id": "manicure", "title": "Manicure" }
            ]
          },
          {
            "type": "Footer",
            "label": "Continuar",
            "on-click-action": {
              "name": "navigate",
              "next": { "type": "screen", "name": "FECHA" },
              "payload": { "servicio": "${form.servicio}" }
            }
          }
        ]
      }
    },
    {
      "id": "FECHA",
      "title": "Elige fecha",
      "terminal": true,
      "success": true,
      "data": {
        "servicio": { "type": "string", "__example__": "corte" }
      },
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          { "type": "DatePicker", "name": "fecha", "label": "Fecha preferida", "required": true },
          {
            "type": "Footer",
            "label": "Confirmar cita",
            "on-click-action": {
              "name": "complete",
              "payload": {
                "servicio": "${data.servicio}",
                "fecha": "${form.fecha}"
              }
            }
          }
        ]
      }
    }
  ]
}