wa-embed — demo local

Esta página simula una web de cliente. Abre la consola para ver el flujo. El panel de abajo muestra en vivo lo que el widget recolecta.

Cómo se publica el bundle (vía credencial, no marketplace):
  1. Configura el embed con POST /api/wa-embed/config (body: projectId, credentialId, wabaId, domain, whatsappPhone, prefilledMessage). Ese endpoint hornea el bundle y lo sube a S3.
  2. El response trae el scriptUrl de S3. Ese es el que va en el <script> de abajo.
  3. Tras cambiar el template (build nuevo), vuelve a llamar POST /api/wa-embed/config con los mismos datos para re-publicar: re-sube el bundle al mismo key de S3 (la URL no cambia).
UX v3 — diseño "WhatsApp Chat":
  1. El botón verde abre un panel estilo conversación de WhatsApp (header, burbuja de bienvenida, opciones predefinidas y textarea).
  2. Opciones predefinidas (hasta 3): al hacer clic en una, ese mensaje se envía de inmediato.
  3. Mensaje personalizado: escribe en el textarea y presiona Enviar por WhatsApp.
  4. Si el textarea va vacío, el backend usa el prefilledMessage del widget.
  5. El panel vive en un Shadow DOM: el CSS del sitio no lo afecta y el tracking (UTMs/cookies/referrer) sigue intacto.

Para regenerar el bundle local tras cambiar el src: npm run build:dev && node scripts/bake-local.mjs

Probar el match (qué llega al webhook):

Intercepción de links a WhatsApp nuevo

Con interceptWhatsAppLinks: true, el bundle detecta los links/botones a WhatsApp que ya tenga la página y, al hacer click, abre el panel del widget (precargando el ?text= del link) en vez de ir directo a WhatsApp. Así esos clicks también quedan trackeados con sesión + refCode.

✅ Deben interceptarse (abren el panel con el texto precargado):
🚫 NO deben interceptarse (siguen su comportamiento normal):

El botón rojo abre directo el deeplink simulado (vía window.open mockeado): es la prueba de que los handlers JS no se interceptan. Los demás casos ✅ deben abrir el panel verde.

Verificar atribución que se recolecta

Sigue estos pasos en orden para ver todos los parámetros nuevos (9 UTMs GA4 + click IDs + IDs de campaña + cookies Google/Meta + cookies ddm_ first/last click).

Paso 1 escribe las cookies de terceros (como lo haría Google/Meta tag). Paso 2 recarga la página con la query completa: al cargar, el widget ejecuta persistAttribution() y escribe las cookies ddm_*. Luego envía un mensaje desde el widget (botón verde) para ver el context exacto que viaja al backend.

🍪 Cookies en el navegador

cargando…

📤 context enviado al backend (al pulsar "Enviar")

Aún no se ha enviado ningún mensaje. Abre el widget verde (abajo a la derecha) y manda uno.

Nota: el bundle se cachea. Tras re-publicar, fuerza recarga dura (Ctrl/Cmd+Shift+R) o agrega ?v=2 al final del src.