Considerações:

Este documento inclui algumas recomendações para desenvolvedores, que surgem da experiência desenvolvendo WhatsApp Flows dinâmicos no Botmaker. É importante esclarecer que ele não busca substituir a documentação publicada pela Meta, sendo, na verdade, informação complementar.

META, documentação oficial:
https://developers.facebook.com/docs/whatsapp/flows

DICAS:

1. Comece com algo simples e básico e, depois, avance na complexidade.
2. Inicie com um template em branco ou um "Flow Template": (ver: https://developers.facebook.com/docs/whatsapp/flows/templates) A partir daí, é possível modificar os exemplos, testá-los e copiar a estrutura (JSON). Também serve para testar outros flows: basta substituir o JSON completo do exemplo pelo seu, depois clicar em "run" e selecionar cada uma das screens para validar sua estrutura.
3. Revise os componentes e etiquetas disponíveis; é importante ajustar a quantidade de caracteres, entre outros pontos. (ver: https://developers.facebook.com/docs/whatsapp/flows/reference/flowjson/components) É importante saber que alguns componentes, como os radio buttons, mudam sua visualização ao alterar a plataforma para iOS ou Android.
4. Pode ser útil desenhar a estrutura do flow utilizando o Playground e, depois, exportá-la para a plataforma do Botmaker usando o botão Copy Flow JSON: https://developers.facebook.com/docs/whatsapp/flows/playground
5. Para adicionar imagens, uma prática útil é ir ao Playground e selecionar "Adicionar conteúdo/Conteúdo multimídia/Imagem"; a partir daí, você pode fazer upload de uma imagem e depois copiar o base64 do JSON. Isso ajuda a visualizar rapidamente o tamanho e evitar que a imagem fique muito pequena ou muito grande, além de garantir que a proporção da imagem seja a esperada.
6. Atualmente, os únicos componentes que permitem o uso de listas dinâmicas são "CheckboxGroup", "RadioButtonsGroup" e "Dropdown". Nesse sentido, é importante saber que o flow deve ter definida a estrutura e o tipo de dados que vai receber, e eles devem coincidir com os que a CA do tipo flow vai enviar. A chamada à CA ocorre quando existe um "data_exchange" e pode acontecer ao pressionar o botão do footer, mas também está disponível o "on-select-action".
7. Sempre revise se o "routing_model" não tem erros ou está faltando rotas em cada screen.
8. Verifique se o "data_channel_uri" corresponde à CA do tipo FLOW, ou seja, ao endpoint correspondente.
9. Flow response: traz os dados definidos no flow; se as variáveis já foram previamente criadas na plataforma, elas serão "preenchidas" com os dados do flow.

Exemplo: Compartilhamos um exemplo em que a primeira screen envia um texto, esse texto é enviado ao endpoint e retornado em maiúsculas para a segunda screen:

JSON FLOW

```

{

    "data_api_version": "3.0",

    "data_channel_uri": "https://functions.botmaker.com/whatsapp-flows/TuBusinessID/WabaID/dinamic",

    "routing_model": {

        "SHARE": ["RESPONSE"],

        "RESPONSE": []

    },

    "screens": [{

        "layout": {

            "children": [{

                "children": [{

                    "text": "Aquí puedes escribir tu nombre:",

                    "type": "TextSubheading"

                }, {

                    "name": "comment_text",

                    "label": "",

                    "type": "TextArea",

                    "required": true,

                    "helper-text": "Tus nombres y apellidos"

                }, {

                    "label": "Continuar",

                    "on-click-action": {

                        "payload": {

                            "comment_text": "${form.comment_text}"

                        },

                        "name": "data_exchange"

                    },

                    "type": "Footer"

                }],

                "name": "form",

                "type": "Form"

            }],

            "type": "SingleColumnLayout"

        },

        "data": {

            "comment_text": {

                "type": "string",

                "__example__": "Example"

            }

        },

        "id": "SHARE",

        "terminal": false,

        "title": "Share Name"

    }, {

        "layout": {

            "children": [{

                "children": [{

                    "text": "Antes de continuar revisa que tomamos correctamente tu nombre:",

                    "type": "TextCaption"

                }, {

                    "text": "${data.comment_text}",

                    "type": "TextSubheading"

                }, {

                    "label": "Finalizar",

                    "on-click-action": {

                        "payload": {

                            "comment_text": "${data.comment_text}"

                        },

                        "name": "complete"

                    },

                    "type": "Footer"

                }],

                "name": "form",

                "type": "Form"

            }],

            "type": "SingleColumnLayout"

        },

        "data": {

            "comment_text": {

                "type": "string",

                "__example__": "Example"

            }

        },

        "id": "RESPONSE",

        "terminal": true,

        "title": "Confirmation"

    }],

    "version": "2.1"

}

``` 

CA de tipo FLOW ENDPOINT  “dinamic”

```

const FIRST_SCREEN = screen === 'SHARE';

bmconsole.log(JSON.stringify(data));

if (FIRST_SCREEN) {

  flow.data = {

    comment_text: data.comment_text.toLocaleUpperCase(),

  };

  flow.nextScreen = 'RESPONSE';

  flow.send(); // remember to always call flow.send()

}

```

Lembre-se de visitar nossa Central de Ajuda para obter mais informações.