WhatsApp in Bolt: database Secrets, a server function and a check before sending

Step by step

1. 1

   Connect a database to the project

   In the documentation, the Secrets tab requires a database connected to the project. Connect the database before continuing.

2. 2

   Save the keys in Secrets

   Click the database icon in the top menu, open Secrets, and save ZAPZAP_API_KEY, ZAPZAP_API_SECRET and ZAPZAP_INSTANCE_ID. The name is case-sensitive. On an individual account only the owner sees the secrets; on a team account, the owner, co-owners and admins. Keys at Settings > API on app.zapzapapi.com.

3. 3

   Ask for the server function

   Prompt: "Create a server function that receives number and text, calls ZapZap POST /chat/check with numbers: [number], and only if the number exists calls POST /send/text. Read ZAPZAP_API_KEY, ZAPZAP_API_SECRET and ZAPZAP_INSTANCE_ID from the secrets. The frontend only calls this function."

4. 4

   Review what Bolt generated

   Look for three common mistakes: a key written into the code, a call made from a frontend component and a send without validating the number. Fix them by asking Bolt, and compare with the example on this page.

5. 5

   Test with your own number and look at the instance status

   Call the function with your phone, check the response and query GET /{instanceId}/instance/status. If the instance is disconnected, reconnect by QR code in the dashboard.

// Server function (Deno edge function): check the number first, then send. Secrets: ZAPZAP_API_KEY, ZAPZAP_API_SECRET, ZAPZAP_INSTANCE_ID
const BASE = "https://api.zapzapapi.com/api/v1/" + Deno.env.get("ZAPZAP_INSTANCE_ID");
const headers = {
  "Content-Type": "application/json",
  "x-api-key": Deno.env.get("ZAPZAP_API_KEY") ?? "",
  "x-api-secret": Deno.env.get("ZAPZAP_API_SECRET") ?? "",
};

Deno.serve(async (req: Request) => {
  const { number, text } = await req.json();
  const check = await fetch(BASE + "/chat/check", { method: "POST", headers, body: JSON.stringify({ numbers: [number] }) });
  if (!check.ok) return new Response("check failed: " + check.status, { status: 502 });
  const found = JSON.stringify(await check.json());
  if (!found.includes(number)) return new Response("number not found", { status: 404 });
  const send = await fetch(BASE + "/send/text", { method: "POST", headers, body: JSON.stringify({ number, text }) });
  return new Response(await send.text(), { status: send.status });
});