Quickstart

Prerequisites

• A partner account and a secret API key (ak_live_…). Both are issued by the Auphere team during onboarding — book a call if you don’t have one yet. Your key is bound to the exact web origins you register.
• A backend that can keep a secret (environment variable or secret manager). The API key must never reach the browser.
• A stable id per client in your system (external_client_ref) — a UUID works well.

1. 01

   Install the SDK

   The package has zero runtime dependencies and ships ESM with TypeScript types, plus an optional React entry point.

   npm install @auphere/embed

2. 02

   Create a session endpoint in your backend

   The SDK asks your backend for a session token when a modal opens, and again about every 15 minutes while it stays open. Your endpoint validates your own user’s session, decides which client they act for, and exchanges the secret key for a token. It must work without user interaction.

   // app/api/auphere/session/route.ts (Next.js example)
   export async function POST(request: Request) {
     // 1. Authenticate YOUR user and resolve which client they belong to.
     const client = await resolveClientFromSession(request);
   
     // 2. Exchange your secret key for a short-lived session token.
     const response = await fetch("https://api.auphere.com/v1/widget-sessions", {
       method: "POST",
       headers: {
         Authorization: `Bearer ${process.env.AUPHERE_SECRET_KEY}`,
         "Content-Type": "application/json",
       },
       body: JSON.stringify({ external_client_ref: client.id }),
     });
   
     return Response.json(await response.json());
   }

3. 03

   Initialize the client in your frontend

   Create one Auphere instance per page. partnerSlug identifies you before any token exists; fetchSession points at the endpoint from step 2.

   import { createAuphere } from "@auphere/embed";
   
   const auphere = createAuphere({
     partnerSlug: "your-slug", // provided during partner onboarding
     fetchSession: async () => {
       const response = await fetch("/api/auphere/session", { method: "POST" });
       return response.json(); // ← your backend mints with the secret key
     },
     appearance: { colorPrimary: "#00DF81", radius: "8px" },
     locale: "en",
   });

4. 04

   Let the client connect their WhatsApp

   Call connectWhatsApp() from your settings or onboarding page. It opens Meta’s official Embedded Signup inside the Auphere iframe — the client authorizes with their own Meta Business account. You should see the modal open and, on completion, onConnected fire with the phone number.

   await auphere.connectWhatsApp({
     onConnected: ({ displayPhoneNumber }) => {
       console.log("Connected:", displayPhoneNumber);
       refreshUI();
     },
   });

5. 05

   Add the broadcast button

   The React button renders only when that client’s WhatsApp is connected — no state juggling on your side. You pass the audience from your own data; the modal previews the template and sends.

   import { AuphereBroadcastButton } from "@auphere/embed/react";
   
   <AuphereBroadcastButton
     auphere={auphere}
     recipients={customers.map((c) => ({
       phone: c.phoneE164, // "+15551234567"
       variables: { name: c.name, amount_due: c.balance },
     }))}
     onDone={({ broadcastId, accepted }) => console.log(broadcastId, accepted)}
   >
     Send reminders
   </AuphereBroadcastButton>

If your site sets a Content-Security-Policy

Allow the Auphere embed origin in frame-src:

Content-Security-Policy: frame-src https://embed.auphere.com;

Where to go next

• Provision clients automatically when they sign up in your product.
• Broadcasts — templates, variables, limits and delivery rules.
• API reference — every option and method.