Como Integrar a WhatsApp Cloud API da Meta em um App Criado no Lovable

Conectar a API oficial do WhatsApp ao ecossistema da sua empresa costuma ser um gargalo. Entre a verificação do Meta Business Manager, a validação de números internacionais (como números do Reino Unido ou Europa) e a liberação do WhatsApp Cloud API, muitas equipes esbarram na falta de uma interface dedicada para gerenciar envios, templates e atendimentos em tempo real.

Contratar ferramentas prontas de atendimento pode gerar custos mensais exorbitantes e pouca flexibilidade de regras de negócio. A alternativa mais eficiente hoje é construir um painel operacional próprio utilizando o Lovable integrado ao Supabase, criando um CRM sob medida com total controle sobre webhooks, disparos e banco de dados.

Neste guia, você entenderá a arquitetura necessária para conectar a Cloud API da Meta a uma aplicação desenvolvida no Lovable.

1. A Arquitetura da Solução: Lovable + Supabase

Para que o WhatsApp Cloud API funcione com segurança, não devemos expor chaves de API nem o System User Token da Meta diretamente no frontend. A estrutura técnica ideal é dividida em três pilares:

1. Interface no Lovable: Dashboard com listagem de conversas, visualização de status de entrega (enviado, entregue, lido), tela de disparo de templates aprovados pela Meta e tela de configuração de tokens.
2. Supabase Database & Realtime: Tabelas para contacts, messages e whatsapp_templates, com sincronização em tempo real habilitada para atualizar o chat no Lovable sem recarregar a página.
3. Supabase Edge Functions: Endpoint seguro para responder ao handshake de verificação da Meta (hub.challenge), receber webhooks de mensagens recebidas e disparar mensagens para a Graph API da Meta.

2. Preparando os Dados e Credenciais da Meta

Antes de configurar o app, conclua o registro da sua empresa no Meta Business Manager e gere os seguintes identificadores no painel do Meta for Developers:

• Phone Number ID: O ID do número registrado (seja do Reino Unido ou local).
• WABA ID (WhatsApp Business Account ID): Identificador da conta comercial.
• Permanent System User Token: Token de longa duração gerado com permissões whatsapp_business_messaging e whatsapp_business_management.
• Verify Token: Uma string aleatória criada por você para validar o Webhook.

Armazene esses valores com segurança nas variáveis de ambiente do Supabase Secrets (WHATSAPP_TOKEN, WHATSAPP_PHONE_ID, WHATSAPP_VERIFY_TOKEN).

3. Construindo a Interface no Lovable com Prompts Precisos

No Lovable, a criação da interface do CRM é acelerada utilizando prompts estruturados. Para obter uma UI limpa e conectada aos schemas certos, você pode usar uma instrução como esta:

“Crie uma interface de atendimento WhatsApp estilo split-view. Na coluna da esquerda, exiba a lista de contatos com última mensagem, horário e badge de não lida. No painel central, a janela de conversa com suporte a balões de mensagem de entrada e saída, status de envio (enviado, entregue, lido) e um campo de envio de texto. Na coluna da direita, adicione um painel de detalhes do contato com campos editáveis (nome, empresa, tags) e um botão para disparar templates pré-cadastrados. Utilize Tailwind CSS, componentes Radix UI e mantenha o layout responsivo.”

Com a estrutura gerada, utilize o editor visual do Lovable para ajustar tipografia, paleta de cores institucional e microinterações de scroll automático nas mensagens.

4. Configurando a Edge Function para Webhooks da Meta

A Meta exige validação GET para o webhook e envio POST para cada evento de mensagem. Em projetos Lovable que implemento, costumo estruturar a Edge Function whatsapp-webhook com duas responsabilidades principais:

typescript
import { serve } from “https://deno.land/std@0.168.0/http/server.ts”;
import { createClient } from “https://esm.sh/@supabase/supabase-js@2”;

const VERIFYTOKEN = Deno.env.get(“WHATSAPPVERIFY_TOKEN”);

serve(async (req) => {
const url = new URL(req.url);

// Validação GET da Meta
if (req.method === “GET”) {
const mode = url.searchParams.get(“hub.mode”);
const token = url.searchParams.get(“hub.verify_token”);
const challenge = url.searchParams.get(“hub.challenge”);

if (mode === "subscribe" && token === VERIFY_TOKEN) {
  return new Response(challenge, { status: 200 });
}
return new Response("Forbidden", { status: 403 });

}

// Recepção POST de mensagens
if (req.method === “POST”) {
const body = await req.json();
const supabase = createClient(
Deno.env.get(“SUPABASEURL”)!,
Deno.env.get(“SUPABASESERVICEROLEKEY”)!
);

const entry = body.entry?.[0]?.changes?.[0]?.value;
const message = entry?.messages?.[0];

if (message) {
  await supabase.from("messages").insert({
    from_number: message.from,
    body: message.text?.body || "[Mídia/Outro]",
    direction: "inbound",
    whatsapp_id: message.id,
  });
}

return new Response(JSON.stringify({ status: "ok" }), { status: 200 });

}

return new Response(“Method not allowed”, { status: 405 });
});

Após o deploy da função, cole a URL pública gerada no painel de Webhooks da Meta e insira o token configurado. A partir desse instante, qualquer mensagem recebida no WhatsApp cairá diretamente na tabela messages do Supabase.

5. Habilitando Realtime no Lovable

Para que as mensagens apareçam instantaneamente no chat construído pelo Lovable sem exigir recarregamento da tela, peça ao Lovable para vincular um listener do Supabase Realtime:

“Na tela de chat, conecte o componente de listagem de mensagens ao Supabase Realtime no canal da tabela ‘messages’. Sempre que ocorrer um INSERT ou UPDATE correspondente ao contato selecionado, atualize o estado local da conversa imediatamente.”

Essa abordagem garante uma experiência de chat rápida e estável, simulando o comportamento nativo de aplicativos de mensagem.

6. Disparo de Mensagens e Templates

Para enviar mensagens ativas ou responder contatos:

1. O operador digita o texto ou escolhe um template na interface do Lovable.
2. A aplicação faz uma chamada a uma segunda Edge Function (send-whatsapp-message).
3. Essa função faz uma requisição POST direta à Meta Graph API (https://graph.facebook.com/v19.0/{PHONE_NUMBER_ID}/messages) utilizando o token de servidor.
4. O retorno com o status inicial é salvo no banco e refletido visualmente no Lovable.

Essa separação garante total conformidade com as políticas de privacidade da Meta e evita qualquer exposição de credenciais no código que roda no navegador do usuário.

Conclusão e Próximos Passos

Unir a flexibilidade do Lovable com a robustez do Supabase permite construir em dias uma solução customizada de WhatsApp que levaria meses em desenvolvimento tradicional, tudo isso operando diretamente sobre a API oficial da Meta.

Se você precisa estruturar uma integração robusta entre a WhatsApp Cloud API, processos de verificação corporativa e um aplicativo web moderno feito no Lovable, conheça os serviços de consultoria e desenvolvimento do Thiago Programador. Transformamos regras de negócio complexas em software funcional, escalável e de alto desempenho.