Integrate WhatsApp with Supabase

Step by step

1. 1

   Get your keys from ZapZap API

   In the ZapZap API dashboard, activate a number (R$15/month, prepaid, with a welcome credit when you create the account, subject to the current campaign) and copy the instance's x-api-key and x-api-secret. Keep the API base: https://api.zapzapapi.com. The exact fields of each route are in the docs at https://api.zapzapapi.com/llms.txt.

2. 2

   Create an Edge Function in Supabase

   In the Supabase dashboard, go to Edge Functions and click Deploy a new function, or run in the terminal: supabase functions new send-whatsapp. This generates the index.ts file in supabase/functions/send-whatsapp/ written in Deno/TypeScript.

3. 3

   Store the keys as Secrets

   In Edge Functions, Secrets tab (or via CLI: supabase secrets set ZAPZAP_KEY=... ZAPZAP_SECRET=...). Never leave x-api-key and x-api-secret in the code. Inside the function, read them with Deno.env.get('ZAPZAP_KEY').

4. 4

   Make the fetch to ZapZap API inside the function

   In index.ts, use Deno's native fetch to call https://api.zapzapapi.com with the x-api-key and x-api-secret headers, sending number and text in the body. Deploy with supabase functions deploy send-whatsapp. Check the route and the exact field names at https://api.zapzapapi.com/llms.txt.

5. 5

   Trigger it from a database trigger

   In Database, create a SQL function and an AFTER INSERT trigger on your table. Use the pg_net extension (supabase_functions.http_request) or the net.http_post wrapper to call your Edge Function's URL whenever a new row comes in. That way WhatsApp goes out automatically on every new record in Postgres.

// Edge Function (Deno) on Supabase: supabase/functions/send-whatsapp/index.ts
// ILLUSTRATIVE example. Check the route and exact fields at https://api.zapzapapi.com/llms.txt

Deno.serve(async (req) => {
  const { number, text } = await req.json();

  const resp = await fetch("https://api.zapzapapi.com/api/v1/{instanceId}/send/text", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": Deno.env.get("ZAPZAP_KEY")!,
      "x-api-secret": Deno.env.get("ZAPZAP_SECRET")!,
    },
    body: JSON.stringify({ number, text }),
  });

  return new Response(await resp.text(), { status: resp.status });
});