Comment créer des blocs HTML et CSS personnalisés pour Klaviyo Customer Hub

Objectif de cet article

Comment créer un bloc personnalisé pour votre Klaviyo Customer Hub à l’aide de votre propre HTML et CSS. Utilisez-le pour créer du contenu à votre image, comme des cartes de progression de fidélité, des modules promotionnels et des tableaux comparatifs, lorsque les champs du bloc de contenu standard ne sont pas suffisamment flexibles.

Avant de commencer

Ce guide s’appuie sur les blocs de contenu. Si vous n’avez jamais créé de bloc de contenu, commencez par Comment créer des blocs de contenu pour Klaviyo Customer Hub. Pour modifier l’apparence de l’ensemble de votre Klaviyo Customer Hub plutôt que d’un seul bloc, consultez Comment styliser votre Klaviyo Customer Hub.

Ce que vous pouvez faire avec des blocs HTML personnalisés

Un bloc HTML personnalisé est un bloc de contenu avancé comprenant deux champs de code : un pour le HTML et un pour le CSS. Le HTML définit la structure et le contenu du bloc, et le CSS contrôle son style, sa mise en page et son comportement responsive. Utiliser des blocs HTML personnalisés pour :

• Affichez une carte de progression de fidélité ou un récapitulatif des récompenses à l’aide des points ou des données de niveau d’un profil Klaviyo.
• Créez un tableau comparatif, par exemple pour expliquer les niveaux d’adhésion ou les forfaits.
• Créez une bannière ou un module promotionnel qui correspond à votre marque.
• Mettez en page le contenu de manières que les champs d’en-tête, de paragraphe et d’image standard ne permettent pas.
• Ajoutez des fonctionnalités, telles qu’une liste de souhaits tierce ou un outil d’avis, en faisant référence à un élément personnalisé défini sur votre site.

Les blocs HTML personnalisés s’affichent dans l’onglet Pour vous aux côtés de vos autres blocs de contenu, et vous pouvez également les utiliser dans des blocs de contenu sur site. Les paramètres de statut de connexion, de visibilité par groupe, de planification, et de contexte d’affichage fonctionnent de la même manière que pour les autres blocs de contenu.

Ce qui est pris en charge et ce qui ne l’est pas

Klaviyo assainit votre code HTML et CSS, et délimite votre CSS au bloc afin qu’il ne puisse pas modifier le reste de votre Klaviyo Customer Hub ni de votre site web. Gardez ces limites à l’esprit :

• Pris en charge : HTML pour la structure et le contenu, CSS pour le style et la mise en page, les tags de personnalisation Klaviyo pour les données de profil, et les éléments personnalisés définis sur votre site pour toute fonctionnalité ajoutée.
• JavaScript s’exécute sur votre site, pas dans le bloc : Vous ne pouvez pas écrire du JavaScript directement dans le champ HTML. Tout ce que vous saisissez ici est supprimé et n’est pas enregistré. Pour ajouter des fonctionnalités, y compris des intégrations tierces, définissez un élément personnalisé sur votre propre site, puis référencez-le dans votre bloc. Consultez Intégrer des outils tiers avec des éléments personnalisés ci-dessous.
• Non pris en charge : CSS qui affecte tout ce qui se trouve en dehors de votre bloc, comme le style appliqué à l’ensemble de la page, ou les modifications apportées au balisage des blocs natifs de Klaviyo.
• Données : Toutes les données que vous affichez doivent provenir des propriétés de profil Klaviyo via des tag de personnalisation. Les données d’événement ne sont pas prises en charge.

Créer un bloc HTML personnalisé

1. Accédez à Klaviyo Customer Hub sous l’onglet Site web.
2. Sélectionnez Design dans la navigation de Klaviyo Customer Hub.
3. Cliquez sur Modifier votre Hub pour ouvrir l’éditeur de Klaviyo Customer Hub.
4. Sélectionnez le « + »dans la barre de navigation de gauche pour ajouter un bloc de contenu
5. Cliquez sur Créez le vôtre, puis choisissez HTML en haut du panneau de contenu pour utiliser des champs HTML et CSS séparés.
6. Saisissez un Nom interne. Klaviyo utilise ce nom pour générer des rapports sur les clics sur le bloc, et vous ne pouvez pas le modifier après la création du bloc.
7. Saisissez votre code dans les champs HTML et CSS. Voir Rédiger votre HTML et CSS ci-dessous.
8. Configurez qui voit le bloc en fonction de l’état de connexion, de la visibilité basée sur les groupes, de la planification et du contexte d’affichage.
9. Vérifiez l’aperçu en direct, et résolvez les avertissements de validation. Avec HTML sélectionné, cliquez sur Publier pour enregistrer votre bloc. Pour l’afficher sur votre site, votre Klaviyo Customer Hub doit également être en ligne.

Rédigez votre code HTML et CSS

Ajoutez votre HTML

Utilisez le champ HTML pour créer la structure de votre bloc avec des éléments standard tels que des titres, des paragraphes, des listes, des liens, des images, et des tableaux. Créez des liens vers des pages de votre site avec des tag d’ancrage standard. Comme il n’est pas possible d’écrire du JavaScript dans le bloc, les boutons et les liens doivent pointer vers une URL. Pour tout élément plus interactif, utilisez un élément personnalisé.

Mettre en forme avec CSS

Utilisez le champ CSS pour contrôler l’espacement, la couleur, la typographie, et la mise en page responsive. Votre CSS ne s’applique qu’à ce bloc. Par défaut, un bloc HTML personnalisé est mis en forme pour correspondre à vos autres blocs de contenu, vous n’avez donc besoin d’écrire du CSS que pour les parties que vous souhaitez modifier.

• Donnez à vos éléments vos propres noms de classe, comme rewards-card, et ciblez ces classes dans votre CSS.
• Ajoutez @media règles pour que le bloc s’affiche correctement sur les petits écrans.
• Utilisez font-family: inherit pour que le texte corresponde aux polices que vous avez choisies dans l’onglet Style.

Ajouter une personnalisation

Utilisez les tag de personnalisation Klaviyo dans votre HTML pour afficher des données de profil, comme un solde de points de fidélité. Incluez toujours une valeur par défaut afin que le bloc n’affiche pas d’espaces vides lorsqu’un acheteur n’a pas fourni les données. Les données de profil n’apparaissent que pour les acheteurs connectés ou identifiés. Tous les autres voient la valeur par défaut.

Exemple : carte de points de fidélité

Cet exemple affiche le niveau d’un client et le solde de points, avec un bouton qui renvoie vers votre page de récompenses. Remplacez les noms de propriété (loyalty_points et Membership Tier) par les propriétés de profil que votre intégration de fidélité synchronise, et mettez à jour l’URL du lien.

<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;
  }
}

Exemple : tableau de comparaison des abonnements

Cet exemple compare deux niveaux d’adhésion. L’enveloppe permet au tableau de défiler horizontalement sur les écrans étroits, au lieu de casser la mise en page.

<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;
}

Intégrer des outils tiers avec des éléments personnalisés

Vous ne pouvez pas écrire de JavaScript directement dans un bloc HTML personnalisé, mais vous pouvez tout de même ajouter des fonctionnalités basées sur JavaScript en référençant un élément personnalisé défini par votre site. Un élément personnalisé est une balise HTML réutilisable dont le nom contient un trait d’union, comme <wishlist-widget>, qu’un développeur enregistre en JavaScript sur votre vitrine en ligne. Votre bloc ne contient que la tag, et le code de votre site fait le travail. Utilisez cette approche pour afficher du contenu provenant d’outils tiers, comme des applications de liste de souhaits, d’avis ou de fidélité.

Comment ça marche

1. Votre développeur, ou l’application tierce, définit l’élément personnalisé sur votre vitrine. Cela se fait généralement via votre thème ou le propre script de l’application.
2. Dans le champ HTML, ajoutez le tag à l’endroit où vous souhaitez que l’élément apparaisse. Tout nom de tag contenant un trait d’union est autorisé.
3. Vous pouvez également transmettre les données de profil à l’élément sous forme d’attributs à l’aide de tags de personnalisation.
4. Publiez votre bloc. Lorsque le Klaviyo Customer Hub se charge sur une page où votre site a défini l’élément, le code de votre site l’affiche dans le bloc.

Cet exemple place un élément de liste de souhaits dans un bloc et lui transmet l’adresse e-mail de l’acheteur. Le lien à l’intérieur du tag est un contenu de repli qui apparaît si l’élément n’est pas défini sur la page. Remplacez le nom du tag et les attributs par ceux utilisés par votre outil tiers.

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

Points importants

• L’élément doit être défini sur votre site. Cela fonctionne uniquement sur les pages où votre site a chargé le script qui le définit. Klaviyo ne charge pas de scripts tiers pour vous. Ajoutez du contenu de secours à l’intérieur du tag afin que les acheteurs voient quelque chose d’utile si l’élément n’est pas disponible.
• Personalization fonctionne avec des attributs. Les mêmes règles s’appliquent que partout ailleurs dans votre bloc. Les données de profil ne s’affichent que pour les acheteurs connectés ou identifiés, donc incluez une valeur par défaut pour tous les autres.
• Les éléments personnalisés héritent des styles de votre site. Klaviyo Customer Hub n’effectue pas de rendu à l’intérieur d’un iframe ou d’un shadow DOM, donc votre élément personnalisé récupère le CSS de votre site et peut en être affecté. Vous pouvez également appliquer un style à la tag de l’élément depuis le CSS de votre bloc.
• Écrivez le code JavaScript sur votre site, et non dans le bloc. Tout code JavaScript que vous saisissez dans le champ HTML est supprimé, et n’est pas enregistré. Définissez la fonctionnalité dans un élément personnalisé sur votre site, puis référencez cet élément depuis votre bloc.
• Vous êtes responsable du code et des données de tiers. Avant de transmettre des données de profil à un outil tiers, assurez-vous que cela respecte vos obligations en matière de confidentialité. Le support Klaviyo ne peut pas résoudre les problèmes liés à votre élément personnalisé ni à l’outil tiers derrière celui-ci.

Utiliser du code HTML personnalisé dans des blocs sur site

Le code HTML personnalisé fonctionne de la même manière dans les blocs de contenu sur site que dans l’onglet Pour vous. Vous créez le bloc dans le même éditeur de blocs de contenu à l’aide des champs HTML et CSS, et tout ce qui figure dans cet article s’applique, y compris les tags de personnalisation, les éléments personnalisés et le tracking des clics.

Gardez ces points à l’esprit lorsque votre bloc s’affiche sur votre vitrine :

• Le CSS de votre site peut affecter le bloc. Les blocs Onsite s’affichent directement sur votre page, donc les styles de votre site peuvent influencer leur apparence. Vérifiez le bloc sur votre page en ligne après avoir publié.
• L’aperçu peut différer de votre page en ligne. L’aperçu de l’éditeur ne peut pas reproduire tous les styles sur votre site.
• Les éléments personnalisés doivent se charger sur chaque page où le bloc apparaît. Assurez-vous que le script qui définit votre élément personnalisé est chargé sur chaque page où le bloc s’affiche.

Utilisez du HTML personnalisé dans les blocs de contenu sur site

Le code HTML personnalisé fonctionne également dans les blocs de contenu sur site, qui s’affichent directement sur les pages de votre boutique en ligne, plutôt qu’à l’intérieur du tiroir Klaviyo Customer Hub. Vous les créez dans le même éditeur de blocs de contenu, et les mêmes règles s’appliquent : choisissez HTML pour utiliser des champs HTML et CSS distincts, utilisez un tag de personnalisation pour les données de profil, et faites référence à des éléments personnalisés pour toute fonctionnalité ajoutée. Quelques éléments fonctionnent différemment sur site :

• Le CSS de votre site a davantage d’influence. Le bloc s’affiche directement dans votre page, de sorte que les styles de votre site peuvent l’affecter davantage que dans le tiroir Klaviyo Customer Hub. Testez votre CSS sur la page en ligne.
• L’aperçu peut ne pas correspondre exactement à votre page. Utilisez l’aperçu sur site pour vérifier votre bloc, puis confirmez l’apparence du bloc publié sur votre vitrine.
• Les éléments personnalisés doivent se charger sur chaque page où le bloc apparaît. Si vous faites référence à un élément personnalisé, assurez-vous que le script qui le définit est chargé sur chaque page où votre bloc sur site s’affiche.

Prévisualiser et tester votre bloc

L’aperçu se met à jour au fur et à mesure que vous modifiez votre HTML et votre CSS. S’il y a une erreur dans votre code, l’éditeur affiche un message de validation afin que vous puissiez la corriger avant la publication. Avant de publier :

• Utilisez Aperçu en tant que pour sélectionner un profil, et comparer les vues Connecté et Déconnecté.
• Testez avec un profil auquel il manque les données utilisées par vos tags de personnalisation, afin de confirmer que vos valeurs par défaut s’affichent correctement.
• Vérifiez le bloc en largeur mobile et en largeur ordinateur.

Suivez les performances du bloc

Klaviyo suit chaque clic sur un bloc HTML personnalisé en tant qu’événement clic sur le bloc de contenu dans Klaviyo Customer Hub, en utilisant le nom interne du bloc, et le signale de la même manière que les autres blocs de contenu. Klaviyo enregistre si le bloc a été cliqué, et non quel lien ou bouton individuel à l’intérieur de celui-ci a été cliqué.

Bonnes pratiques

• Restez simple. Partez du style par défaut et ne remplacez que ce dont vous avez besoin.
• Protégez les données à caractère personnel. Si un bloc s’affiche aux acheteurs connectés ou reconnus, n’incluez pas d’informations sensibles à caractère personnel. Vous êtes responsable de la confidentialité des données que vous ajoutez aux blocs personnalisés.
• Définissez toujours des valeurs par défaut. Les visiteurs anonymes et les profils dont les données sont manquantes doivent tout de même voir un bloc complet.
• Concevez en pensant d’abord aux mobiles. La plupart des visites de Klaviyo Customer Hub ont lieu sur de petits écrans, alors testez d’abord les mises en page étroites.
• Nommez clairement les blocs. Les noms internes sont utilisés dans le reporting et ne peuvent pas être modifiés par la suite.

Résolution de problèmes

Mon bloc ne se publie pas

Vérifiez les champs HTML et CSS pour consulter les messages de validation, corrigez les erreurs, puis publiez de nouveau. Si votre bloc dépend de JavaScript, notez que le code JavaScript saisi dans le champ HTML est supprimé, et n’est pas enregistré. Déplacez cette fonctionnalité dans un élément personnalisé sur votre site, et référencez-le dans votre bloc.

Mes styles ne s’appliquent pas

Le CSS est limité au bloc, donc vos sélecteurs doivent correspondre aux éléments à l’intérieur de votre propre HTML. Vérifiez qu’il n’y a pas de fautes de frappe dans vos noms de classe. Votre CSS ne peut rien mettre en forme en dehors du bloc.

Personalization affiche un texte vide ou par défaut

Les données de profil n’apparaissent que pour les acheteurs connectés ou identifiés. Vérifiez que le nom de propriété dans votre tag correspond exactement aux propriétés de profil, y compris les majuscules, et ajoutez une valeur par défaut.

Le bloc s’affiche différemment sur mon site que dans l’aperçu

Le CSS de votre site peut influencer la façon dont Klaviyo Customer Hub s’affiche, en particulier pour les blocs sur site, qui s’affichent directement sur votre page. Vérifiez le bloc publié sur votre site en ligne, et ajustez votre CSS si nécessaire.

Mon élément personnalisé est vide ou ne s’affiche pas

L’élément ne s’affiche que sur les pages où votre site a chargé le script qui le définit. Confirmez que le script se charge sur chaque page où le bloc s’affiche, et vérifiez que le nom du tag dans votre HTML correspond au nom que votre développeur a enregistré. Si vous voyez votre contenu de secours à la place, l’élément n’est pas défini sur cette page.

J’ai besoin d’aide pour écrire du code

L’assistance Klaviyo ne peut pas rédiger ni déboguer du HTML et du CSS personnalisés pour vous. Si vous avez besoin d’aide, travaillez avec un développeur ou un partenaire Klaviyo.