Como podemos ajudar?

04. Construindo um fluxo de automação
11 min
Criado por Humanz em 03/06/2022 12:28
Atualizado por Maria Malheiro em 25/10/2023 09:44
Conforme o artigo anterior, com o canal Web Chat, o Zenvia Bots permite que sejam criadas jornadas automatizadas que podem processar qualquer tipo de ação ou regra de negócio. Neste cenário, conceituaremos o fluxo como ativo, pois dependerá de uma ação externa (chamada de API ou outra) para que seja iniciada a jornada, não necessitando de um acionamento receptivo de usuário.

Após selecionar a criação de um novo fluxo Web Chat, você será redirecionado para o Bot Design, a tela de construção do fluxo das conversas.
 
A tela de construção do fluxo tem balões de início e fim do chatbot e uma linha de conexões entre cada passo.
 
Na barra inferior, em um exemplo de criação e fluxo Web Chat, você encontra os botões Editar Aparência, Recarregar (após alterações), Salvar, Testar e Publicar Fluxo. 
fluxo-automacao-1.png

Conexões

No fluxo da conversa, existem 3 botões:
 
  • icone-adicionar-flow.png: cria um novo passo de interação do fluxo ou integrações para serem utilizadas durante a conversa.
  • icone-editar-flow.png: abre a tela para editar o nome da conexão (label).
  • icone-excluir-flow.png: exclui a conexão entre cada passo (step).
 
A conexão pode ser feita arrastando o mouse para o próximo step.

Edição

Para começarmos a realizar a transformação do fluxo Web Chat receptivo para ativo, é necessário alterar o primeiro passo (step) de Evento Inicial (Primeira mensagem do usuário) para algumas de nossas opções que representam a ativação do fluxo via Step ativo multicanal, Canal Customizável ou Webhook.
 
Abaixo estão as etapas de cada opção de fluxo: 

Step ativo multicanal

Ícone: icone-step-flow.png
Ação: alterar no Json (código) a estrutura e os parâmetros do Evento Inicial.
Json do passo (step):
1
2
3
4
5
6
7
8
{
      "id": "startStep",
      "type": "apiCallEvent",
      "label": "Start flow",
      "properties": {
        "startEvent": "true"
      }
    }
Como realizar o ajuste:
1. Acesse o novo fluxo receptivo criado no canal Web Chat;
2. Abra o Json na seta lilás no canto direito do Zenvia Bots;
fluxo-automacao-3.png
3. Clique no passo do Evento inicial;
fluxo-automacao-4.png
4. Selecione toda a estrutura do passo conforme a imagem;
fluxo-automacao-5.png
5. Cole o novo Json do passo ativo que citamos acima substituindo o código anterior;
fluxo-automacao-6.png
6. Substitua o “from” idEventoInicial por startStep;
fluxo-automacao-7.png
7. Clique em Salvar;
fluxo-automacao-8.png
Você já pode começar a construir sua jornada automatizada acoplando chamadas de API para consultas e postagem de dados.

Formas de ativação do fluxo

Via API

É necessário configurar uma chamada de API via Bulk, conforme o exemplo abaixo:
 
Authorization: Bearer Token
Descobrindo o Bearer Token: 
  • Acesse o menu superior direito onde está localizado o nome da organização;
fluxo-automacao-9.png
  • Procure por Área do Cliente;
fluxo-automacao-10.png
  • Certifique-se que você está em Minhas Contas e em Preferências, copie seu API Token clicando no botão Copiar para a área de transferência;
fluxo-automacao-11.png
  • Após clicar no botão seu API Token já estará copiado para sua área de transferência, como demonstrado abaixo:
fluxo-automacao-12.png
Headers: Content-Type | Value: application/json
Body:
1
2
3
4
5
6
7
{
  "workflowId": "XXX",
  "fileHeader": "XXX",
  "campaignId": "XXX",
  "contacts": [
  ]
}
Legenda do Body:
 
workflowId: ID do fluxo que será acionado, localizado no link do browser. Inserir apenas o final do endpoint. Ex:
 
 
fileHeader: cabeçalho da chamada, onde são inseridas variáveis pertinentes à comunicação e jornada, que irão comunicar-se com os contacts. Ex:
"fileHeader": "name;email"
 
campaignId: nome da campanha ativa (opcional).
 
contacts: informações que compõem o valor de cada cabeçalho.
 
Na estrutura foi utilizado o componente de Dispara e-mail, vinculando a ação de disparo com a integração via SendGrid.
 
Veja aqui a documentação do componente Dispara e-mail.
 
No componente foram inseridas variáveis de name e email para representar os contatos que irão receber o e-mail de forma massiva.
 
Na chamada de API (body), a estrutura foi composta da seguinte forma:
1
2
3
4
5
6
7
8
9
{
  "workflowId": "94e6X09d7-4ea7-49db-ad8c-5Xe82871e4275",
  "fileHeader": "name;email",
  "campaignId": "Teste Operacoes",
  "contacts": [
    "Guilherme;guilherme.boeira@zenvia.com",
    "Felipe;felipe.cardoso@zenvia.com"
  ]
}
Ao disparar a requisição via API, o e-mail chegou para ambos os contatos de e-mail, respeitando o valor das variáveis da chamada.
 
fluxo-automacao-13.png
 
Lembrando que, podem haver muitos casos de automação seguidos de diversas chamadas de API durante a jornada ativa, seja via GET, POST e resultando em algum tipo de notificação para os usuários. 

Via Arquivo

O mesmo caso de uso acima poderia ser realizado via e-mail, onde a possibilidade de criar um arquivo com o cabeçalho e valores seria uma solução válida:
fluxo-automacao-14.png
Ou
 
fluxo-automacao-15.png
O resultado final é o mesmo (jornada automática), pois basta acionar o botão Disparar Fluxo e anexar o arquivo para concluir o processo.
O arquivo de disparo é simples! Pode ser criado em um bloco de notas separado por ponto e vírgula ou Excel (.csv) separado pelas colunas.
Cabeçalho
Uma dica é sempre construir o arquivo já com os cabeçalhos definidos: name e email, por exemplo. 
Feito isso, flegue a caixa de seleção da tela acima de Arquivo já contém cabeçalho.

Step ativo Custom

Ícone: icone-step-custom-flow.png
Json do passo (step): necessário abrir diretamente a opção de novo fluxo.
 
  1. Meus Fluxos.
  2. Novo fluxoCriar Novo.
  3. Canal Customizável.
 
Veja toda a documentação do canal aqui.

Step de Webhook

Ícone: fluxo-automacao-16.png
Json do passo (step): Inserir diretamente da listagem de componentes do Flow:
 
fluxo-automacao-17.png
Configura Webhook:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    {
      "id": "step03",
      "type": "webhookActivity",
      "properties": {
        "from": "X",
        "timeUnit": "minute",
        "expirationInMinutes": "",
        "to": "X"
      },
      "contents": [
        {
          "type": "application/vnd.zenvia.v1.webhook.setup+json",
          "payload": {
            "json": {
              "contactFieldJsonPath": "X"
            }
          }
        }
      ],
      "label": "X"
    }
Recebe Webhook:
1
2
3
4
5
6
7
8
9
    {
      "id": "step04",
      "type": "webhookEvent",
      "label": "X",
      "properties": {
        "timeUnit": "minute",
        "expirationInMinutes": ""
      }
    }
Veja a documentação dos componentes aqui.