Colores, fuente y tema

El widget adopta su color de marca, su fuente y, si lo desea, un conjunto completo de colores propios. Al hacerlo, recalcula los colores hasta que todos los textos sean legibles en todas las superficies. Usted elige el color y el widget se ocupa del contraste.

Todos los ajustes de esta página están en /app/projects/{id}, pestaña Aspecto, sección Marca. La excepción es el esquema de colores (claro, oscuro, automático), que está en la pestaña Instalación, bajo Datos básicos.

El asistente de diseño

En la parte superior de Marca, un asistente le guía por el diseño en cuatro pasos:

1. Aspecto: 18 plantillas listas para usar, filtrables por Claro, Oscuro, Profesional, Divertido, Acogedor, Frío y Minimalista. Entre ellas están Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit y Espresso.
2. Colores: color primario y acento, selección rápida de ocho pares de colores y elección de superficies: predeterminadas, claras, oscuras o personalizadas.
3. Forma: estilo de ventana, radio de las esquinas, forma y tamaño del botón del chat.
4. Listo: un resumen.

El asistente no guarda nada por sí mismo. Solo rellena los campos inferiores; nada se guarda hasta pulsar Guardar. La miniatura del asistente es un esquema. El widget real con sus valores se ve en la vista previa de Pantalla inicial del widget.

Para ajustar los detalles, despliegue Todos los ajustes uno por uno. La fuente y el CSS propio solo están disponibles ahí.

Los campos

• Color primario: su color de marca como #rrggbb. Colorea el botón del chat, el de envío, los enlaces, el foco y, mezclado, las burbujas de sus visitantes. Sin valor propio: violeta #6D28D9 en el tema claro y #9B7BFF en el oscuro.
• Acento: un segundo color como #rrggbb, por ejemplo para contadores y elementos destacados. Sin valor propio: #BE185D en claro y #FF6B8A en oscuro.
• Radio de las esquinas (px): de 0 a 28. 0 significa esquinas rectas. Valor predeterminado: 12.
• Familia de fuentes (CSS): un valor CSS como Inter, system-ui, sans-serif, de 120 caracteres como máximo. El widget no carga archivos de fuentes. Utilice una fuente que su página ya cargue o una fuente del sistema. Vacío significa las fuentes del sistema del dispositivo.
• Plantillas: un clic rellena a la vez colores, superficies, radio, botón del chat y estilo. Nada se guarda hasta pulsar Guardar.

Solo son válidos los colores con seis dígitos en la forma #rrggbb. Se descartan formas cortas como #f00 o rgb(…) y se aplica el valor predeterminado.

Superficies y texto

En Superficies y texto puede definir otros cinco colores. Cada uno tiene una casilla de color propio:

• Fondo: la superficie de la ventana.
• Superficie de burbuja: las burbujas de su equipo y del asistente.
• Texto: el color del texto.
• Texto secundario: horas, notas y segundas líneas.
• Líneas: separadores y bordes.

Sin marcar la casilla, el widget utiliza el conjunto de colores que corresponde al sitio, claro u oscuro. El valor del campo es entonces solo un punto de partida, no una lectura del color aplicado. Con la casilla marcada, se aplica su color.

Si solo define un fondo propio, el widget deduce el resto: superficie de burbuja, texto, texto secundario y líneas.

Legibilidad: qué recalcula el widget

Los clientes eligen su color de marca, no un color legible. Por eso, el widget comprueba cada combinación de texto y superficie para alcanzar una relación de contraste de al menos 4,5:1. Es el umbral de WCAG 2.x para texto normal.

• El texto sobre su color de marca (por ejemplo, en el botón de envío) se pone automáticamente en blanco o casi negro, según cuál sea más legible.
• Su color de marca como color de texto (enlaces, elementos destacados) se aclara u oscurece en pequeños pasos hasta alcanzar 4,5:1. Las superficies, es decir, el botón del chat y el de envío, conservan su color sin cambios.
• La burbuja del visitante mezcla el color de marca con el fondo. Si el contraste no basta, el widget reduce la proporción del color de marca.
• Sus colores propios de texto y texto secundario pasan por la misma comprobación frente a cada superficie en la que aparecen.

Lo recalculado aparece en su cuenta justo debajo del formulario, en la línea Recalculado para mantener la legibilidad del texto. Un amarillo claro como color de texto se verá, por tanto, más oscuro en el widget que el introducido; ahí puede ver el motivo.

También puede consultar los valores medidos desde su página:

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Claro, oscuro o como el sitio

En Instalación → Datos básicos → Esquema de colores del widget, elija:

• como el sitio web (si no, el sistema del visitante): opción predeterminada. El widget comprueba si su página es clara u oscura y se adapta.
• claro: siempre claro.
• oscuro: siempre oscuro.

Con la opción automática, el widget comprueba, en este orden:

1. el color de fondo de su página en el centro de la pantalla,
2. el valor CSS color-scheme en <html>, si es exactamente dark o light,
3. los interruptores habituales en <html> o <body>, como la clase dark o data-theme="dark",
4. finalmente, el ajuste del sistema del visitante.

Si su página cambia entre claro y oscuro, el widget la sigue. También vuelve a comprobarlo al abrir la ventana.

En el código, defina el tema en el código de inserción o durante la ejecución. Tiene prioridad sobre el ajuste de la cuenta:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

Con setTheme, el widget recuerda la elección en el navegador del visitante. setTheme('auto') la elimina. Esto sirve para un interruptor claro/oscuro propio de su página.

Definir colores en el código

Para páginas concretas, como una campaña, puede definir la marca en el código de inserción o durante la ejecución. Los campos son:

• primary, accent: color de marca y acento,
• bg, surface, text, textDim, line: las cinco superficies,
• onPrimary: color del texto sobre el color de marca (automático en otro caso),
• radius: de 0 a 28,
• font: valor CSS de fuente,
• launcher y stil: véase El botón del chat y Ventana de chat.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand recalcula al instante el contraste y los colores derivados, sin reconstruir el widget. null elimina un valor y vuelve a aplicarse el predeterminado.

En el código de inserción, el atributo se llama data-rc-brand y acepta JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Importante: ¿qué tiene prioridad, el código o la cuenta? El código generado por su cuenta ya contiene el color de marca, el radio y la forma y tamaño del botón del chat. Es solo el estado inicial para que el botón aparezca enseguida con el color correcto. En cuanto el widget recibe los ajustes del servidor, se aplica íntegramente su cuenta.

Sin embargo, si añade cualquier otro campo a data-rc-brand, como accent, stil o un rótulo, la marca del código cuenta como marca propia de esta página. Tiene entonces prioridad sobre su cuenta. De la cuenta solo sigue aplicándose en esta página la visualización «Solo mediante enlaces propios». Además, la página no participa en las pruebas A/B.

Si cambia el color de marca en su cuenta, vuelva a copiar después el código de inserción bajo Instalación. De lo contrario, el color antiguo aparecerá brevemente durante la carga.

El funcionamiento del código y las demás opciones (window.ReactiveChatSettings, ReactiveChat('boot', …)) se describen en Integración técnica.

CSS propio

En Todos los ajustes uno por uno → CSS propio, escriba el CSS que se aplica al final, después de todas las demás reglas.

• 20.000 caracteres como máximo.
• @import se elimina tanto al guardar como en el widget.
• El CSS solo actúa dentro del widget. Se ejecuta en una zona aislada (shadow DOM) y no puede cambiar su página. A su vez, el CSS de su página no alcanza el widget. Este es el lugar adecuado.
• Después, el widget vuelve a imponer dos reglas: el indicador visible de foco para usuarios de teclado y el botón de cierre del encabezado. Ocultar la salida del chat mediante estilos crea una trampa para los usuarios de teclado.
• Los nombres de clase internos del widget no son una interfaz garantizada. Compruebe su CSS en la vista previa tras los cambios.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

En código funciona igual con customCss, por ejemplo en ReactiveChat('boot', { customCss: '…' }) o mediante el atributo data-rc-custom-css.

Logotipo en el encabezado de la ventana

La forma más sencilla es introducir el logotipo en su cuenta: Proyecto → Aspecto → Marca, campo Logotipo (dirección). Aparecerá en el encabezado de la ventana del chat, como máximo un minuto después de guardar.

En el código, logo también permite definir altura, texto alternativo y posición, por ejemplo el logotipo en el botón del chat. Un logotipo definido en código tiene prioridad sobre el campo de la cuenta:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

• src: una dirección con https:// o una imagen como data:image/…. Un SVG pequeño como dirección data: ahorra una solicitud.
• alt: texto alternativo.
• height: altura en píxeles, de 12 a 40, por defecto 20.
• placement: header (encabezado, predeterminado), launcher (en el botón del chat) o both.

El logotipo de la pantalla de inicio, en cambio, se define fácilmente en su cuenta; véase La pantalla de inicio del chat.

Si algo se ve distinto de lo esperado

• El color es más oscuro o claro que el introducido: es la protección del contraste. La línea Recalculado bajo el formulario indica qué se ha ajustado.
• Los cambios de la cuenta no llegan: ¿contiene su código un data-rc-brand con campos adicionales? Entonces tiene prioridad el código. Además, después de guardar puede pasar hasta un minuto.
• Aparece brevemente otro color durante la carga: vuelva a copiar el código después de cambiar el color.
• La fuente no tiene efecto: ¿carga su página esa fuente? El widget no carga archivos de fuentes.