Arquitectura y funcionamiento

Los componentes

En el navegador de sus visitantes:

• loader.js – un pequeño cargador de unos pocos kilobytes. Lee la configuración, comprueba el consentimiento, dibuja un botón del chat provisional en su posición definitiva (sin desplazamientos del diseño) y crea window.ReactiveChat con una cola de comandos. No hace nada más.
• El núcleo (core.<hash>.js) – ventana del chat, conexión, ocultación de datos personales y reglas. Solo se carga cuando se activa un disparador: el navegador está inactivo, el ratón o un dedo se sitúa sobre el botón del chat, se ejecuta un comando de API o llega una señal de frustración de MousePlayer. La mayoría de los visitantes nunca abre el chat y, por tanto, tampoco carga el núcleo de inmediato.
• Módulos bajo demanda – recorridos del producto, texto de privacidad y funciones de tienda; cada uno se carga solo cuando se necesita.
• Aislamiento – todo se aloja en un shadow DOM cerrado; los estilos utilizan hojas de estilo construibles, sin scripts en línea, sin eval y sin cookies.

En reactive.chat:

• Distribución en https://cdn.reactive.chat/ – cargador, núcleo y módulos.
• Servidor de chat en wss://ws.reactive.chat/rc_wss/ – WebSocket con el protocolo rc.v1; la misma dirección con https:// para la alternativa HTTP, el formulario sin conexión, las cargas de archivos, el texto de privacidad y Smart Answer.
• Cuenta en https://reactive.chat/app – ajustes del proyecto, diseño, base de conocimiento y panel de agentes de su equipo.
• API de servidor en https://reactive.chat/v1/ – REST y MCP para su backend.

En su infraestructura (opcional):

• Su backend firma la identidad de los usuarios que han iniciado sesión, responde a la solicitud de datos de clientes, recibe webhooks y llama a la API de servidor.
• Su proxy sirve todo a través de un subdominio propio (Dominio propio).

Secuencia de una visita a la página

1. El navegador carga loader.js (de forma asíncrona, sin bloquear nada).
2. El cargador lee data-rc-*, ReactiveChatSettings y las llamadas a boot en cola, comprueba la clave del sitio y el consentimiento y dibuja el elemento provisional.
3. Se activa un disparador; el cargador carga el núcleo desde el mismo directorio.
4. El núcleo toma el control del elemento provisional y de la cola y procesa los comandos pendientes en orden.
5. Abre la conexión y envía init con la clave del sitio, los ID, el idioma, el consentimiento, la identidad firmada si la hay y el contexto de la página.
6. El servidor comprueba el origen, el proyecto y la identidad y responde con init_ok: diseño y textos de la cuenta, reglas, funciones, límites e historial de la conversación hasta ese momento.
7. El widget está listo (evento ready). Informa automáticamente de los cambios de página en aplicaciones de una sola página.

Secuencia de una pregunta

1. El visitante escribe; los datos personales se ocultan en el navegador y el mensaje lleva un ID único.
2. El servidor lo almacena (reconoce las repeticiones por el ID), vuelve a ocultar los datos y confirma con un eco.
3. El asistente de IA busca en su base de conocimiento —para preguntas sobre pedidos de un usuario verificado, también mediante el endpoint de datos de clientes— y transmite la respuesta progresivamente. En su cuenta puede configurar cuándo transfiere la conversación a su equipo (Manual).
4. En paralelo, los eventos pasan por una cola hacia los webhooks y las integraciones. El chat nunca espera a que terminen.

Versiones y distribución

• loader.js no lleva un número de versión en el nombre y se sustituye al actualizar. Por ello, insértelo desde cdn.reactive.chat (o a través de su proxy), no como una copia.
• El núcleo se llama core.<hash>.js; el hash se obtiene de su contenido y cada cargador conoce exactamente su propio núcleo. Así, cargador y núcleo siempre son compatibles y el núcleo puede permanecer mucho tiempo en la caché.
• La configuración (diseño, textos, reglas y recorridos) llega del servidor en cada conexión. Los cambios en su cuenta no requieren un nuevo código de inserción; surten efecto al poco tiempo (hasta un minuto, según el ajuste).
• La versión del protocolo es 1. Se añaden campos nuevos; los desconocidos se ignoran.
• ReactiveChat.version indica la versión del núcleo una vez cargado.

Dónde configurar cada cosa

• En su cuenta: aspecto, textos, pantalla de inicio, reglas, recorridos, pruebas A/B y personalidad de la IA (Personalización), equipo, base de conocimiento y canales (Manual).
• En la etiqueta de script: lo que deba aplicarse a cada página (Referencia de la etiqueta de script).
• En el script de su página: identidad, contexto y apertura desde sus propios elementos (API de JavaScript).
• En su servidor: firmas, datos de clientes, webhooks y API (Identidad, Datos de clientes, Webhooks, API de servidor).

Siguiente: Inicio rápido