Integrar WhatsApp no Typebot com a ZapZap API

Passo a passo

1. 1

   Monte o fluxo e capture os dados no Typebot

   No editor do Typebot, arraste blocos da categoria Inputs para o canvas: use o Text input para o nome e o Phone number input para o telefone. O Typebot salva cada resposta em uma variável, por exemplo {{Nome}} e {{Telefone}}. Confira os nomes das variáveis no painel Variables, no canto do editor.

2. 2

   Adicione o bloco HTTP request

   Abra a paleta de blocos à direita, vá na categoria Integrations e arraste o bloco HTTP request (antigo bloco Webhook) para o final do fluxo, depois dos inputs. É esse bloco que vai falar com a ZapZap API quando o lead terminar de responder.

3. 3

   Configure método, URL e headers

   Clique no bloco HTTP request para abrir as configurações. Em Method escolha POST e em URL cole o endpoint de envio da ZapZap API (base https://api.zapzapapi.com, confira o caminho exato em https://api.zapzapapi.com/llms.txt). Abra Headers e adicione duas linhas: x-api-key com sua chave e x-api-secret com seu secret, ambos disponíveis no painel da ZapZap.

4. 4

   Monte o Body com as variáveis do Typebot

   Ainda no bloco, vá em Body e selecione JSON. Escreva o corpo referenciando as variáveis capturadas com chaves duplas, por exemplo o número em {{Telefone}} e uma mensagem que use {{Nome}}. O Typebot substitui os valores reais no momento do envio. Os nomes exatos dos campos do corpo estão documentados em https://api.zapzapapi.com/llms.txt.

5. 5

   Teste no preview e publique

   Clique em Test na barra superior para rodar o fluxo em modo preview e verifique se a requisição sai com status de sucesso (você pode usar o Test the request dentro do próprio bloco). Confirmado o envio no WhatsApp, clique em Publish para colocar o Typebot no ar como link, embed ou popup.

// Exemplo ILUSTRATIVO do Body do bloco HTTP request (POST)
// Os campos exatos estão na doc: https://api.zapzapapi.com/llms.txt
//
// URL:    https://api.zapzapapi.com/api/v1/{instanceId}/send/text   (endpoint ilustrativo)
// Método: POST
// Headers:
//   x-api-key: SUA_API_KEY
//   x-api-secret: SEU_API_SECRET
//   Content-Type: application/json
//
// Body (JSON) com variáveis do Typebot:
{
  "number": "{{Telefone}}",
  "mensagem": "Oi {{Nome}}, recebemos seu contato e já vamos te atender por aqui."
}