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

Qué aprenderás

Cómo usar CSS personalizado para cambiar el aspecto del chat web de Klaviyo: el launcher, la ventana de chat, las burbujas de mensajes y el Composer de mensajes. Aprenderás a qué variables de tema y nombres de clase se puede apuntar de forma segura, y cuáles se romperán cuando Klaviyo publique una actualización.

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

Antes de empezar

Necesitarás:

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

Antes de escribir CSS personalizado, comprueba si la configuración de diseño integrada ya hace lo que necesitas. Los colores, las fuentes, la forma del botón y la posición del launcher se pueden configurar sin código, y esa configuración se mantiene tras las actualizaciones de Klaviyo. Recurre al CSS personalizado solo para lo que no cubra la configuración de diseño.

Dónde añadir tu CSS personalizado

Dónde encuentras el editor de CSS personalizado depende de la 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 estilo.
3. Haz clic en Añadir CSS personalizado o edita el CSS que ya está ahí.
4. Pulsa 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 estilo.
3. Haz clic en Añadir CSS personalizado o edita el CSS que ya está ahí.
4. Pulsa Guardar.

Cómo se aplica el CSS personalizado

El CSS se añade a una etiqueta de estilo en el escaparate, después de los propios estilos de Klaviyo. De esto se desprenden dos cosas:

• Tu CSS se impone. 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. Limita siempre el alcance de los selectores a un elemento de chat en lugar de escribir reglas sin calificar como button { … }, que afectarían a toda la tienda.

Empezar con variables de tema

La forma más fiable de cambiar el estilo del chat web es sobrescribir las variables de tema de Klaviyo en un bloque :root. Son estables, se propagan correctamente por toda la interfaz y es mucho menos probable que se rompan que si se segmentan elementos individuales.

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

Variables de mensajes de chat

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

Variables de color y superficie

Variables de forma y espaciado

Variables tipográficas

Varios de ellos ya están escritos a partir de la configuración de diseño. Es preferible configurar las fuentes y los colores en la IU de configuración de diseño (usa las variables para los valores que la IU no expone).

Orientar elementos con enlaces de clase

Cuando una variable de tema no sea suficiente, selecciona elementos directamente. Klaviyo garantiza los nombres de clase que aparecen a continuación.

Elementos de chat

La ventana del chat también incluye una clase que nombra la pantalla actual (.kl-hub-route-chat) para el propio chat. En el chat web independiente, esto 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 te permite delimitar el CSS a una sola pantalla.

El botón de envío no tiene una clase dedicada. Oriéntalo a través del Composer:

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

Elementos compartidos

Aplicar un estilo diferente a los mensajes de los agentes y de los compradores

Esta es la solicitud más común y necesita un enfoque específico. Las burbujas de agentes y compradores comparten el único mensaje .kl-hub Clase: no hay ninguna clase estable que los distinga, por lo que no puedes seleccionar una directamente.

En su lugar, usa las variables del tema, que ya tratan a ambas 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 iniciador 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 lanzador establece varias propiedades directamente en el elemento, por lo que las reglas del lanzador necesitan !important para surtir efecto. Este es el único caso en el que se requiere de forma habitual.

Amplía la ventana del chat en el escritorio

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

Si el CSS no se guarda

Cuando guardas, Klaviyo comprueba que el CSS se analiza correctamente. Si no es así, verás El CSS no es válido; comprueba la sintaxis. y los cambios no se guardarán.

Una hoja de estilo solo se rechaza directamente cuando no produce ninguna regla, lo que normalmente significa que lo que pegaste no es CSS. Causas habituales:

• Pegar texto sin formato, HTML o una etiqueta de estilo 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. Para eso, usa la configuración de diseño y contenido.
• Reordenar o reposicionar elementos más allá de lo que permite el diseño CSS. La estructura del chat no se puede personalizar.
• Dirige las burbujas del agente y del comprador por separado por clase. Usa las variables del tema, como se describe arriba.
• Resiste a los rediseños automáticamente. Los enlaces de clase y las variables son estables en las actualizaciones habituales, pero un rediseño importante puede requerir revisar el CSS. Vuelve a probar después de las versiones principales.

Recursos adicionales