O que é o WhatsApp Flows?

Índice:

1.1 Para o que ele serve

WhatsApp Flows é uma forma de construir interações estruturadas para mensagens comerciais. Com o Flows, as empresas podem definir, configurar e personalizar mensagens com interações ricas que dão aos clientes mais estrutura na forma como se comunicam.

Você pode usar o Flows para agendar compromissos, procurar produtos, coletar feedback de clientes, obter novos leads de vendas ou qualquer outra coisa onde a comunicação estruturada seja mais natural ou confortável para seus clientes.

1.2 Consultando a documentação oficial da Meta

A Meta fornece uma documentação completa com todos os aspectos para se entender e criar Flows, com exemplos práticos de código e como montar as interfaces e componentes. Use esta referência para montar e testar suas interfaces, quando estiver pronto, você poderá usar as APIs do Blip para criar e integrar ao seu contato inteligente.

Documentação da Meta Aqui.

1.3 O que aprenderá neste artigo do Blip Help?

Aqui mostraremos o básico para criar e enviar no seu bot um Flow básico, que você poderá melhorá-lo para atender suas necessidades.

Você aprenderá:

Obter credenciais da API de comandos do seu bot no Blip.
Criar um Flow, que será criado diretamente na sua WABA
Atualizar o Flow informando o código Flow JSON responsável por montar os componentes e comportamento de navegação do seu Flow. (Simular a um HTML usado para montar componentes para navegadores web, o Flow JSON monta os componentes para serem exibidos dentro do WhatsApp.)
Atualizar a chave pública de um Flow, para que a comunicação entre seu servidor e o WhatsApp seja criptografada e segura.
Deletar ou descontinuar um Flow
Usar o Builder do Blip para enviar seu Flow para seus contatos.

Como criar flows via APIs do Blip commands

2.1 Buscando as credenciais para acessar a API

Para usar a API de comandos do Blip, você precisa obter as credenciais nas configurações do seu bot. Com estes dados em mãos, você poderá usar qualquer ferramenta de chamadas HTTP para gerenciar seus flows. Os exemplos a seguir são usando a ferramenta Postman.

Acesse o menu informações de conexão para obter:

Authorization
URL para enviar comandos

2.2 Preparação do ambiente:

Você pode fazer o download de uma collection do postman com todas as chamadas aqui descritas.
🠖 Basta baixar aqui

No Postman, configura as variáveis conforme os dados do seu Bot obtidos na sessão de credenciais da API.

2.3 Visão geral

Todos os Flows são criados na WABA do número de WhatsApp. Todo Flow é criado com o status de Draft, o que significa que ele está em fase de desenvolvimento ainda, e deve ser configurado e publicado antes de ser amplamente usado.

Após criar um Flow informando o Nome e Categoria, você deve enviar o arquivo Flow JSON, sendo um formato que a Meta criou para representar a organização de componentes visuais dentro de cada tela do Flow.

Após atualizar o Flow com o código Flow JSON, você pode testar como está ficando usando o Builder do Blip, e quando estiver tudo certo com seu Flow você poderá publicá-lo dentro da Waba.

Uma vez publicado, o Flow não pode ser modificado, podendo apenas ser descontinuado/desativado.
Só é possível editar Flows em formato de Draft, se for publicado ele não pode mais ser editado.
Um Flow que nunca foi publicado, pode ser apagado da WABA.

2.4 Como criar um Flow

REQUISIÇÃO:

Além dos parâmetros básicos da API de comandos do Blip como [id],[to],[type] que devem ser os mesmos em todas as requisições para gerenciar os Flows. Informe:

method: set
uri: /whatsapp-flows
name: O nome do seu Flow
categories: [Ao menos uma categoria é obrigatória]

RESPOSTA:

Na resposta, você receberá o ID do flow criado. Este ID é importante para todas as outras chamadas seguintes. Ao criar o flow, armazene este ID.

Este flow será criado na WABA vinculada ao bot. Com este ID, você poderá usar os outros endpoints para gerenciar este flow.

Este ID também será usado no Builder do Blip mais tarde, para poder enviar o flow para seus contatos.

2.5 Listando seus Flows criados

REQUISIÇÃO:

method: get
uri: /whatsapp-flows

RESPOSTA:

Na resposta, além do nome e categorias, você consegue verificar:

O status, que inicialmente será DRAFT, até você publicar o Flow.
Os erros de validação, se houverem.

Estes erros de validação só aparecerão após o envio do código Flow JSON, e se este código apresentar algum problema de semântica / sintaxe.

2.6 Enviando o código Flow JSON que representa o visual do seu Flow

A Meta criou para o WhatsApp um novo tipo de formato e linguagem que você precisa criar para representar a interface gráfica do seu Flow. Similar ao código de marcação HTML, ele demarca quais componentes e estrutura cada tela do Flow conterá.

Para entender mais sobre este formato e sua aplicação, consulte a documentação oficial da Meta no portal de desenvolvedores. É importante escrever o código no formato correto, sempre se atentando a erros de validação.

No momento, acessando a sua Waba você tem um Builder que auxilia a criar o código correto no formato Flow JSON, mas este builder não é um requisito para criar seu código Flow JSON. Além disso, nem todos os desenvolvedores e clientes possuem acesso à sua Waba, logo apenas com as APIs do Blip você poderá criar e gerenciar seus Flows.

Quando você já tiver o código no formato Flow JSON, você deverá atualizar seu FLOW criado com este código, para isso basta inserir o código na seguinte requisição:

REQUISIÇÃO:

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

O código abaixo envia um código Flow JSON para criar um hello world

O código Flow JSON acima gerará um Flow com o seguinte layout:

RESPOSTA:

2.7 Obtendo o link de preview e mais detalhes do seu Flow

Para poder visualizar uma preview do seu Flow, você pode usar um endpoint para obter o link deste preview. O retorno também trás mais informações relacionadas a Waba onde o Flow foi criado.

REQUISIÇÃO:

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

RESPOSTA:

Na resposta, você pode pegar um link para acessar a preview, lembrando que este link tem uma expiração de aproximadamente 30 dias. Esta preview é exibida no navegador, mostrando uma experiência aproximada de como será exibida no smartphone do usuário.

2.8 Atualizando o nome e categoria do seu Flow

Antes de ser publicado, você pode editar todas as informações do seu Flow, como Nome, categorias e até o código Flow JSON

REQUISIÇÃO:

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

RESPOSTA:

2.9 Para obter o arquivo Flow JSON atual no seu Flow

REQUISIÇÃO:

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

RESPOSTA:

Acessando o link em destaque, você obtém o atual arquivo Flow JSON do seu Flow

2.10 Para publicar o seu Flow para um estado de uso em produção

Todo Flow quando é criado, ele é criado em um formato de DRAFT, ou seja: rascunho, enquanto em rascunho você pode editar este Flow sem problemas.

Mas para usar o Flow definitivamente, é necessário publicar. Ao ser publicado o Flow passa por aprovações na Meta (este processo é automático e quase instantâneo) e a partir daí não poderá ser editado.

Atenção!

Caso precise remover um Flow em estado de DRAFT, você pode deletar, como mostraremos mais abaixo.

Caso precise remover um Flow em estado de PUBLICADO, você deverá marcar como DEPRECATED, também mostraremos abaixo.

Para Publicar um Flow:

REQUISIÇÃO:

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

RESPOSTA:

2.11 Desativando um Flow publicado

Após ser publicado, se desejar desativar, de forma que não dê mais para ser usado:

REQUISIÇÃO:

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

RESPOSTA:

2.12 Deletando um Flow que ainda não foi publicado

Antes de ser publicado, um Flow pode ser completamente apagado da sua WABA.

Para isso:

REQUISIÇÃO:

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

RESPOSTA:

A respeito de Flows que precisam do endpoint do cliente, chamado de data channel.

Um Flow pode ter dois comportamentos:

Todos os dados digitados/exibidos para o usuário trafegam entre as próprias telas do Flow. Então, se na primeira tela você solicita dados para o usuário como, por exemplo, o seu nome, este nome pode ser enviado para uma segunda tela do Flow, e quando as telas do Flow se fecharem, você pode obter este nome digitado através do seu bot.
Uma segunda maneira, mais sofisticada, é criando uma API intermediária dedicada ao Flow, que fará a comunicação dos dados com o WhatsApp. Aqui temos casos de uso como capturar os dados digitados pelo usuário, enviar para esta API do cliente e então devolver uma resposta para o usuário. Exemplo: Um login, onde o usuário digita usuário/senha, em seguida o seu servidor valida estas credenciais e devolve um resultado para o usuário, mostrando uma segunda tela.

Para que isso possa acontecer, é necessário entender como construir estes Flows e criar um código Flow JSON de acordo, para isso, consulte a documentação da Meta.

De qualquer forma, para que isso aconteça, será necessário criar um certificado de criptografia que criptografará todos os dados enviados entre o WhatsApp e sua API intermediária. A documentação da Meta detalha melhor este assunto, mas dentro do Blip o que você precisará é informar qual é a chave pública desta criptografia.

Esta chave pública será válida para todos os flows que você criar na mesma Waba, então basta fazer apenas uma vez que qualquer flow criado na mesma Waba compartilham esta chave pública.

Para isso, use a requisição:

REQUISIÇÃO:

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

Observação: A chave pública no exemplo é inválida, e não deve ser usada. Substitua com a chave gerada por você conforme a documentação do WhatsApp Flows na Meta.

RESPOSTA

Como exibir os seus flows, usando conteúdo dinâmico no Builder

4.1 Criando um bloco e usando a mensagem de envio do Flows.

Para enviar seu Flow para o usuário durante uma conversa, você deverá usar um bloco com um conteúdo dinâmico no builder.

No conteúdo dinâmico você poderá informar o tipo de mensagem que gostaria de enviar com o seguinte código de exemplo:

Parâmetros que você precisa modificar:

flow_id: o ID do flow que você deseja enviar
dentro de [flow_action_payload], o parâmetro screen, sendo a primeira tela definida no seu arquivo 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"

                  }

        }

      }

    }

  }

}

Considerações finais

O WhatsApp Flows é uma funcionalidade nova, que continua em evolução constantemente. Com o tempo iremos melhorar a experiência de criação e gerenciamento de Flows no Blip. Acompanhe as novidades no fórum. Novos componentes, novas interfaces para acessar o dispositivo, suporte total ao Android e IOS são algumas coisas que em breve teremos novidades.

Também teremos extensões na Blip Store que podem facilitar / adiantar o processo de criação de Flows através dos nossos parceiros.

Para mais informações, acesse a discussão sobre o assunto em nossa comunidade ou os vídeos no nosso canal. 😃