Cómo dar estilo a tu Customer Hub de Klaviyo
Qué aprenderás
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.
Actualmente, el Customer Hub para Shopify admite escaparates estándares y Shopify Headless. Para obtener el WooCommerce, ve a https://help.klaviyo.com/hc/es-es/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 de Klaviyo Customer Hub están habilitadas.
Más información sobre Klaviyo Customer Hub.
Opciones de diseño del Centro de clientes de Klaviyo
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, nombre". como encabezamiento 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 autenticados, puedes escribir tu propia llamada 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, haz un seguimiento de los pedidos y guarda tu historial de compras".
Nota: el indicador de «recompensas disponibles» se muestra automáticamente si tienes:
- Un cupón estático configurado en Customer Hub, O
- Si tienes habilitada una integración de fidelización (como Smile).
Para actualizar la llamada a la acción principal de 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 una llamada 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 de Klaviyo
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.
- Desde el menú Estilo puedes ajustar el idioma de visualización, las fuentes, el color y los ajustes de estilo y previsualizar cómo se verán estos ajustes en el lienzo de la interfaz de Customer Hub
- 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 Asistencia de idiomas y configuración regional en Customer Hub para obtener más información sobre cómo seleccionar otro idioma.
- Haz clic en Guardar para activar los cambios.
Personalizar el centro de atención al cliente de Klaviyo widget
Además de diseñar el Customer Hub en sí, también puedes personalizar el widget del hub, 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 del Customer Hub. El widget presenta información oportuna a tus compradores, como los mensajes de chat entrantes y los comentarios al añadir artículos a su lista de favoritos. Te recomendamos que habilites la interfaz de usuario de widget para generar una interacción significativa con los clientes, sobre todo cuando el chat web y los favoritos estén habilitados.
Para personalizar el widget del centro:
- Seleccione Klaviyo Customer Hub en el menú de navegación izquierdo de Klaviyo.
- Seleccione Diseño.
- Selecciona el Widget en la parte superior de la vista previa.
- Desde el menú General puedes ajustar qué compradores deben ver el widget y qué Vista del Customer Hub debe abrir cuando se hace clic en el widget.
- Elige qué compradores deben ver el widget en tu sitio:
- Todos los compradores (reconocidos, conectados y desconectados): el widget es para todo el mundo.
- Compradores reconocidos o con la sesión iniciada: el widget solo aparece si Klaviyo reconoce a la persona (identificada) o si ha iniciado sesión (autenticada). Esto es ideal para reducir el desorden de los nuevos visitantes y ofrecer una experiencia de alto contacto a los visitantes que regresan.
- Solo compradores con la sesión iniciada: el widget solo aparece para aquellos con una sesión de Shopify activa.
- Elige qué compradores deben ver el widget en tu sitio:
- Desde el menú Estilo puedes ajustar los ajustes de Color y Estilo y previsualizar cómo se verán estos ajustes en el lienzo de la interfaz de Widget de Customer Hub
- Desde el menú Diseño puedes ajustar cómo se posiciona el widget en tu sitio web.
- Haz clic en Guardar para activar los cambios.
Personalizar estados de Widget adicionales
Puedes personalizar estados de widget adicionales al seleccionar el símbolo de intercalación junto a Icon y navegar a otro estado de 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 hacer una compra o guardar un producto para más tarde, cuando se hayan desplazado por debajo de la parte superior de la página de detalles del producto, cuando el botón tradicional "Añadir al carrito" ya no sea visible. Obtén más información sobre cómo configurar el Widget "Añadir al carrito" en Customer Hub.
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 ofrece asistencia para 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 sus variantes (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 Centro de Clientes 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
- Introducción a 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 poscompra asistencia.
- Primeros pasos con el chat web
Aprende sobre el chat web, que es un canal de comunicación bidireccional que puedes añadir a tu sitio web. El chat web se puede configurar por sí solo para que lo uses con Customer Agent y Helpdesk, pero también está diseñado para ser una parte fluida de Customer Hub. El chat web permite a tu empresa interactuar en conversaciones en directo y personalizadas con los visitantes de tu sitio web para que puedan obtener fácilmente respuestas a sus preguntas o asistencia con problemas.
- Cómo crear contenido bloque para Klaviyo 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 Customer Hub
Aprende a mostrar un Widget interactivo de Añadir al Carrito en tus páginas de detalles de productos. El widget personalizable anima a los compradores a hacer una compra o guardar un producto para más tarde, cuando se hayan desplazado por debajo de la parte superior de la página de detalles del producto, cuando el botón tradicional "Añadir al carrito" ya no sea visible.