Cómo usar CSS personalizado para dar estilo al chat web

Objetivos del artículo

Cómo usar CSS personalizado para cambiar la apariencia del chat web de Klaviyo: el iniciador, la ventana de chat, las burbujas de mensaje y el Composer de mensajes. Aprenderás qué variables de tema y nombres de clase son seguros para segmentar, y cuáles se romperán cuando Klaviyo lance una actualización.

Este artículo aplica tanto si usas el chat web por sí solo como si lo usas como parte de Klaviyo Customer Hub. La interfaz de chat es la misma en ambos casos, por lo que el mismo CSS funciona para ambos.

Antes de empezar

Necesitarás lo siguiente:

• Un rol de Propietario, Administrador o Gerente
• Familiaridad con selectores CSS y propiedades personalizadas (variables CSS)

Antes de escribir CSS personalizado, revisa si los ajustes de diseño integrados ya hacen lo que necesitas. Los colores, las fuentes, la forma del botón y la posición del iniciador se pueden configurar sin código, y esos ajustes se mantienen tras las actualizaciones de Klaviyo. Recurre al CSS personalizado solo para lo que los ajustes de diseño no cubren.

Dónde agregar CSS personalizado

Dónde encuentras el editor de CSS personalizado depende de tu configuración.

Si usas Klaviyo Customer Hub

1. Ve a Klaviyo Customer Hub > Diseño.
2. Desplázate hasta la sección Personalizado en la parte inferior de la configuración de estilos.
3. Haz clic en Agregar CSS personalizado o edita el CSS que ya está ahí.
4. Haz clic en Guardar.

Si usas chat web independiente

1. Ve a Configuración > chat web > Diseño.
2. Desplázate hasta la sección Personalizado en la parte inferior de la configuración de estilos.
3. Haz clic en Agregar CSS personalizado o edita el CSS que ya está ahí.
4. Haz clic en Guardar.

Cómo se aplica el CSS personalizado

Tu CSS se agrega a una etiqueta de estilo en tu tienda, después de los propios estilos de Klaviyo. De esto se desprenden dos cosas:

• Tu CSS gana. Como se carga al final, tus reglas anulan los valores predeterminados de Klaviyo sin necesidad de !important en la mayoría de los casos.
• Tu CSS no está limitado al chat. Se aplica a toda la página. Incluye siempre el alcance de los selectores a un elemento de chat, en lugar de escribir reglas sin ámbito como button { … }, que afectarían a toda la tienda.

Empieza con las variables del tema

La forma más confiable de cambiar el estilo del chat web es sobrescribir las variables de tema de Klaviyo en un bloque :root. Estas son estables, se aplican en cascada correctamente en toda la interfaz y es mucho menos probable que se rompan que al dirigir elementos individuales.

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

Variables de mensajes de chat

Los mensajes del comprador (salientes) reutilizan intencionalmente los colores de la marca: la burbuja usa --atlas-button-primary y el texto usa --atlas-text-primary-inverse; ambos se configuran en los ajustes de diseño.

Variables de color y superficie

Variables de forma y espaciado

Variables de tipografía

Varias de estas ya están escritas en la configuración de diseño. Es preferible configurar las fuentes y los colores en la interfaz de configuración de diseño: usa las variables para valores que la interfaz no expone.

Dirige elementos con ganchos de clase

Cuando una variable del tema no funciona, segmenta elementos directamente. Klaviyo garantiza los nombres de clase a continuación.

Elementos del chat

La ventana de chat también incluye una clase que nombra la pantalla actual: .kl-hub-route-chat para el chat en sí. En el chat web independiente, esta siempre es .kl-hub-route-chat. En Klaviyo Customer Hub, cambia a medida que el comprador navega (.kl-hub-route-home, .kl-hub-route-orders, y así sucesivamente), lo que permite delimitar el CSS a una sola pantalla.

El botón de envío no tiene una clase dedicada. Apúntalo mediante el Composer:

.kl-hub-chat-input-wrapper .kl-hub-button-primary {
  background: #2f4f4f;
}

Elementos compartidos

Dar estilo de forma diferente a los mensajes del agente y del comprador

Esta es la solicitud más común y requiere un enfoque específico. Los globos del agente y del comprador comparten la misma .kl-hub-message clase; no hay una clase estable que los distinga, así que no puedes seleccionar uno directamente.

En su lugar, usa las variables del tema, que ya tratan estos dos de forma diferente:

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

Ejemplos

Cuadra todo

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 0;
}

Encabezados y botones en MAYÚSCULAS

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Haz que el launcher sea más grande con una sombra personalizada

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

El launcher establece varias propiedades directamente en el elemento, por lo que las reglas del launcher necesitan !important para surtir efecto. Este es el único lugar en el que se requiere de forma habitual.

Amplía la ventana de chat en el escritorio

@media (min-width: 900px) {
  .kl-hub-drawer {
    width: 480px;
  }
}

Si tu CSS no se guarda

Cuando guardas, Klaviyo revisa que el CSS se analice correctamente. Si no es así, verás CSS no válido. Revisa la sintaxis. y los cambios no se guardarán.

Una hoja de estilos solo se rechaza por completo cuando no genera ninguna regla, lo que normalmente significa que lo que pegaste no es CSS. Causas comunes:

• Pegar texto sin formato, HTML o una etiqueta style en lugar de reglas CSS
• Pegar parte de una declaración en lugar de una regla completa
• Una hoja de estilos en la que cada regla tiene un error de sintaxis

Lo que el CSS personalizado no puede hacer

• Cambia el texto. El CSS personalizado no puede editar el texto. Usa la configuración de diseño y contenido para eso.
• Reordena o cambia de posición los elementos más allá de lo que permite el diseño de CSS. La estructura del chat no se puede personalizar.
• Segmenta por clase las burbujas de agentes y compradores por separado. Usa las variables del tema, como se describió arriba.
• Sobrevive a los rediseños automáticamente. Los ganchos de clase y las variables son estables en las actualizaciones normales, pero un rediseño importante puede requerir que vuelvas a revisar el CSS. Vuelve a hacer pruebas después de lanzamientos importantes.

Recursos adicionales