El Editor de CSS disponible en la configuración de apariencia del canal Web Chat permite personalizaciones avanzadas en la interfaz de la ventana de chat. Está recomendado cuando los ajustes estándar (como color, avatar y logo) no cumplen con los requisitos del proyecto, ya sea por necesidades del negocio o criterios visuales.

A continuación, te mostramos cómo personalizar visualmente el Web Chat mediante el Editor de CSS, incluyendo cambios en el encabezado, fondo de la conversación, globos de mensaje, fuente y campo de escritura.

¿Dónde modificar?

Encabezado (header)

Cambio	Código CSS	Resultado
Cambiar el color de fondo del encabezado (el color detrás del logo)	.chat-header { background: #FFD300 !important; }
Eliminar el encabezado (para que no se muestre ni el logo ni el espacio del encabezado)	.chat-header { display: none !important; }

Fondo de la conversación (background)

Modificación	Código CSS	Resultado
Cambiar color de fondo de la conversación	body { background-color: #FFD300 !important; }
Insertar imagen en el fondo de la conversación. Se requiere el enlace de la imagen.	body { background-image: url(enlace) !important; }

Modificación	Código CSS	Resultado
Cambiar tamaño de la fuente	.message-thread .message { font-size: 20px !important; }
Cambiar color de la fuente	.message-received .message-content { color: #FFD300 !important; }
Cambiar color de la fuente de la respuesta del usuario	.message-sent .message-content { color: #FFD300 !important; }
Cambiar color del globo	.message-received .message-content { background-color: #FFD300 !important; }
Cambiar color del globo de respuesta del usuario	.message-sent .message-content { background-color: #FFD300 !important; }

Modificación	Código CSS	Resultado
Quitar clip de carga de archivo	.chat-footer form .clip.enabled { display: none !important; }
Quitar campo de escritura	.chat-footer { display: none !important; } .message-thread { margin-bottom: 0px; } .message-thread-wrapper { min-height: calc(100vh - 22px); }