Widget de chat web

Cargador (loader) del widget de chat flotante embebible de Whaticket. Es un único script de JavaScript vanilla (ES6+), sin iframe, empaquetado y minificado con esbuild en un IIFE (dist/widget-loader.js). El paquete se llama client-chat (package.json).

:::info Rama documentada Esta documentación describe la rama main del proyecto widget. :::

Qué hace

1. Se inserta en el sitio del cliente con un script y una configuración global (window.WhaticketWidgetConfig).
2. Consulta al CRM el modo de la conexión (GET /api/v1/widget/config) y, si el token corresponde a una conexión Web Chat conectada, monta un botón flotante y un panel de chat con estilos inline aislados del sitio.
3. Carga socket.io-client desde el propio CRM y abre un socket al namespace /chat autenticándose como contact.
4. Recibe y envía mensajes de texto y archivos (adjuntos, capturas de pantalla y audio), muestra el estado de entrega/lectura y notifica mensajes nuevos (badge, sonido y notificación del navegador).

Stack

Tecnología	Versión (package.json)	Uso
esbuild	^0.24.0 (dev)	Empaquetado y minificación
vitest	^2.1.9 (dev)	Tests unitarios (npm test)
socket.io-client	cargado en runtime desde el CRM	Tiempo real (no es dependencia npm)

El paquete es ESM ("type": "module") y no tiene dependencias de runtime.

Mapa de la documentación

Página	Contenido
Arquitectura	Archivos de src/, estructura del loader y estado interno
Integración y configuración	Snippet, API pública y todas las opciones
Build y servidor local	Scripts npm, build.mjs y serve.mjs
Demo	Páginas de demo/
Conexión y sockets	Endpoints HTTP y eventos de Socket.IO
Seguridad y orígenes	Whitelist de dominios, token e identidad
Gotchas	Comportamientos y discrepancias a tener en cuenta

Documentación relacionada

• Módulo del backend que sirve al widget: ver Conexiones (webConfig, allowedDomains).
• El CRM (frontend) también puede incrustarse en otra aplicación por iframe; eso es un mecanismo distinto: Modo iframe (Frame Bridge).