Cómo usar CSS para personalizar el estilo de la ventana de tu WebChat

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.

⚠️ Atención: El Editor de CSS actúa exclusivamente sobre la ventana del chat, sin afectar otros elementos de la página donde el Web Chat está incorporado.

En caso de que quieras personalizar el botón flotante, es necesario aplicar los estilos directamente en el código de tu sitio.
👉 Mira algunos ejemplos de código al final de este artículo.

A continuación, verás cómo personalizar visualmente el Web Chat a través del Editor de CSS, incluyendo modificaciones en el encabezado, fondo de la conversación, globos de mensaje, fuente y campo de escritura.

¿Dónde modificar?

El editor se encuentra justo después del campo de selección del avatar. Haz clic en la flecha para expandirlo.

Cargando imagen

💡 Consejos

Usa exactamente los nombres de clases CSS presentados en esta documentación y agrega !important cuando se indique, de lo contrario, los cambios no tendrán efecto.
En los ejemplos, utilizamos el color amarillo #FFD300 para facilitar la visualización de las áreas modificadas.

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; }

Globos de conversación y fuente

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; }

Campo de escritura del usuario y acciones

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);
}

⚓

Personalizar el botón flotante: Ejemplos de código

👉 Ejemplo 1: Cambiar y centrar el ícono del botón flotante
(En este ejemplo, el botón recibe una imagen personalizada como ícono, que está centrada dentro del botón.)

Código CSS:

<body>
    <script src="https://static.zenvia.com/embed/js/zenvia-chat.hlg.min.js"></script>
    <script>
      var chat = new ZenviaChat('59aef0d85ebad512447fb2fa870bbd5a').embedded('button').build();
    </script>

    <style>
        .znv-chat .znv-float-button {
          background-image: url('http://s3-sa-east-1.amazonaws.com/zenvia-smart/omni-chat/1755610140928.png') !important;
          background-size: 100% !important;
          background-position: center !important;
        }
    </style>
</body>

👉 Ejemplo 2: Personalizar formato y colores del botón:
(En este ejemplo, se cambia el redondeo del botón, el color del borde y el color de fondo.)Código CSS:

<body>
    <script src="https://static.zenvia.com/embed/js/zenvia-chat.hlg.min.js"></script>
    <script>
      var chat = new ZenviaChat('59aef0d85ebad512447fb2fa870bbd5a').embedded('button').build();
    </script>

    <style>
        .znv-chat .znv-float-button {
          border-radius: 20% !important;
          border-color: rgb(0, 145, 255) !important;
          background-color: white !important;
        }
    </style>
</body>

Hola, Humans. ﻿¿En qué podemos ayudarte?