O que é o WhatsApp Flows?

Índice:

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 casos de uso de agendamento, exibição de produtos, coleta de feedback de clientes, captura de leads de vendas ou qualquer outro caso de uso onde a comunicação estruturada seja mais natural ou confortável para seus clientes.

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 completa da Meta aqui.

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

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 chatbot. 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, mas podem ser reproduzidos em qualquer ferramenta similar.

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

Authorization
URL para enviar comandos

Preparação do ambiente:

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

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.

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]
1. Possíveis valores para categories: SIGN_UP, SIGN_IN, APPOINTMENT_BOOKING, LEAD_GENERATION, CONTACT_US, CUSTOMER_SUPPORT, SURVEY, OTHER

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.

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.

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.

A Meta disponibiliza o Playground, um construtor visual para auxiliar na ideação e desenvolvimento do seu Flows, a partir do Playground você pode construir o seu Flows com alguns cliques e obter o JSON. O uso do construtor não é um requisito para criar seu código JSON, mas é uma ferramenta de apoio.

Com o JSON, você deverá atualizar o seu Flows 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 o JSON para criar um Flow de ‘hello world’:

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

RESPOSTA:

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 traz mais informações relacionadas a Waba qual 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.

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:

Para obter o JSON do seu Flow atual

REQUISIÇÃO:

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

RESPOSTA:

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

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

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

Para uso do componente em produção, é necessário publicar. Ao ser publicado o Flow passa por aprovações na Meta (este processo é automático e 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, abordaremos o assunto ainda neste artigo.

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:

Desativando um Flow publicado

Tendo um Flows publicado, caso deseje desativar de forma que não dê mais para ser usado, utilize a seguinte requisição:

REQUISIÇÃO:

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

RESPOSTA:

Deletando um Flow que ainda não foi publicado

Antes de ser publicado, um Flow pode ser completamente apagado da sua WABA. Para isso utilize da seguinte requisição:

Para isso:

REQUISIÇÃO:

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

RESPOSTA:

Flows com endpoints (data chanel)

Um Flow pode ter dois comportamentos:

Fluxo Interno: Todos os dados coletados trafegam apenas entre as telas do próprio Flow. Por exemplo, se você solicita o nome do usuário na primeira tela, essa informação pode ser repassada para a segunda tela e, ao final do preenchimento, o dado estará disponível para o seu bot.
Fluxo com API Externa (Data Channel): Nesta modalidade, o Flow se comunica com uma API intermediária dedicada. Isso permite, por exemplo, capturar dados digitados pelo usuário, processá-los no seu servidor e retornar uma resposta dinâmica para o Flow. Um caso de uso comum é um login, onde o usuário insere credenciais, o servidor as valida e retorna o resultado para exibir na tela seguinte.

Para implementar a segunda opção, você precisará:

Configurar o JSON do Flow considerando o uso de um endpoint (consulte a documentação da Meta).
Implementar um certificado de criptografia para garantir a segurança dos dados trocados entre o WhatsApp e sua API. Através da API da Blip, basta informar a chave pública correspondente.
Importante: a chave pública é válida para apenas um número e deve ser reconfigurada sempre que o Flow com endpoint for utilizado em um novo número ou roteador.

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 indicada.

RESPOSTA

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

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 em constante evolução. Nosso objetivo é aprimorar continuamente a experiência de criação e gerenciamento de Flows no Blip; por isso, acompanhe as novidades em nossa comunidade. Além disso, contamos atualmente com extensões na Blip Store desenvolvidas por nossos parceiros, projetadas para agilizar e simplificar o processo de criação de seus Flows.

Precisa de mais ajuda? Explore nossos conteúdos na Blip Academy ou Blip Community, assista a tutoriais no nosso canal do YouTube ou tire suas dúvidas em nosso canal de atendimento 😃