Cómo dar estilo a tu Customer Hub de Klaviyo
Objetivos de aprendizaje
Conoce las opciones de diseño para dar estilo a tu cajón de Klaviyo Customer Hub, y cómo puedes diseñarlo para que coincida con tu marca. Dado que la interfaz del Centro de Atención al Cliente de Klaviyo está arraigada en la experiencia del cliente, es una buena práctica diseñarla para que parezca una extensión de tu sitio web.
El Klaviyo Customer Hub para Shopify es compatible actualmente con las tiendas estándar y con Shopify Headless. Para WooCommerce, ve a https://help.klaviyo.com/hc/en-us/articles/47792369863451
Para comentarios sobre la funcionalidad de Klaviyo Customer Hub, correo electrónico customerhub@klaviyo.com.
Antes de empezar
Esta guía explica cómo personalizar el estilo de tu interfaz de Klaviyo Customer Hub. Antes de continuar, asegúrate de que las funciones/características de Klaviyo Customer Hub están activadas.
Más información sobre Klaviyo Customer Hub.
Opciones de diseño del centro de atención al cliente
El cajón de Klaviyo Customer Hub tiene múltiples pestañas personalizables:
- Para ti
- Pedidos
- Perfil
- Chat (solo visible cuando el chat web está habilitado)
Tienes varias opciones para personalizar el diseño en cada una de estas pestañas, incluyendo la edición de texto, colores, fuentes y mucho más. Las selecciones de personalización de estilo aparecen en cascada en cada pestaña del cajón de Klaviyo Customer Hub para garantizar una experiencia coherente y acorde con la marca para los visitantes de tu sitio.
Aunque la apariencia de la mayoría de los elementos del cajón de Klaviyo Customer Hub puede ajustarse, sus posiciones no. Actualmente sólo están disponibles las opciones generales de diseño.
Mientras editas los ajustes de diseño de tu Hub de Clientes Klaviyo en Klaviyo, utiliza el botón Ver en directo para ver los cambios realizados en la interfaz del hub en tu sitio web. Ten en cuenta que si tu Customer Hub de Klaviyo está activo, los cambios guardados se publicarán en tu sitio.
Personalice una llamada a la acción principal para cada pestaña.
Por defecto, cuando un comprador inicia sesión en su cuenta de cliente, Klaviyo muestra "Bienvenido, first.name" como título principal en la pestaña Para ti del cajón de Klaviyo Customer Hub. Este texto no es editable.
Sin embargo, para los compradores no autentificados, puedes escribir tu propio encabezamiento de Llamado a la acción para que aparezca encima del botón "Iniciar sesión" antes de que inicien la sesión. Esto puede ser útil para incentivar a los visitantes no autenticados a iniciar sesión e interactuar con tu interfaz de Klaviyo Customer Hub.
En el ejemplo siguiente, la llamada a la acción principal dice «Gana recompensas, realiza un seguimiento de los pedidos y guarda tu historial de compras».
Nota: las recompensas disponibles en "indicador" se muestran automáticamente si tienes:
- Un cupón estático configurado en el Centro de atención al cliente de Klaviyo, O BIEN
- Si tienes habilitadas las integraciones de fidelización (como Smile).
Para actualizar el Llamado principal a la acción para tu interfaz Klaviyo Customer Hub:
- Abra la pestaña Servicio - Klaviyo Customer Hub en Klaviyo's navegación de la izquierda.
- Haga clic en Configuración.
- En Mensajes de bienvenida, personaliza un llamado a la acción para que aparezca encima del botón "sign in" para los compradores no autentificados. Puedes hacer esto para cada pestaña del cajón de Klaviyo Customer Hub:
- Para ti
- Pedidos
- perfil
- Haz clic en Guardar.
Diseñe su centro de atención al cliente
Para opciones de diseño para personalizar tu interfaz de Klaviyo Customer Hub:
- Navega hasta Klaviyo Customer Hub en la barra de navegación izquierda de Klaviyo.
- Seleccione Diseño.
- Selecciona Hub en la parte superior de la vista previa.
- En el menú Estilo, puedes ajustar la configuración del idioma de visualización, las fuentes, el color y el estilo, y obtener una vista previa de cómo se verán estos ajustes en el lienzo de la interfaz del Centro de clientes de Klaviyo.
- Opcionalmente, puede aplicar estilos avanzados con CSS personalizado. Consulte la sección CSS personalizado más abajo para obtener más detalles.
- Consulta el artículo Soporte de idiomas y configuraciones regionales en el Centro de atención al cliente de Klaviyo para obtener más información sobre cómo seleccionar otro idioma.
- Haz clic en Guardar para aplicar los cambios.
Personalizar el widget del Centro de atención al cliente
Además de diseñar el propio Klaviyo Customer Hub, también puedes personalizar el hub widget, que es un pequeño elemento flotante en tu sitio web en el que los visitantes pueden hacer clic para abrir rápidamente la interfaz de Klaviyo Customer Hub. El widget presenta información oportuna a tus compradores, como mensajes de chat entrantes y comentarios al añadir artículos a su lista de favoritos. Recomendamos habilitar la interfaz de usuario del widget para fomentar una interacción significativa con los clientes, especialmente cuando el chat web y los favoritos están habilitados.
Para personalizar el widget del centro:
- Seleccione Centro de clientes en el menú de navegación izquierdo de Klaviyo.
- Seleccione Diseño.
- Selecciona el widget en la parte superior de la vista previa.
- En el menú General, puedes configurar qué compradores deben ver la página widget y qué vista del Centro de clientes de Klaviyo debe abrirse al hacer clic en widget.
- Elige qué compradores deben ver el widget en tu sitio web:
- Todos los compradores (reconocidos, conectados y desconectados): el widget aparece para todos.
- Compradores reconocidos o conectados: el widget solo aparece si Klaviyo reconoce a la persona (identificada) o si está conectada (autenticada). Esto es ideal para reducir el desorden para los visitantes nuevos, al tiempo que se mantiene una experiencia de alto contacto para los que regresan.
- Solo para compradores registrados: el widget solo aparece para aquellos que tienen una sesión activa en Shopify.
- Elige qué compradores deben ver el widget en tu sitio web:
- En el menú Estilo, puedes ajustar la configuración de Color y Estilo y obtener una vista previa de cómo se verán estos ajustes en el lienzo de la interfaz del widget del Centro de clientes de Klaviyo.
- Desde el menú Diseño puedes ajustar la posición del widget en tu sitio web.
- Haz clic en Guardar para aplicar los cambios.
Personalizar estados adicionales del widget
Puedes personalizar estados adicionales del widget seleccionando el cursor junto a Icono y navegando a otro estado del widget.
- El estado «Añadir al carrito » es visible en las páginas de detalles del producto. El widget personalizable anima a los compradores a realizar una compra o guardar un producto para más tarde cuando se han desplazado por debajo de la parte superior de la página de detalles del producto y el botón tradicional «Añadir al carrito» ya no es visible. Más información sobre cómo configurar el widget «Añadir al carrito» en el Centro de atención al cliente de Klaviyo.
CSS personalizado para Klaviyo Customer Hub
Si las opciones de diseño de Klaviyo Customer Hub no satisfacen tus necesidades de construcción de marca, puedes aplicar un estilo avanzado con CSS personalizado.
Aunque Klaviyo Customer Hub utiliza reajustes de CSS para evitar colisiones con el CSS de tu sitio, puede que necesites añadir CSS personalizado para abordar casos extremos o aplicar un estilo único, como cajón flotante o valores de radio de borde personalizados.
Implementar CSS personalizado para tu Customer Hub de Klaviyo implica editar el código de tu sitio. Esto sólo se recomienda a especialistas en marketing con conocimientos técnicos o a quienes tengan acceso a un desarrollador. Aunque nuestro producto hace CSS personalizado, nuestro equipo de asistencia no puede ayudarte a añadir CSS personalizado a Klaviyo Customer Hub más allá de la orientación general cubierta en esta documentación. Para mantener la seguridad de tus datos, el equipo de asistencia de Klaviyo no puede abrir tus archivos HTML.
Aplicar CSS personalizado
Añade cualquier CSS personalizado directamente a la sección CSS personalizado de la configuración de diseño de tu Centro de Clientes Klaviyo y asegúrate de guardar los cambios.
Todos los elementos básicos del Customer Hub de Klaviyo tienen nombres de clase prefijados con kl-hub-:
- Todos los elementos de texto tienen la clase
kl-hub-text, mientras que los encabezados tienen la clase kl-hub-heading - Los botones tienen la clase
kl-hub-button, y también incluyen su variante (por ejemplo, kl-hub-button-primary, kl-hub-button-secondary, etc.) - El propio cajón Klaviyo Customer Hub tiene la clase
kl-hub-drawer - Las entradas de texto tienen la clase
kl-hub-input - Todos los bloques de contenido tienen la clase
kl-hub-content-bloque, y también incluyen su nombre interno de bloque (por ejemplo, kl-hub-content-bloque-reward-programpara un bloque de contenido llamado "Reward program")
Esta no es una lista exhaustiva; puedes encontrar más inspeccionando el Customer Hub de Klaviyo con el depurador de tu navegador. Si un elemento tiene una clase que empieza por kl-hub-, es seguro utilizarlo para CSS personalizado.
Ejemplo de CSS
Si quisieras que todos los botones y encabezados del Customer Hub de Klaviyo estuvieran en mayúsculas, podrías escribir el siguiente CSS personalizado:
.kl-hub-button, .kl-hub-heading {
text-transform: uppercase;
}Recursos adicionales
- Primeros pasos con Klaviyo Customer Hub en Shopify
Conozca Klaviyo Customer Hub, una experiencia personalizada única para los visitantes de la tienda en línea que les guía desde el descubrimiento del producto hasta la compra y post-venta equipo de asistencia.
- primeros pasos con chat web
Descubre el chat web, un canal de comunicación bidireccional que puedes añadir a tu sitio web. El chat web se puede configurar por separado para que lo uses con Agente de Clientes y Helpdesk, pero también está diseñado para integrarse perfectamente en Klaviyo Customer Hub. El chat web permite a tu empresa mantener conversaciones en vivo y personalizadas con los visitantes de tu sitio web, para que puedan obtener fácilmente respuestas a sus preguntas o ayuda con sus problemas.
- Cómo crear bloques de contenido para Customer Hub
Aprenda a crear bloques de contenido para su Customer Hub de Klaviyo. Los bloques de contenido son bloques altamente personalizables que tienen acceso a Klaviyo datos del perfil que le permiten mostrar integraciones (p. ej. saldo de puntos de fidelidad), ofertas personalizadas y mucho más.
- Cómo configurar el widget «Añadir al carrito» en Klaviyo Customer Hub
Aprende a mostrar un widget interactivo «Añadir al carrito» en tus páginas de detalles de productos. El widget personalizable anima a los compradores a realizar una compra o guardar un producto para más tarde cuando se han desplazado por debajo de la parte superior de la página de detalles del producto y el botón tradicional «Añadir al carrito» ya no es visible.