WhatsApp Flow na pratica

Use telas com Form, TextInput, RadioButtonsGroup, Dropdown, DatePicker e OptIn para coletar dados sem sair do WhatsApp.

Antes de aplicar este exemplo em producao, valide:

• Pre-requisitos e Permissoes
• Regras Meta e Conformidade
• Migracao de Numero para API

O que este exemplo mostra

Este flow demonstra a parte mais importante da experiencia visual do WhatsApp Flow:

• um trigger de entrada para iniciar a jornada
• uma primeira tela de cadastro com campos basicos
• uma segunda tela de confirmacao com novos campos e consolidacao de dados
• o uso de data_exchange para transportar informacao entre telas
• o envio final com wa.sendText usando os dados coletados

Componentes usados na tela

• TextHeading para a chamada principal
• TextBody para orientacoes curtas
• Form para agrupar os campos
• TextInput para nome
• RadioButtonsGroup para tipo de cliente
• Dropdown para cidade
• DatePicker para data de nascimento
• OptIn para aceite de termos
• Footer para acionar data_exchange

Como ler o embed

O embed abaixo representa um flow com duas telas. O primeiro Footer envia nome, tipo_cliente e cidade para a etapa seguinte. A segunda tela recebe esses dados em response, exibe o resumo e devolve o conjunto final com nascimento e aceita_termos.

Se voce quiser adaptar isso para um caso real, o padrao e sempre o mesmo: defina a primeira tela para coletar dados brutos, normalize o que for preciso entre as telas e finalize com um envio ou com uma integracao externa.

Preview no FlowBuilder

Este exemplo abre direto no FlowBuilder embedado. A visualizacao em Fluxo/JSON, simulacao e operacoes do flow ficam dentro do proprio editor.

Nao foi possivel carregar o preview embedado automaticamente.

Troubleshooting

Sintoma	Causa provavel	Correcao
"Algo deu errado" ao navegar de tela	A tela destino declara um campo em data que a origem nao enviou no payload	Inclua o campo no payload do on-click-action ("campo": "${data.campo}" ou ${form.campo}). O botao Validar telas e o endpoint POST /api/v2/waflow/rules/validate apontam exatamente o campo faltante
Texto ${data.X} renderiza vazio	X nao esta declarado na secao data da propria tela	Declare o campo com __example__ na tela que o usa
Flow abre com erro apos trocar a chave	Cliente WhatsApp com a chave publica antiga em cache	O endpoint responde HTTP 421 automaticamente e o WhatsApp re-sincroniza; basta reabrir o Flow
Publicacao falha com erros de validacao	A Meta retornou validation_errors no upload do FLOW_JSON	A mensagem de erro da publicacao lista cada erro com o caminho do componente
Conclusao do Flow nao chega no fluxo	A resposta vem como nfm_reply em um novo turno	Use {{input.flowResponseJson}} / {{input.flowResponse.CAMPO}} apos um waitInput, ou trate como nova mensagem do trigger
Tela ramificada por switch fecha o Flow	Versoes antigas nao percorriam switch entre telas	Suportado: o engine avalia os cases na ordem e segue a porta correta

Sintaxes: ${data.X} e ${form.X} sao do CLIENTE WhatsApp (dentro do JSON da tela); {{input.data.X}} e Handlebars do SERVIDOR (nos do canvas apos o endpoint).