Centro de ayuda
/
Customer Hub
/
Customer Hub
/
Crear y usar el Customer Hub
Qué aprenderás

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.

Antes de empezar

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

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 (sólo visible cuando el chat web está habilitado)

El cajón Klaviyo Customer Hub abierto en el sitio web de una marca de ejemplo y mostrando que el comprador está iniciando sesión en su cuenta de cliente.

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.

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, sigue los pedidos y guarda tu historial de compras".

La vista de la pestaña Para ti en Klaviyo Customer Hub muestra la llamada a la acción principal para un comprador que no ha iniciado sesión en una cuenta.

Para actualizar la llamada a la acción principal de tu interfaz Klaviyo Customer Hub:

  1. Abre la pestaña Customer Hub de Klaviyo en la navegación de la izquierda de Klaviyo.
  2. Haga clic en Configuración.
  3. Seleccione la pestaña Contenido.
  4. 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
      El menú Mensajes de bienvenida en los ajustes de Contenido de Klaviyo Customer Hub.
  5. Haz clic en Guardar
Diseñe su centro de atención al cliente de Klaviyo

Diseñe su centro de atención al cliente de Klaviyo

Para opciones de diseño para personalizar tu interfaz de Klaviyo Customer Hub:

  1. Navega hasta Klaviyo Customer Hub en la barra de navegación izquierda de Klaviyo.
  2. Seleccione Diseño.
  3. Abra el menú Estilo
    CHdesign10.jpg
  4. Enel menú Estilo, puede ajustar la siguiente 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 Centro de clientes de Klaviyo:
    • Fuentes
      • Fuente del encabezado
        Se utiliza para los encabezados de cada pestaña de Klaviyo Customer Hub. Elige Heredar del sitio para replicar automáticamente la fuente utilizada en otros encabezados de tu sitio.

        Ten en cuenta que también puedes añadir una fuente personalizada seleccionando Configurar fuente personalizada y, a continuación, introduciendo su nombre y tamaño. Esta fuente personalizada ya debe existir en la sección Fuentes de tu cuenta

      • Color del encabezado
        Se utiliza para el texto del encabezado en cada pestaña de Klaviyo Customer Hub.
      • Fuente de párrafo
        Se utiliza para el texto dentro de cada sección, bloque de contenido y botón. Elige Heredar del sitio para replicar automáticamente la fuente utilizada en otros párrafos de tu sitio.
      • Color del párrafo
        Se utiliza para todo el texto de los botones, bloques de contenido y secciones en Klaviyo Customer Hub.
    • Botones
      • Color de los botones
        El color de fondo de todos los botones de Klaviyo Customer Hub.
      • Color del texto de los botones
        El color del texto de todos los botones en Klaviyo Customer Hub. 
      • Mayúsculas y minúsculas del texto de los botones
        Las opciones de mayúsculas y minúsculas para el texto de todos los botones en Klaviyo Customer Hub.
    • Estilo

      • de forma
        La forma de los bordes de los bloques de contenido, los botones y las secciones en Klaviyo Customer Hub.
      • Color de fondo
        El color base de Klaviyo Customer Hub debajo de todo el texto, contenido bloque y extensiones.
    • diseño
      • Posición en el escritorio
        Desde dónde se desliza el cajón de Klaviyo Customer Hub (lado izquierdo o derecho de la ventana). Si tu marca utiliza un cajón para carritos, considera la posibilidad de utilizar un posicionamiento alineado a la izquierda para que no se solape con Klaviyo Customer Hub.
    • CSS personalizado
      Opcionalmente, puede aplicar estilos avanzados con CSS personalizado. Consulte la sección CSS personalizado más abajo para obtener más detalles.
  5. Haga clic en Publicar para que los cambios se apliquen.
Personalizar el centro de atención al cliente de Klaviyo widget

Personalizar el centro de atención al cliente de Klaviyo widget

Además de diseñar el propio Klaviyo Customer Hub, también puede personalizar el centro de control widget, que es un pequeño elemento flotante en su sitio web en el que los visitantes pueden hacer clic para abrir rápidamente la interfaz de Klaviyo Customer Hub. El centro de control widget funciona de manera muy similar a un formulario de adelanto, siguiendo a los visitantes a lo largo de su recorrido por su sitio web. 

Para personalizar el widget del centro:

  1. Seleccione Klaviyo Customer Hub en el menú de navegación izquierdo de Klaviyo.
  2. Seleccione Diseño.
  3. Abra el menú del widget.
    CHdesign11.jpg
  4. Puedes personalizar el lanzador del hub widget's:
    • Visibilidad
      Qué visitantes del sitio pueden ver y hacer clic en el widget.
    • Abrir configuración
      . ¿Qué página se abre en Klaviyo Customer Hub? 

    • de forma
      La forma de los bordes del widget.
    • Color
      El color del widget.
    • Posición
      Dónde flota el widget en una página web.
    • Espaciado
      Distancia desde la esquina izquierda/derecha y superior/inferior, dependiendo de la ubicación del widget.
  5. Haga clic en Publicar para ver los cambios en tiempo real.
CSS personalizado para Klaviyo 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 

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.

La sección CSS personalizado en la parte inferior del menú de ajustes de diseño de Klaviyo Customer Hub en Klaviyo.

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-program para 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

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

Recursos adicionales

¿Te ha resultado útil este artículo?
Utiliza este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar con el servicio de asistencia.

Descubre más sobre Klaviyo

Klaviyo Community
Conecta con compañeros, socios y expertos de Klaviyo para encontrar ideas, compartir información y resolver todas tus dudas.
Formación en tiempo real
Únete a una sesión en tiempo real con expertos de Klaviyo para conocer las prácticas recomendadas, cómo configurar funciones clave y mucho más.
Asistencia

Accede al servicio de asistencia a través de tu cuenta.

Asistencia por correo electrónico (prueba gratuita y cuentas de pago) Disponible 24/7

Asistencia por chat/virtual
La disponibilidad varía según la ubicación y el tipo de plan