wa-embed — demo local

Elige un fondo para abrir el panel del widget y ver cómo se verá. Cambia el fondo en vivo sobre el widget real (Shadow DOM), no re-hornea nada.

Blanco con negro Gris (default) Negro

—

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).

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

• Por token: envía el mensaje tal cual (deja el sufijo · ref: XXXXXXXX). Match 100% preciso.
• Por contenido (backup): en WhatsApp borra el · ref: XXXXXXXX antes de enviar, dejando el resto del texto igual. Debe enlazar igual por coincidencia exacta del mensaje.
• Sin match: si además editas el texto del mensaje, no debería enlazar (esperado).

• Anchor wa.me: Escríbenos por WhatsApp
• Anchor api.whatsapp.com/send: Contacto WhatsApp
• Anchor web.whatsapp.com/send: WhatsApp Web
• Esquema whatsapp://send: Abrir app de WhatsApp
• Botón con onclick inline: Botón onclick → WhatsApp
• Elemento con data-href: Span data-href
• Anchor sin ?text= (abre el panel sin precargar): WhatsApp sin mensaje

• Invitación a grupo chat.whatsapp.com (excluida a propósito): Unirse al grupo
• Link normal (no WhatsApp): Link cualquiera
• Limitación conocida — botón cuyo handler se ata con addEventListener (invisible desde fuera, no se puede interceptar): Botón JS (addEventListener)

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.

1 · Inyectar cookies de ejemplo (Google/Meta) 2 · Cargar URL con todos los parámetros

↻ Refrescar panel Limpiar cookies de tracking

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.