Ventana del chat: estilo, tamaño, panel lateral y vista móvil

Los colores definen el carácter; la forma hace el resto. En /app/projects/{id}, pestaña Aspecto, sección Marca, encontrará dos grupos de ajustes: Estilo (forma en lugar de color) y Ventana (aspecto de la ventana abierta). Si no elige nada, todo mantiene los valores predeterminados. Guarde con Guardar; la vista previa de Pantalla inicial del widget muestra el widget real.

Las plantillas del asistente de diseño también establecen estos ajustes.

Estilo

• Encabezado – degradado (predeterminado), plano o cristal. Se aplica al encabezado de la pantalla de inicio y a la barra de título.
• Densidad – normal (predeterminada), compacto o espacioso. Separación en la pantalla de inicio y en la conversación.
• Burbujas – suave (predeterminado, sigue su radio de las esquinas), redondeado (18 px) o esquinas rectas (4 px).
• Sombra – suave (predeterminada), dura o ninguno. Se aplica a la ventana, no al botón del chat.
• Avatar – redondeado (predeterminado) o esquinas rectas.
• Campo de entrada – plano (predeterminado) o píldora (muy redondeado, con botones redondos).
• Tarjetas – con borde (predeterminado) o plano. Se aplica a los mosaicos de la pantalla de inicio, las filas de ayuda y las tarjetas de la conversación.

Ventana

• Tamaño de la ventana – normal (predeterminado, 380 px de ancho), ancho (440 px), estrecho (340 px) o alto (casi toda la altura de la pantalla, hasta 960 px). La altura normal es de 620 px, menor en pantallas pequeñas.
• Presentación – ventana flotante (predeterminada) o panel lateral. El panel lateral ocupa toda la altura del borde, en el lado del botón del chat, y se desliza desde allí. El botón del chat pasa a segundo plano mientras está abierto. Se cierra con el botón del encabezado.
• Fondo – fondo del área de mensajes: sencillo (predeterminado), puntos, cuadrícula o degradado (un toque del color de su marca).
• Tamaño del texto – normal (predeterminado, 14 px), grande (15,5 px) o pequeño (13 px). Se aplica a las burbujas y al campo de entrada, no al botón del chat.
• Animación de apertura – deslizamiento (predeterminada), zoom de entrada, fundido de entrada o ninguna. Si el visitante ha activado «reducir movimiento» en su sistema, la animación se omite en cualquier caso.
• Burbuja del visitante – color de las burbujas de sus visitantes: color primario (predeterminado, una mezcla clara del color de su marca), color de acento o neutro (gris). También aquí el widget recalcula el texto hasta que resulte legible.

El tamaño de la ventana y la presentación solo surten efecto a partir de 481 px de ancho de pantalla. Por debajo, el chat siempre se abre a pantalla completa (véase más abajo).

Mediante código

Todos los ajustes están en la marca, bajo stil. Los valores son los nombres internos:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Un valor desconocido hace que se utilice el predeterminado.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

En el código de inserción, como data-rc-brand='{"stil":{"ansicht":"seite"}}', la marca se considera propia de esta página y tiene prioridad sobre su cuenta; véase Colores, fuente y tema.

Movimiento

Con data-rc-motion en el código de inserción puede controlar las animaciones: auto (predeterminado, sigue el ajuste del sistema del visitante), reduced (sin movimiento) o full.

data-rc-motion="reduced"

Encabezado

El encabezado muestra quién responde:

• Si escribe alguien de su equipo, muestra su nombre visible. Cada miembro lo mantiene en sus ajustes personales; véase Equipo, consola y notificaciones.
• Si responde el asistente de IA, muestra su nombre de IA y conocimiento → Asistente (predeterminado «Ada»); véase Asistente de IA.
• En los demás casos, el título «Chat». Puede cambiarlo, junto con la segunda línea («Estamos aquí», «Asistente de IA»), en Textos e idiomas, con las claves header.title, header.subtitle_online y header.subtitle_bot.

Los avatares muestran la primera letra del nombre y, para el asistente, el símbolo ✦. Actualmente no se pueden guardar fotos propias de los miembros del equipo.

El encabezado también incluye un icono de sobre que permite a los visitantes recibir la conversación por correo. Puede desactivarlo en Reglas y servicio → Transcripción de la conversación por correo; véase Disponibilidad, formularios y servicio.

La indicación «Powered by reactive.chat»

En el plan gratuito, la indicación «Powered by reactive.chat» aparece en la parte inferior de la ventana. A partir de un plan de pago, usted decide en Aspecto → reactive.chat dentro del chat, con el ajuste Ocultar «Powered by reactive.chat». El valor predeterminado es entonces oculto. No se puede cambiar el texto de la indicación.

En teléfonos

Hasta 480 px de ancho, y en dispositivos en horizontal con hasta 480 px de alto, el chat se abre a pantalla completa: sin esquinas, con toda la altura visible, incluso cuando se abre el teclado en pantalla. El campo de entrada utiliza texto de 16 px para que el teléfono no amplíe la vista, y los botones miden al menos 44 px. El botón del chat pasa a segundo plano mientras el chat está abierto.

El tamaño de la ventana y el panel lateral no se aplican en teléfonos. Sí se aplican los demás ajustes de estilo, los colores y el tamaño del texto. Puede configurar el tamaño del botón del chat en teléfonos en El botón del chat.