WhatsApp no Lovable: Edge Function do Supabase, Secrets e o prompt certo

Passo a passo

1. 1

   Conecte o Supabase ao projeto

   Na documentação do Lovable, a integração com o Supabase liga um projeto seu como backend e permite deploy de edge functions. Conecte antes de pedir qualquer envio de WhatsApp.

2. 2

   Adicione os três secrets

   Em More > Settings > Secrets (ou quando o Lovable pedir pelo campo seguro do chat), crie ZAPZAP_API_KEY, ZAPZAP_API_SECRET e ZAPZAP_INSTANCE_ID. A documentação diz que os secrets são injetados nas edge functions em tempo de execução e nunca vão para o código do front nem para o navegador. As chaves vêm de Settings > API em app.zapzapapi.com.

3. 3

   Peça a função com um prompt fechado

   Exemplo: "Crie uma edge function send-whatsapp que recebe number e text, valida número com 10 a 15 dígitos e chama POST https://api.zapzapapi.com/api/v1/{instanceId}/send/text com os cabeçalhos x-api-key e x-api-secret lidos dos secrets. Não use a chave no front." Cole o código do exemplo como referência.

4. 4

   Chame a função pelo app, com usuário autenticado

   No front, o app usa o cliente do Supabase para invocar send-whatsapp. Exija login antes: uma função aberta que envia mensagem vira um canal de spam com o seu número. Limite o tamanho do texto e a frequência por usuário.

5. 5

   Receba mensagens por outra edge function

   Crie uma segunda função e cadastre a URL dela com PUT /instances/{id}/webhook (webhook_url e events). A ZapZap devolve o segredo whsec_ da instância: guarde como secret e valide o cabeçalho X-ZapZap-Signature (t=<unix>,v1=<hmac_hex>, HMAC-SHA256 sobre t + ponto + corpo bruto, tolerância de 5 minutos).

6. 6

   Teste com o seu próprio número

   Antes de ligar para clientes, envie para você, confira a resposta HTTP e olhe o log da função. Use GET /{instanceId}/instance/status para saber se a instância está conectada.

// Supabase Edge Function (Deno): supabase/functions/send-whatsapp/index.ts
// Secrets: ZAPZAP_API_KEY, ZAPZAP_API_SECRET, ZAPZAP_INSTANCE_ID (never in the frontend)
const cors = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

Deno.serve(async (req: Request) => {
  if (req.method === "OPTIONS") return new Response("ok", { headers: cors });
  const { number, text } = await req.json();
  if (!/^\d{10,15}$/.test(String(number)) || !text) {
    return new Response(JSON.stringify({ error: "invalid number or text" }), { status: 400, headers: cors });
  }
  const r = await fetch("https://api.zapzapapi.com/api/v1/" + Deno.env.get("ZAPZAP_INSTANCE_ID") + "/send/text", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": Deno.env.get("ZAPZAP_API_KEY") ?? "",
      "x-api-secret": Deno.env.get("ZAPZAP_API_SECRET") ?? "",
    },
    body: JSON.stringify({ number, text }),
  });
  return new Response(await r.text(), { status: r.status, headers: { ...cors, "Content-Type": "application/json" } });
});