Cómo crear bloques HTML y CSS personalizados para Klaviyo Customer Hub

Qué aprenderás

Cómo crear un bloque personalizado para tu Klaviyo Customer Hub con tu propio HTML y CSS. Úsalo para crear contenido de marca, como tarjetas de progreso de fidelización, módulos promocionales y tablas comparativas, cuando los campos estándar del bloque de contenido no sean lo bastante flexibles.

Antes de empezar

Esta guía se basa en bloques de contenido. Si no has creado un bloque de contenido antes, empieza con Cómo crear bloques de contenido para Klaviyo Customer Hub. Para cambiar la apariencia de todo Klaviyo Customer Hub en lugar de un solo bloque, consulta Cómo dar estilo a Klaviyo Customer Hub.

Qué puedes hacer con bloques HTML personalizados

Un bloque HTML personalizado es un bloque de contenido avanzado con dos campos de código: uno para HTML y otro para CSS. HTML define la estructura y el contenido del bloque, y CSS controla el estilo, el diseño y el comportamiento adaptable. Usa bloques HTML personalizados para:

• Muestra una tarjeta de progreso del programa de fidelización o un resumen de recompensas con datos de puntos o de nivel de un perfil de Klaviyo.
• Crea una tabla comparativa, por ejemplo para explicar los niveles de membresía o los planes.
• Crea un banner promocional o un módulo que coincida con tu marca.
• Organiza el contenido de maneras que los campos estándar de encabezado, párrafo e imagen no permiten.
• Añade funcionalidades, como una lista de deseos de terceros o una herramienta de reseñas, haciendo referencia a un elemento personalizado definido en tu sitio.

Los bloques de HTML personalizado aparecen en la pestaña Para ti junto con los demás bloques de contenido, y también puedes usarlos en bloques de contenido del sitio. El estado de inicio de sesión, la visibilidad basada en grupos, la programación y la configuración del contexto de visualización funcionan de la misma manera que en otros bloques de contenido.

Qué se admite y qué no

Klaviyo depura tu HTML y CSS, y limita el alcance de tu CSS al bloque para que no pueda cambiar el resto de tu Klaviyo Customer Hub ni de tu sitio web. Ten en cuenta estos límites:

• Compatible: HTML para la estructura y el contenido, CSS para el estilo y el diseño, etiquetas de personalización de Klaviyo para los datos del perfil y elementos personalizados definidos en tu sitio para cualquier funcionalidad añadida.
• JavaScript se encuentra en el sitio, no en el bloque: No puedes escribir JavaScript directamente en el campo HTML. Todo lo que introduzcas ahí se elimina y no se guarda. Para añadir funcionalidad, incluidas integraciones de terceros, define un elemento personalizado en tu propio sitio y haz referencia a él en tu bloque. Consulta Integrar herramientas de terceros con elementos personalizados a continuación.
• No compatible: CSS que afecte a cualquier elemento fuera de tu bloque, como el estilo de toda la página, o ediciones del marcado de los bloques nativos de Klaviyo.
• Datos: cualquier dato que muestres debe proceder de las propiedades de perfil de Klaviyo a través de etiquetas de personalización. Los datos de eventos no se admiten.

Crear un bloque HTML personalizado

1. Ve a Klaviyo Customer Hub en la pestaña Sitio web.
2. Selecciona Diseño en la navegación de Klaviyo Customer Hub.
3. Haz clic en Edita tu Hub para abrir el editor de Klaviyo Customer Hub.
4. Selecciona el «+» en la barra de navegación izquierda para añadir un bloque de contenido
5. Haz clic en Crea el tuyo y, luego, elige HTML en la parte superior del panel de contenido para usar campos independientes de HTML y CSS.
6. Introduce un Nombre interno. Klaviyo usa este nombre para informar sobre los clics en el bloque, y no puedes cambiarlo después de crear el bloque.
7. Introduce el código en los campos HTML y CSS. Consulta Escribe tu HTML y CSS a continuación.
8. Configura quién ve el bloque en función del estado de inicio de sesión, la visibilidad basada en grupos, la programación y el contexto de visualización.
9. Revisa la vista previa en vivo y resuelve cualquier advertencia de validación. Con HTML seleccionado, haz clic en Publicar para guardar el bloque. Para mostrarlo en el sitio, Klaviyo Customer Hub también debe estar activo.

Escribe el HTML y el CSS

Añade tu HTML

Usa el campo HTML para crear la estructura del bloque con elementos estándar como encabezados, párrafos, listas, enlaces, imágenes y tablas. Crea enlaces a páginas de tu sitio con etiquetas de anclaje normales. Como no se puede escribir JavaScript en el bloque, los botones y enlaces deben apuntar a una URL. Para cualquier cosa más interactiva, usa un elemento personalizado.

Aplicar estilo con CSS

Usa el campo CSS para controlar el espaciado, el color, la tipografía y el diseño adaptable. Tu CSS solo se aplica a este bloque. De forma predeterminada, un bloque HTML personalizado tiene un estilo que coincide con el de tus otros bloques de contenido, así que solo tienes que escribir CSS para las partes que quieras cambiar.

• Asigna a los elementos nombres de clase propios, como rewards-card, y selecciona esas clases en el CSS.
• Añade @media reglas para que el bloque se vea bien en pantallas pequeñas.
• Usa font-family: inherit para que el texto coincida con las fuentes que elegiste en la pestaña Estilo.

Añadir personalización

Usa etiquetas de personalización de Klaviyo en el HTML para mostrar datos del perfil, como un saldo de puntos de fidelidad. Incluye siempre un valor predeterminado para que el bloque no muestre espacios en blanco cuando un comprador no haya proporcionado los datos. Los datos del perfil solo aparecen para los compradores que han iniciado sesión o han sido identificados. El resto ve el valor predeterminado.

Ejemplo: tarjeta de puntos de fidelidad

Este ejemplo muestra el nivel y el saldo de puntos de un comprador, con un botón que enlaza a la página de recompensas. Sustituye los nombres de las propiedades (loyalty_points y Membership Tier) por las propiedades de perfil que sincroniza tu integración de fidelización y actualiza la URL del enlace.

<div class="rewards-card">
  <p class="rewards-eyebrow">{{ person|lookup:'Membership Tier'|default:'Member' }} status</p>
  <h3 class="rewards-points">{{ person|lookup:'loyalty_points'|default:'0'|floatformat:0 }} points</h3>
  <p class="rewards-copy">Redeem your points for discounts on your next order.</p>
  <a class="rewards-button" href="/pages/rewards">Redeem rewards</a>
</div>

.rewards-card {
  padding: 20px;
  border-radius: 12px;
  background: #f6f1ea;
  color: #232323;
  font-family: inherit;
}

.rewards-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rewards-points {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
}

.rewards-copy {
  margin: 0 0 16px;
  font-size: 14px;
}

.rewards-button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #232323;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}

@media (max-width: 480px) {
  .rewards-card {
    padding: 16px;
  }

  .rewards-points {
    font-size: 24px;
  }
}

Ejemplo: tabla comparativa de membresías

Este ejemplo compara dos niveles de membresía. El contenedor permite que la tabla se desplace horizontalmente en pantallas estrechas en lugar de romper el diseño.

<div class="compare-wrap">
  <table class="compare">
    <thead>
      <tr>
        <th></th>
        <th>Standard</th>
        <th>VIP</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Free shipping</th>
        <td>Orders over $75</td>
        <td>Always</td>
      </tr>
      <tr>
        <th scope="row">Early access</th>
        <td>No</td>
        <td>Yes</td>
      </tr>
      <tr>
        <th scope="row">Birthday reward</th>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>

.compare-wrap {
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.compare th,
.compare td {
  padding: 10px 12px;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
}

.compare thead th {
  background: #f6f1ea;
}

Integra herramientas de terceros con elementos personalizados

No puedes escribir JavaScript directamente en un bloque HTML personalizado, pero aun así puedes añadir funcionalidad basada en JavaScript haciendo referencia a un elemento personalizado que defina tu sitio. Un elemento personalizado es una etiqueta HTML reutilizable con un nombre con guion, como <wishlist-widget>, que un desarrollador registra en JavaScript en tu escaparate. El bloque solo contiene la etiqueta, y el código del sitio hace el trabajo. Usa este enfoque para mostrar contenido de herramientas de terceros, como listas de deseos, reseñas o aplicaciones de fidelización.

Cómo funciona

1. El equipo de desarrollo, o la aplicación de terceros, define el elemento personalizado en la tienda online. Esto suele hacerse a través del tema o del propio script de la aplicación.
2. En el campo HTML, añade la etiqueta donde quieras que aparezca el elemento. Se permite cualquier nombre de etiqueta que contenga un guion.
3. De forma opcional, pasa los datos de perfil al elemento como atributos mediante etiquetas de personalización.
4. Publica el bloque. Cuando Klaviyo Customer Hub se carga en una página donde el sitio ha definido el elemento, el código del sitio lo representa dentro del bloque.

Este ejemplo coloca un elemento de lista de deseos en un bloque y le pasa la dirección de email del comprador. El enlace dentro de la etiqueta es contenido de reserva que aparece si el elemento no está definido en la página. Sustituye el nombre de la etiqueta y los atributos por los que utiliza tu herramienta de terceros.

<div class="wishlist-block">
  <h3>Your wishlist</h3>
  <wishlist-widget customer-email="{{ person.email }}" max-items="4">
    <a href="/pages/wishlist">View your wishlist</a>
  </wishlist-widget>
</div>

Aspectos que deben tenerse en cuenta

• El elemento debe definirse en el sitio. Solo funciona en las páginas en las que el sitio ha cargado el script que lo define. Klaviyo no carga scripts de terceros por ti. Añade contenido alternativo dentro de la etiqueta para que los compradores vean algo útil si el elemento no está disponible.
• Personalization funciona en atributos. Se aplican las mismas reglas que en cualquier otra parte del bloque. Los datos del perfil solo aparecen para compradores que hayan iniciado sesión o estén identificados, así que incluye un valor predeterminado para el resto.
• Los elementos personalizados heredan los estilos del sitio. Klaviyo Customer Hub no se renderiza dentro de un iframe ni de un shadow DOM, así que el elemento personalizado adopta el CSS del sitio y puede verse afectado por él. También puedes aplicar estilo a la etiqueta del elemento desde el CSS del bloque.
• Escribe el código JavaScript en el sitio, no en el bloque. Cualquier código JavaScript que introduzcas en el campo HTML se elimina y no se guarda. Define la funcionalidad en un elemento personalizado del sitio y, a continuación, haz referencia a ese elemento desde el bloque.
• Eres responsable del código y los datos de terceros. Antes de pasar datos de perfil a una herramienta de terceros, asegúrate de que hacerlo cumpla con tus obligaciones de privacidad. El servicio de asistencia de Klaviyo no puede solucionar problemas de tu elemento personalizado ni de la herramienta de terceros que hay detrás.

Usa HTML personalizado en bloques onsite

El HTML personalizado funciona de la misma manera en los bloques de contenido del sitio como en la pestaña Para ti. Creas el bloque en el mismo editor de bloques de contenido mediante los campos HTML y CSS, y se aplica todo lo de este artículo, incluidas las etiquetas de personalización, los elementos personalizados y el seguimiento de clics.

Ten en cuenta estos puntos cuando el bloque se muestre en la tienda:

• El CSS del sitio puede afectar al bloque. Los bloques onsite se renderizan directamente en la página, por lo que los estilos del sitio pueden influir en su aspecto. Comprueba el bloque en la página en vivo después de publicarlo.
• La vista previa puede diferir de la página activa. La vista previa del editor no puede reproducir todos los estilos de tu sitio.
• Los elementos personalizados deben cargarse en todas las páginas donde aparezca el bloque. Asegúrate de que el script que define tu elemento personalizado se cargue en cada página donde se muestre el bloque.

Usa HTML personalizado en los bloques de contenido en el sitio web

El HTML personalizado también funciona en los bloques de contenido del sitio, que se muestran directamente en las páginas de la tienda, en lugar de dentro del panel desplegable de Klaviyo Customer Hub. Los creas en el mismo editor de bloques de contenido, y se aplican las mismas reglas: elige HTML para usar campos separados de HTML y CSS, usa etiquetas de personalización para los datos de perfil y haz referencia a elementos personalizados para cualquier funcionalidad añadida. Algunas cosas funcionan de forma diferente en el sitio:

• El CSS de tu sitio tiene más influencia. El bloque se renderiza directamente en la página, por lo que los estilos del sitio pueden afectarlo más que dentro del panel deslizable de Klaviyo Customer Hub. Prueba el CSS en la página activa.
• Es posible que la vista previa no coincida exactamente con tu página. Usa la vista previa en el sitio para comprobar el bloque y, a continuación, confirma cómo se ve el bloque publicado en tu tienda.
• Los elementos personalizados deben cargarse en todas las páginas donde aparezca el bloque. Si haces referencia a un elemento personalizado, asegúrate de que el script que lo define se cargue en cada página en la que se muestre el bloque del sitio.

Previsualiza y prueba el bloque

La vista previa se actualiza a medida que editas el HTML y el CSS. Si hay un error en el código, el editor muestra un mensaje de validación para que puedas corregirlo antes de publicar. Antes de publicar:

• Usa Vista previa como para seleccionar un perfil y comparar las vistas de sesión iniciada y sesión cerrada.
• Prueba con un perfil al que le faltan los datos que usan tus etiquetas de personalización para confirmar que los valores predeterminados se ven bien.
• Comprueba el bloque en anchuras móviles y de escritorio.

Supervisa el rendimiento del bloque

Klaviyo realiza un seguimiento de cada clic en un bloque HTML personalizado como un evento Customer Hub clicked on content block, usando el nombre interno del bloque, y lo registra del mismo modo que otros bloques de contenido. Klaviyo registra si se ha hecho clic en el bloque, no en qué enlace o botón individual dentro de él se ha hecho clic.

Prácticas recomendadas

• Mantén la sencillez. Empieza con el estilo predeterminado y sobrescribe solo lo que necesites.
• Protege los datos personales. Si un bloque se muestra a compradores que han iniciado sesión o que son reconocidos, evita incluir información personal confidencial. Eres responsable de la privacidad de los datos que añadas a bloques personalizados.
• Establece siempre valores predeterminados. Los visitantes anónimos y los perfiles con datos faltantes deberían seguir viendo un bloque completo.
• Diseña priorizando la experiencia móvil. La mayoría de las visitas a Klaviyo Customer Hub se producen en pantallas pequeñas, así que prueba primero los diseños estrechos.
• Nombra los bloques claramente. Los nombres internos se usan para la elaboración de informes y no se pueden cambiar más tarde.

Solución de problemas

Mi bloque no se publica

Comprueba los campos de HTML y CSS para ver los mensajes de validación, corrige los errores y vuelve a publicar. Si el bloque depende de JavaScript, ten en cuenta que el JavaScript introducido en el campo HTML se elimina y no se guarda. Traslada esa funcionalidad a un elemento personalizado del sitio y haz referencia a él en el bloque.

Mis estilos no se aplican

El CSS está limitado al bloque, así que los selectores deben coincidir con elementos dentro de tu propio HTML. Comprueba que no haya errores tipográficos en los nombres de clase. El CSS no puede aplicar estilos a nada fuera del bloque.

Personalization muestra texto en blanco o predeterminado

Los datos del perfil solo aparecen para compradores que hayan iniciado sesión o hayan sido identificados. Confirma que el nombre de la propiedad en la etiqueta coincide exactamente con las propiedades de perfil, incluida la capitalización, y añade un valor predeterminado.

El bloque se ve diferente en mi sitio que en la vista previa

El CSS del sitio puede influir en cómo se renderiza Klaviyo Customer Hub, especialmente en el caso de los bloques en el sitio, que se muestran directamente en la página. Comprueba el bloque publicado en el sitio activo y ajusta el CSS según sea necesario.

Mi elemento personalizado está en blanco o no se muestra

El elemento solo se renderiza en las páginas en las que el sitio ha cargado el script que lo define. Confirma que el script se carga en cada página en la que se muestra el bloque y comprueba que el nombre de la etiqueta en el HTML coincide con el nombre que registró el desarrollador. Si en su lugar ves el contenido alternativo, el elemento no está definido en esa página.

Necesito ayuda para escribir código

El equipo de asistencia de Klaviyo no puede escribir ni depurar HTML y CSS personalizados por ti. Si necesitas ayuda, trabaja con un desarrollador o con un socio de Klaviyo.