Referencia de la etiqueta de script: atributos y fuentes de configuración

El widget se puede configurar por completo mediante atributos en la etiqueta de script, sin un script en línea y, por tanto, también con una política de seguridad de contenido estricta. Si prefiere escribir JavaScript, establezca los mismos campos mediante window.ReactiveChatSettings o ReactiveChat('boot', …).

El diseño, los textos, la pantalla de inicio, las reglas y los recorridos se configuran normalmente en su cuenta; llegan del servidor al establecer la conexión. Los atributos de aquí sirven para lo que deba aplicarse por página. Todas las opciones de diseño se describen en Personalización.

Cuatro fuentes de configuración y su prioridad

Prevalece la fuente posterior; la combinación es superficial (un campo de objeto como brand se sustituye por completo, sin combinación profunda):

1. Valores predeterminados del widget
2. Atributos data-rc-* en la etiqueta del cargador
3. window.ReactiveChatSettings (establecido antes del cargador)
4. Llamadas a ReactiveChat('boot', {...}) de la cola, en su orden

Los campos que el widget no conoce se descartan; por tanto, un atributo mal escrito no tiene efecto y no genera ningún aviso.

<script>
  window.ReactiveChatSettings = { locale: 'en', position: 'left' };
</script>
<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        async></script>

Cómo se leen los valores de los atributos

El nombre se convierte de notación con guiones a camel case: data-rc-site-key → siteKey. El tipo se deduce del valor predeterminado:

• Cadena – se toma sin cambios.
• Booleano – solo "false" y "0" son falsos; todo lo demás, incluido un atributo vacío, es verdadero.
• Lista – separada por comas, por ejemplo "idle,pointer".
• Número u objeto – se lee como JSON. Si el JSON no es válido, se mantiene el valor predeterminado.

Solo se lee la etiqueta que se está ejecutando (document.currentScript). Por ello, inserte el cargador como script clásico, no con type="module".

Obligatorio

• data-rc-site-key (cadena, obligatorio) – clave de su proyecto, disponible en su cuenta en Proyecto → Instalación. Patrón [A-Za-z0-9_-]{8,64}. Si falta o no es válida, no se inicia nada, sin mensaje en la consola.

Conexión y distribución

• data-rc-ws-url (cadena, opcional) – dirección de la conexión del chat. Si no se indica, se deduce de la ubicación de loader.js (cdn.reactive.chat → wss://ws.reactive.chat/rc_wss/). Obligatoria en cuanto deje de cargar loader.js desde cdn.reactive.chat y para dominios con terminación de dos partes, como .co.uk. Véase Transporte.
• data-rc-cdn-base (cadena, opcional) – directorio desde el que se cargan el núcleo y los módulos. Predeterminado: el directorio de loader.js.
• data-rc-core-url (cadena, opcional) – dirección fija del núcleo en lugar de core.<hash>.js del mismo directorio. Solo para casos especiales, como una réplica propia.
• data-rc-transport (http, opcional) – fuerza la alternativa HTTP desde el principio. Funciona en cualquier elemento presente en el documento al iniciar; como alternativa, ReactiveChatSettings.transport = 'http'. No tiene efecto mediante boot.
• data-rc-max-retries (número, predeterminado 2) – reintentos si no carga el núcleo (intervalo de 300 ms × intento).

Idioma, tema y movimiento

• data-rc-locale (cadena, predeterminado auto) – de, en o pl. auto toma <html lang>, después el idioma del navegador y, en último caso, inglés. Los demás idiomas utilizan inglés como alternativa.
• data-rc-theme (auto | light | dark, predeterminado auto) – auto sigue el modo claro/oscuro de su página y, en su defecto, el del sistema.
• data-rc-motion (auto | reduced | full, predeterminado auto) – animaciones; auto sigue prefers-reduced-motion.
• data-rc-strings (objeto JSON, predeterminado {}) – sustituye textos individuales, por ejemplo {"a11y.launcher":"Open help"}. En los demás casos, mantenga los textos en su cuenta (Personalización).

Visualización y posición

• data-rc-position (right | left, predeterminado right) – esquina del botón del chat y de la ventana.
• data-rc-offset (JSON, predeterminado {"x":20,"y":20}) – distancia al borde en píxeles, además del área segura.
• data-rc-z-index (número, predeterminado 2147483000).
• data-rc-avoid-overlap (booleano, predeterminado true) – evita las barras fijas del borde inferior (banners de cookies, barras del carrito).
• data-rc-hide-launcher (booleano, predeterminado false) – sin icono de chat; la ventana solo se abre mediante enlaces propios o la API de JavaScript. Los avisos se suprimen. Se aplica con independencia del ajuste de la cuenta.
• data-rc-auto-open (booleano, predeterminado false) – abre la ventana después del inicio.
• data-rc-isolation (shadow | iframe, predeterminado shadow) – el widget se aloja en un shadow DOM cerrado; iframe renderiza la ventana en un marco, para páginas con estilos globales muy agresivos.
• data-rc-brand (objeto JSON) – color de marca y forma del botón del chat. El cargador lee de inmediato primary (#rrggbb), onPrimary, radius y launcher.shape (circle, rounded, square, bubble, leaf), launcher.size (44–72) y launcher.size_m; el núcleo comprueba el resto. El código de inserción de su cuenta ya incluye estos valores; sin un primary válido, el cargador no muestra un botón provisional y espera a que llegue el color del servidor (sin cambio brusco de color, pero con aparición posterior del botón). Si el objeto solo contiene estos campos iniciales, se aplica la marca de su cuenta al establecer la conexión; si incluye más campos (por ejemplo, accent), se aplica la suya. Detalles en Personalización.
• data-rc-logo (objeto JSON) – src, placement (launcher, header, both), height, alt.
• data-rc-custom-css (cadena) – CSS propio dentro del shadow DOM. Véase Personalización.

Carga y comportamiento

• data-rc-load-triggers (lista, predeterminados los cinco) – cuándo se carga el núcleo: idle (el navegador está inactivo), pointer (ratón o dedo sobre el botón del chat), command (un comando de API distinto de boot, update, track, identify), frustration (señal de MousePlayer), push. Prevalece el primer disparador.
• data-rc-idle-timeout-ms (número, predeterminado 3000) – tiempo de espera para el disparador idle.
• data-rc-consent (auto | granted | denied, predeterminado auto) – estado del consentimiento. auto consulta su plataforma de consentimiento (IAB TCF v2 mediante __tcfapi; en su defecto, consented.eu); granted/denied lo fijan. Véase Integración de privacidad.
• data-rc-dom-spiegel (booleano, predeterminado true) – false no envía texto de la página al asistente y desactiva «Muéstremelo».
• data-rc-promo (booleano, predeterminado true) – false oculta la tarjeta promocional en esta página.
• data-rc-launcher-selector (selector CSS) – los clics en elementos coincidentes alternan la apertura y el cierre de la ventana. Solo funciona una vez cargado el núcleo; para enlaces que deban funcionar de inmediato, utilice data-rc-open (más abajo).
• data-rc-dnd (booleano, predeterminado false) – valor inicial de «No molestar».
• data-rc-session-ttl-ms (número, predeterminado 1800000) – durante cuánto tiempo se retoma una sesión de MousePlayer.
• data-rc-debug (booleano, predeterminado false) – información de diagnóstico en la consola. Equivalente: localStorage.setItem('rc_debug', '1') en el navegador.

Atributos en otros elementos de su página

Abrir el chat (funciona de inmediato, incluso antes de que se haya cargado el núcleo):

• data-rc-open – en cualquier elemento; un clic abre el chat junto al elemento. data-rc-open="corner" lo abre en la esquina.
• href="#rc-open" o href="#reactive-chat" – lo mismo para enlaces.
• data-rc-anchor="none" – como corner.
• data-rc-message – texto que se escribe en el campo de entrada, pero no se envía (hasta 200 caracteres).
• data-rc-tab – msg, home o help: qué pestaña se muestra en primer plano.

En detalle: Abrir el chat desde un enlace o botón propio.

Texto de privacidad:

• data-rc-privacy – marcador para la sección sobre reactive.chat en su política de privacidad, con data-lang, data-heading (2–6) y data-email. Estado en data-rc-privacy-state (loading, done, error). Véase Integración de privacidad.

Excluir texto de página:

• data-rc-private o, de forma equivalente, data-rc-ignore – este subárbol nunca se envía al asistente como texto de página ni es destino de «Muéstremelo».

<aside data-rc-private>
  Internal notes the assistant should not read.
</aside>

Parámetros de URL

• ?rc_ab=A hasta E – fuerza una variante de una prueba A/B en curso para comprobaciones de calidad (véase Personalización).

El widget no evalúa ningún otro parámetro de la dirección al cargar.

Inserción múltiple

Si el cargador aparece dos veces en la página (por ejemplo, mediante una plantilla y un gestor de etiquetas), solo se inicia el primero con una clave del sitio válida; el segundo no hace nada. Una primera etiqueta con clave no válida no impide que funcione una segunda correcta.

Siguiente: API de JavaScript · Eventos