Quickstart

Requisitos previos

• Una cuenta de partner y una API key secreta (ak_live_…). Ambas las emite el equipo de Auphere durante el alta — reserva una llamada si aún no la tienes. Tu key queda vinculada a los orígenes web exactos que registres.
• Un backend capaz de guardar un secreto (variable de entorno o secret manager). La API key nunca debe llegar al navegador.
• Un id estable por cliente en tu sistema (external_client_ref) — un UUID funciona bien.

1. 01

   Instala el SDK

   El paquete tiene cero dependencias de runtime y publica ESM con tipos de TypeScript, más un entry point opcional para React.

   npm install @auphere/embed

2. 02

   Crea un endpoint de sesión en tu backend

   El SDK le pide a tu backend un token de sesión al abrir un modal, y de nuevo cada ~15 minutos mientras siga abierto. Tu endpoint valida la sesión de tu propio usuario, decide para qué cliente actúa, e intercambia la clave secreta por un token. Debe funcionar sin interacción del usuario.

   // app/api/auphere/session/route.ts (ejemplo Next.js)
   export async function POST(request: Request) {
     // 1. Autentica a TU usuario y resuelve a qué cliente pertenece.
     const client = await resolveClientFromSession(request);
   
     // 2. Intercambia tu clave secreta por un token de sesión efímero.
     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

   Inicializa el cliente en tu frontend

   Crea una instancia Auphere por página. partnerSlug te identifica antes de que exista un token; fetchSession apunta al endpoint del paso 2.

   import { createAuphere } from "@auphere/embed";
   
   const auphere = createAuphere({
     partnerSlug: "tu-slug", // te lo damos en el alta de partner
     fetchSession: async () => {
       const response = await fetch("/api/auphere/session", { method: "POST" });
       return response.json(); // ← tu backend emite con la clave secreta
     },
     appearance: { colorPrimary: "#00DF81", radius: "8px" },
     locale: "es",
   });

4. 04

   Deja que el cliente conecte su WhatsApp

   Llama connectWhatsApp() desde tu página de ajustes u onboarding. Abre el Embedded Signup oficial de Meta dentro del iframe de Auphere — el cliente autoriza con su propia cuenta de Meta Business. Deberías ver el modal abrirse y, al completar, onConnected dispararse con el número de teléfono.

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

5. 05

   Añade el botón de campañas

   El botón de React se renderiza solo cuando el WhatsApp de ese cliente está conectado — sin manejar estado de tu lado. Tú pasas la audiencia desde tus propios datos; el modal previsualiza la plantilla y envía.

   import { AuphereBroadcastButton } from "@auphere/embed/react";
   
   <AuphereBroadcastButton
     auphere={auphere}
     recipients={clientes.map((c) => ({
       phone: c.telefonoE164, // "+584241234567"
       variables: { cliente: c.nombre, saldo_pendiente: c.saldo },
     }))}
     onDone={({ broadcastId, accepted }) => console.log(broadcastId, accepted)}
   >
     Enviar recordatorios
   </AuphereBroadcastButton>

Si tu sitio define una Content-Security-Policy

Permite el origen del embed de Auphere en frame-src:

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

A dónde ir después

• Provisiona clientes automáticamente cuando se den de alta en tu producto.
• Campañas — plantillas, variables, límites y reglas de entrega.
• Referencia de API — todas las opciones y métodos.