Aplicaciones de una sola página y cambios de página

En una aplicación de una sola página, el navegador solo carga la página una vez; después, su framework sustituye el contenido y cambia la dirección mediante history.pushState. El widget detecta estos cambios por sí solo. No necesita comunicar nada ni reiniciar nada.

Inserción: exactamente una vez

Coloque el cargador una vez en la estructura principal de su aplicación (index.html, diseño raíz, _document), no en un componente que se vuelva a renderizar en cada cambio de ruta. Insertarlo una segunda vez es inocuo (el segundo cargador no hace nada; véase Etiqueta de script), pero eliminar y volver a insertar la etiqueta no reinicia el widget.

// Next.js (App Router), app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.reactive.chat/loader.js"
                data-rc-site-key="SITE_KEY"
                strategy="afterInteractive" />
      </body>
    </html>
  );
}

La forma más sencilla de comprobar si una herramienta auxiliar del framework transmite los atributos data-* al <script> generado es utilizar el inspector de elementos. Si allí falta data-rc-site-key, no se inicia nada.

Cómo se detectan los cambios de página

El widget no interviene en history.pushState; solo observa:

1. la Navigation API del navegador (navigation.currententrychange), cuando está disponible;
2. en caso contrario, popstate y hashchange;
3. además, un temporizador que detecta cambios de dirección sin evento (cada segundo; cada 5 segundos con la Navigation API);
4. pageshow al volver desde la caché de retroceso y avance.

Cuenta como cambio de página: una dirección nueva (ruta o consulta) y rutas hash con la forma #/… y #!/…. No cuenta como cambio de página: un mero salto a un ancla (#section) y replaceState a la misma dirección.

Qué se comunica

400 ms después del cambio (para que no cuenten los estados intermedios de las redirecciones), el widget envía una trama de contexto al servidor, solo con consentimiento:

• url, path, title, referrer – antes se eliminan de url y referrer los parámetros de consulta sensibles (como email, password, token, key, card).
• locale, tz, viewport, screen, ua_hint.
• utm_source, utm_medium, utm_campaign, gclid, msclkid, fbclid de la dirección.
• nav – tipo de cambio: load, push, replace, reload, back, forward o traverse.

Si su aplicación establece el título después del cambio, el widget envía una corrección al cabo de 2 segundos. Así, los agentes del panel ven en qué página está el visitante y el asistente relaciona su respuesta con ella.

El widget también vuelve a leer el texto visible de la página (para responder sobre la página actual y para «Muéstremelo»): como pronto 1,2 segundos después del último cambio, como máximo cada 5 segundos, nunca en páginas como cuenta, pago o carrito, y nunca desde campos de formulario. Marque las áreas que el asistente no deba leer con data-rc-private (Etiqueta de script).

Transmitir contexto propio por página

No existe un método específico para comunicar un cambio de página ni hace falta. Si desea transmitir datos adicionales sobre la página actual, como el producto mostrado, utilice track después del cambio de ruta:

// React Router
const location = useLocation();
useEffect(() => {
  if (produkt) {
    window.ReactiveChat('track', 'produktseite', {
      page_type: 'product', product_id: produkt.sku, price: produkt.preis,
      currency: 'EUR', in_stock: produkt.lieferbar
    });
  }
}, [location.pathname, produkt]);

En Identificar visitantes y transmitir contexto se enumeran los campos que llegan.

Turbo, htmx, Livewire

Los frameworks que sustituyen todo el <body> también eliminan el elemento del widget. En ese caso, el widget vuelve a insertarse por sí solo (hasta diez veces por minuto); la conversación continúa.

Usuarios con sesión iniciada en SPA

Si alguien inicia sesión sin recargar, llame después a identify con un hash recién obtenido del servidor. Si cambia el usuario, el widget separa el borrador de entrada del usuario anterior. Más detalles en Identificar visitantes.

Texto de privacidad en SPA

Si su aplicación inserta la política de privacidad después de la carga, el widget encuentra igualmente el elemento data-rc-privacy (observa el documento). Véase Integración de privacidad.

Siguiente: Seguridad y CSP