Como conectar API de WhatsApp na Lovable: Passo a Passo

Assista ao tutorial completo: Como conectar API de WhatsApp na Lovable

Como conectar API de WhatsApp na Lovable com WPI: passo a passo

Aprenda como integrar o WhatsApp a um projeto desenvolvido na Lovable utilizando uma API, criar uma instância, conectar seu número, gerar o Token, configurar Webhooks e automatizar o envio de mensagens.

Se você está desenvolvendo um SaaS, CRM, sistema de atendimento, plataforma de agendamentos ou qualquer outro aplicativo na Lovable, integrar o WhatsApp pode abrir diversas possibilidades de automação. No tutorial, mostramos todo o processo utilizando a WPI como serviço intermediário, desde a conexão inicial até um teste real com uma mensagem chegando no WhatsApp.

Por que conectar o WhatsApp à Lovable?

Imagine que você está criando um sistema de agendamentos. Quando um cliente marcar um horário, em vez de depender de alguém da empresa para enviar uma confirmação manualmente, o próprio sistema pode iniciar uma automação.

O fluxo pode ser simples: um novo agendamento é criado, o sistema identifica o telefone do cliente, a API recebe a solicitação e o cliente recebe uma mensagem automaticamente. Essa lógica também pode ser aplicada a lembretes, avisos de pagamento, atualizações de pedidos, confirmações e outras ações do sistema.

BLOCO HTML RECOMENDADO: 01_agendamento_whatsapp.html

É justamente por isso que entender como APIs funcionam começa a se tornar importante para quem desenvolve aplicações na Lovable: a interface pode ser criada na plataforma, enquanto serviços externos assumem funções específicas como comunicação, pagamentos, automações e integrações.

Como funciona a integração Lovable + WPI?

A Lovable não envia a mensagem diretamente para o WhatsApp. Existe um serviço intermediário responsável por receber a requisição e encaminhar a ação. No tutorial, utilizamos a WPI para cumprir esse papel.

De forma simplificada, o fluxo é: Lovable → WPI → WhatsApp. A Lovable executa a lógica do sistema e envia os dados necessários; a WPI recebe a requisição, valida a autenticação e realiza o envio para o número definido.

BLOCO HTML RECOMENDADO: 02_fluxo_lovable_wpi_whatsapp.html

A documentação da API é importante porque define exatamente quais endpoints, métodos, parâmetros, headers e formatos de dados devem ser usados em cada ação.

1. Criando sua instância de WhatsApp

Depois de criar sua conta no serviço utilizado para a integração, o primeiro passo é criar uma instância. Pense nela como a conexão que representa um determinado WhatsApp dentro da API. É nessa instância que ficam associados o número e os dados necessários para as requisições.

Antes de usar a integração em produção, também vale revisar os limites, recursos e custos do serviço escolhido, já que planos e condições comerciais podem mudar ao longo do tempo.

2. Como conectar o WhatsApp por QR Code

Depois de criar a instância, o próximo passo é conectar o WhatsApp. No fluxo demonstrado no vídeo, essa autenticação é feita através de QR Code, de forma semelhante à conexão de um novo dispositivo.

Com o QR Code validado, a instância passa a representar aquela conta dentro da integração e fica pronta para ser utilizada nas chamadas da API.

3. Cuidados antes de automatizar mensagens

Automação deve ser usada com responsabilidade. Evite disparos indiscriminados, spam e contatos que o usuário não espera receber. O cenário mais seguro é enviar mensagens relacionadas a ações reais do sistema, como cadastro concluído, pedido criado, pagamento confirmado ou lembrete de um agendamento.

Além de melhorar a experiência, esse tipo de comunicação deixa o fluxo mais coerente e reduz o risco de uso indevido do canal.

4. Como gerar o Token da API de WhatsApp

Depois que a instância estiver conectada, gere o Token da API. Essa credencial é utilizada para autenticar as requisições realizadas pelo seu aplicativo.

Tokens devem ser tratados como informações privadas. Evite expô-los no frontend ou em áreas públicas do projeto. O ideal é manter a credencial em um ambiente protegido e utilizá-la apenas no backend ou no mecanismo de secrets da arquitetura que estiver usando.

5. Como configurar a API de WhatsApp na Lovable

Com o Token disponível, você já pode começar a configurar a integração dentro da Lovable. Em vez de escrever manualmente toda a comunicação com a API, você pode fornecer a documentação e explicar o comportamento desejado.

Um pedido simples seria: “Quando um novo usuário concluir o cadastro, envie uma mensagem de boas-vindas para o telefone informado usando esta API”. A Lovable pode então utilizar a documentação como referência para montar a lógica necessária.

6. Como enviar a documentação da API para a Lovable

A documentação normalmente explica os endpoints disponíveis, o método HTTP, os parâmetros obrigatórios, o formato dos dados, a autenticação, exemplos de requisições e possíveis respostas. Quanto mais completo for esse contexto, menos a IA precisa adivinhar como a integração funciona.

Ao trabalhar com uma API nova, prefira sempre fornecer a documentação correspondente ao endpoint que deseja usar e descreva claramente qual evento do seu sistema deve acionar aquela ação.

7. Criando uma mensagem automática de boas-vindas

Depois que a API estiver conectada, você pode criar a primeira automação. No tutorial, usamos como exemplo uma mensagem de boas-vindas disparada após o cadastro.

A sequência é direta: o cadastro é concluído, o sistema identifica o telefone, envia os dados para a API e a mensagem chega ao WhatsApp do usuário.

A partir dessa estrutura, é possível criar outros gatilhos: confirmação de pedido, alteração de status, lembrete, aviso financeiro ou qualquer outra ação relevante dentro do aplicativo.

8. Como adicionar o efeito “Digitando...”

Algumas APIs oferecem ações adicionais para deixar a experiência mais natural, como indicar que a conta está digitando antes de enviar a mensagem. No tutorial, exploramos esse tipo de recurso como uma personalização da automação.

O funcionamento exato depende dos endpoints e recursos oferecidos pelo serviço de API utilizado, por isso a documentação deve ser usada como fonte de referência para cada ação.

9. Como trabalhar com áudio, PDF e Pix

A integração pode ir além de mensagens de texto. Dependendo dos recursos disponibilizados pela API, o sistema pode trabalhar com áudio, documentos em PDF, informações de pagamento, botões e outros formatos.

Um sistema de propostas, por exemplo, pode gerar um PDF e enviá-lo ao cliente. Um sistema financeiro pode utilizar a automação para encaminhar informações relacionadas a um pagamento. O importante é definir primeiro o evento e só depois escolher o endpoint adequado para executar a ação.

10. Como configurar Webhooks para receber informações

Até aqui, o fluxo principal foi do sistema para o WhatsApp. Webhooks criam o caminho contrário. Quando determinado evento acontece no serviço conectado, ele pode enviar os dados automaticamente para uma URL do seu sistema.

Isso permite, por exemplo, receber uma mensagem no WhatsApp, identificar o evento na API, encaminhar os dados para o sistema e então registrar ou processar aquela informação.

Com esse mecanismo, você pode evoluir a integração para centrais de atendimento, atualização de CRM, automações comerciais e outros fluxos bidirecionais.

11. Como testar o envio de mensagens

Depois de realizar toda a configuração, teste cada etapa do caminho. Em vez de olhar apenas para o resultado final, verifique se a Lovable disparou a requisição, se a API recebeu, se a autenticação foi aceita, se o número estava no formato correto e se a mensagem chegou ao destino.

Esse processo de validação reduz muito o tempo de diagnóstico quando alguma parte da integração falha.

12. Como corrigir o erro 403 de Token Inválido

Durante o tutorial, encontramos um erro 403 relacionado ao Token. Esse tipo de resposta indica que a requisição chegou ao serviço, mas alguma condição de autenticação ou autorização não foi aceita.

Nesses casos, revise o Token utilizado, a forma como ele está sendo enviado, os headers da requisição, o endpoint, a instância e os requisitos indicados na documentação. Depois da correção, repita o teste para confirmar se a chamada foi autorizada.

13. Resultado final: mensagem recebida

Quando todas as etapas estão configuradas corretamente, a mensagem percorre o fluxo completo: sai da Lovable, passa pela API, tem a autenticação validada, utiliza a instância correta e chega ao WhatsApp do destinatário.

Esse resultado confirma que a base da integração está funcionando. A partir daí, você pode reutilizar a mesma arquitetura para criar automações mais sofisticadas.

Exemplos de sistemas que podem utilizar WhatsApp

CRM: Um vendedor muda um negócio para a etapa “Proposta enviada” e o sistema dispara uma mensagem para o cliente.

Sistema de agendamento: Um atendimento está marcado para o dia seguinte e o sistema envia um lembrete.

SaaS: Um usuário conclui uma ação importante e recebe uma notificação pelo WhatsApp.

E-commerce: O pedido muda de status e o cliente recebe uma atualização.

Sistema financeiro: Um pagamento é identificado e o sistema envia uma confirmação.

Atendimento automatizado: Uma mensagem recebida pelo WhatsApp chega ao sistema via Webhook e inicia um fluxo de atendimento.

API e Webhook são a mesma coisa?

Não. Uma API é normalmente utilizada quando seu sistema solicita que outro serviço execute uma ação, como “envie esta mensagem para este número”. Um Webhook é utilizado quando outro serviço precisa avisar seu sistema que algo aconteceu, como “uma nova mensagem foi recebida”. Em integrações completas, os dois mecanismos costumam trabalhar juntos.

Agora você já sabe como conectar uma API de WhatsApp na Lovable

O processo pode ser resumido em algumas etapas: criar a instância, conectar o WhatsApp, gerar o Token, configurar a integração na Lovable, criar as automações, configurar Webhooks e testar o fluxo completo.

No vídeo desta página, mostramos esse processo na prática, incluindo configuração, documentação da API, automações, Webhooks, testes e a correção de um erro real durante a implementação.