Estilo con CSS personalizado para el Widget de chat

CSS personalizado

Si los ajustes de color y tema integrados no son suficientes, puedes rediseñar ambos widgets con tu propio CSS. El CSS se inyecta directamente en el widget, por lo que funciona aunque el widget se ejecute en un Shadow DOM al que las hojas de estilo de tu página no pueden acceder.

Disponible en planes Estándar y superiores, tanto para el widget flotante como para el Widget integrado, cada uno con su propio campo de CSS.

Dónde encontrarlo

Widget flotante: Panel → tu asistente → Canales → Widget de chat → Avanzado
Widget integrado: Panel → tu asistente → Canales → Chat integrado → Avanzado

La Vista previa en vivo junto al editor aplica tu CSS a medida que escribes. El campo acepta hasta 20.000 caracteres.

Selectores estables

Tu CSS se dirige a los elementos del widget a través de estas clases documentadas. Son un contrato estable: siguen funcionando tras las actualizaciones del widget.

Selector	Element	Widget
`.wca-widget`	Ventana de chat	Ambos
`.wca-header`	Encabezado / título	Ambos
`.wca-messages`	Lista de mensajes	Ambos
`.wca-message`	Cualquier mensaje	Ambos
`.wca-message--bot`	Mensaje del bot	Ambos
`.wca-message--user`	Mensaje del usuario	Ambos
`.wca-input`	Campo de entrada	Ambos
`.wca-input-container`	Área de entrada	Ambos
`.wca-prompt-button`	Botones de sugerencia	Ambos
`.wca-welcome`	Área de bienvenida	Ambos
`.wca-action-bar`	Action Bar	Solo flotante
`.wca-bubble`	Botón de chat flotante	Solo flotante
`.wca-speech-bubble`	Bocadillo junto al botón	Solo flotante

Advertencia: Solo estos selectores son estables. Todos los demás nombres de clases internas pueden cambiar sin previo aviso cuando se actualice el widget y pueden romper tus estilos. Vuelve a revisar tus estilos tras las actualizaciones del widget.

No se necesita `!important`

Tu CSS sobrescribe automáticamente los estilos integrados del widget; basta con selectores simples:

.wca-header {
  background: #0f172a;
}
.wca-message--bot {
  border-radius: 4px;
}

Técnicamente, el widget traslada sus estilos integrados a una capa de cascada de CSS cuando hay CSS personalizado, por lo que tus reglas (sin capa) siempre tienen prioridad, independientemente de la especificidad del selector.

Ejemplos

Rediseñar el botón de chat con una animación:

@keyframes wca-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.wca-bubble {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: wca-pulse 2s ease-in-out infinite;
}

Burbujas de mensaje cuadradas con un tamaño de fuente personalizado:

.wca-message--bot,
.wca-message--user {
  border-radius: 4px;
  font-size: 15px;
}

Estilos personalizados para la entrada:

.wca-input {
  border: 2px solid #0f172a;
  border-radius: 8px;
}
.wca-input::placeholder {
  color: #94a3b8;
}

Limitaciones

Posición y tamaño del widget flotante (desplazamientos, ancho, alto) se controlan desde la configuración del panel, no mediante CSS, ya que se aplican como estilos en línea
Otras clases internas más allá de los selectores documentados .wca-* no son estables
Se permiten las referencias @import y las url() externas, pero cuentan para el límite de caracteres y aumentan el tiempo de carga

Buenas prácticas

Prioriza la configuración integrada para colores, fuentes e imágenes; usa CSS personalizado solo para lo que la configuración no pueda cubrir
Limítate a los selectores documentados para que las actualizaciones del widget no rompan tus estilos
Revisa tu sitio en producción tras las actualizaciones del widget, especialmente si aplicaste estilos fuera de los selectores estables
Mantenlo reducido, unas pocas reglas bien dirigidas son más fáciles de mantener que un rediseño completo del tema