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 → Diseño y contenido → Botón de chat, justo debajo de Efecto de burbuja
• 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.

Preajustes de efecto de burbuja

El widget flotante ofrece Sin efecto, Pulsar, Flotar, Oscilar y Brillar encima del editor. Al seleccionar un efecto se añade un bloque gestionado y claramente marcado. Cambiar el efecto solo sustituye ese bloque; Sin efecto lo elimina. Las reglas manuales y las imágenes cargadas no se modifican, y el límite de 20.000 caracteres se comprueba antes de insertar el bloque.

Los efectos tienen el mismo acceso desde el plan Estándar que el CSS personalizado e incluyen una alternativa prefers-reduced-motion para mostrar un botón estático cuando el visitante solicita menos movimiento.

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.

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

Crear el anillo expansivo del efecto Pulsar:

@keyframes wca-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bubble-color, #2563eb) 70%, transparent);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px color-mix(in srgb, var(--bubble-color, #2563eb) 0%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bubble-color, #2563eb) 0%, transparent);
  }
}

.wca-bubble {
  animation: wca-pulse 2s infinite ease-in-out;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.wca-speech-bubble {
  border-radius: 16px !important;
}

.wca-speech-bubble::before,
.wca-speech-bubble::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .wca-bubble {
    animation: none !important;
  }
}

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