WhatsApp in Lovable: Supabase Edge Function, Secrets and the right prompt

Step by step

1. 1

   Connect Supabase to the project

   In Lovable's documentation, the Supabase integration links a project of yours as the backend and allows edge function deploys. Connect it before asking for any WhatsApp sending.

2. 2

   Add the three secrets

   In More > Settings > Secrets (or when Lovable asks through the secure field in the chat), create ZAPZAP_API_KEY, ZAPZAP_API_SECRET and ZAPZAP_INSTANCE_ID. The documentation says secrets are injected into edge functions at runtime and never reach the frontend code or the browser. The keys come from Settings > API at app.zapzapapi.com.

3. 3

   Ask for the function with a closed prompt

   Example: "Create an edge function send-whatsapp that receives number and text, validates a number with 10 to 15 digits and calls POST https://api.zapzapapi.com/api/v1/{instanceId}/send/text with the x-api-key and x-api-secret headers read from the secrets. Do not use the key in the frontend." Paste the example code as a reference.

4. 4

   Call the function from the app, with an authenticated user

   In the frontend, the app uses the Supabase client to invoke send-whatsapp. Require login first: an open function that sends messages becomes a spam channel on your number. Limit text size and frequency per user.

5. 5

   Receive messages with another edge function

   Create a second function and register its URL with PUT /instances/{id}/webhook (webhook_url and events). ZapZap returns the instance's whsec_ secret: store it as a secret and validate the X-ZapZap-Signature header (t=<unix>,v1=<hmac_hex>, HMAC-SHA256 over t + dot + raw body, 5-minute tolerance).

6. 6

   Test with your own number

   Before you go live with customers, send to yourself, check the HTTP response and look at the function log. Use GET /{instanceId}/instance/status to see whether the instance is connected.

// 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" } });
});