Aangepaste HTML- en CSS-blokken maken voor Klaviyo Customer Hub

Wat je leert

Zo bouw je een aangepast blok voor je Klaviyo Customer Hub met je eigen HTML en CSS. Gebruik het om content in je merkstijl te maken, zoals loyaliteitsvoortgangskaarten, promotiemodules en vergelijkingstabellen, wanneer de velden van het standaard contentblok niet flexibel genoeg zijn.

Voordat je van start gaat

Deze gids bouwt voort op contentblokken. Als je nog niet eerder een contentblok hebt gemaakt, begin dan met Contentblokken maken voor Klaviyo Customer Hub. Als je het uiterlijk van je volledige Klaviyo Customer Hub wilt wijzigen in plaats van één blok, bekijk dan Je Klaviyo Customer Hub vormgeven.

Wat je kunt doen met aangepaste HTML-blokken

Een aangepast HTML-blok is een geavanceerd contentblok met twee codevelden: één voor HTML en één voor CSS. HTML bepaalt de structuur en inhoud van het blok, en CSS beheert de opmaak, layout en responsieve werking. Gebruik aangepaste HTML-blokken om:

• Toon een kaart met loyaliteitsvoortgang of een overzicht van beloningen met behulp van punten- of niveaugegevens uit een Klaviyo-profiel.
• Maak een vergelijkingstabel, bijvoorbeeld om lidmaatschapsniveaus of abonnementen uit te leggen.
• Maak een promotiebanner of -module die bij je merk past.
• Content opmaken op manieren die de standaard velden voor kopteksten, alinea's en afbeeldingen niet toestaan.
• Voeg functionaliteit toe, zoals een wishlist- of reviewstool van derden, door te verwijzen naar een aangepast element dat op je site is gedefinieerd.

Aangepaste HTML-blokken verschijnen op het tabblad Voor jou naast je andere contentblokken, en je kunt ze ook gebruiken in contentblokken op de site. Instellingen voor loginstatus, zichtbaarheid op basis van groepen, planning en weergavecontext werken op dezelfde manier als bij andere contentblokken.

Wat wordt ondersteund en wat niet

Klaviyo ontsmet je HTML en CSS, en past je CSS toe op het blok, zodat het de rest van je Klaviyo Customer Hub of je website niet kan wijzigen. Houd rekening met deze limieten:

• Ondersteund: HTML voor structuur en content, CSS voor styling en lay-out, Klaviyo personalisatietags voor profielgegevens en aangepaste elementen die op je site zijn gedefinieerd voor extra functionaliteit.
• JavaScript staat op je site, niet in het blok: Je kunt JavaScript niet rechtstreeks in het HTML-veld schrijven. Alles wat je daar invoert, wordt verwijderd en niet opgeslagen. Om functionaliteit toe te voegen, waaronder integraties van derden, definieer je een aangepast element op je eigen site en verwijs je ernaar in je blok. Zie hieronder Tools van derden integreren met aangepaste elementen.
• Niet ondersteund: CSS die invloed heeft op alles buiten je blok, zoals paginabrede styling, of bewerkingen van de markup van de native blokken van Klaviyo.
• Data: Alle data die je weergeeft, moet afkomstig zijn van Klaviyo-profieleigenschappen via personalisatietags. Eventdata wordt niet ondersteund.

Aangepast HTML-blok maken

1. Navigeer naar Klaviyo Customer Hub onder het tabblad Website.
2. Selecteer Ontwerp in de navigatie van Klaviyo Customer Hub.
3. Klik op Bewerk je hub om de editor van Klaviyo Customer Hub te openen.
4. Selecteer de "+" in de navigatiebalk aan de linkerkant om een contentblok toe te voegen
5. Klik op Bouw je eigen en kies vervolgens bovenaan het contentpaneel HTML om aparte HTML- en CSS-velden te gebruiken.
6. Voer een Interne naam in. Klaviyo gebruikt deze naam om kliks op het blok te rapporteren en je kunt deze niet meer wijzigen nadat het blok is gemaakt.
7. Voer je code in de velden HTML en CSS in. Zie Schrijf je HTML en CSS hieronder.
8. Configureer wie het blok ziet op basis van inlogstatus, zichtbaarheid op basis van groepen, planning en weergavecontext.
9. Controleer de live preview en los eventuele validatiewaarschuwingen op. Met HTML geselecteerd klik je op Publiceren om je blok op te slaan. Om dit op je site weer te geven, moet je Klaviyo Customer Hub ook live zijn.

Schrijf je HTML en CSS

Voeg je HTML toe

Gebruik het HTML-veld om de structuur van je blok op te bouwen met standaardelementen zoals koppen, alinea's, lijsten, links, afbeeldingen en tabellen. Link naar pagina's op je site met gewone ankertags. Omdat je geen JavaScript in het blok kunt schrijven, moeten knoppen en links naar een URL verwijzen. Voor alles wat interactiever is, gebruik je een aangepast element.

Opmaak met CSS

Gebruik het CSS-veld om de witruimte, kleur, typografie en responsieve lay-out te bepalen. Je CSS is alleen van toepassing op dit blok. Standaard wordt een aangepast HTML-blok opgemaakt zodat het overeenkomt met je andere contentblokken, dus je hoeft alleen CSS te schrijven voor de onderdelen die je wilt wijzigen.

• Geef je elementen hun eigen klassennamen, zoals rewards-card, en selecteer die klassen in je CSS.
• Voeg @media regels toe zodat het blok er goed uitziet op kleine schermen.
• Gebruik font-family: inherit zodat de tekst overeenkomt met de lettertypen die je hebt gekozen op het tabblad Stijl.

Personalisatie toevoegen

Gebruik Klaviyo-personalisatietags in je HTML om profielgegevens te tonen, zoals een loyaltypuntensaldo. Neem altijd een standaardwaarde op, zodat het blok geen lege ruimtes toont als een shopper de gegevens niet heeft opgegeven. Profielgegevens worden alleen getoond voor ingelogde of geïdentificeerde shoppers. Iedereen anders ziet de standaardwaarde.

Voorbeeld: loyaliteitspuntenkaart

Dit voorbeeld laat het niveau en puntensaldo van een shopper zien, met een knop die linkt naar je beloningspagina. Vervang de eigenschapsnamen (loyalty_points en Membership Tier) door de profieleigenschappen die je loyalty-integratie synchroniseert en werk de link-URL bij.

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

Voorbeeld: vergelijkingstabel voor lidmaatschappen

Dit voorbeeld vergelijkt twee lidmaatschapsniveaus. De wrapper laat de tabel op smalle schermen zijwaarts scrollen, in plaats van dat de lay-out kapotgaat.

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

Integreer tools van derden met aangepaste elementen

Je kunt geen JavaScript rechtstreeks in een aangepaste HTML-blok schrijven, maar je kunt nog steeds functionaliteit toevoegen die door JavaScript wordt aangestuurd door te verwijzen naar een aangepast element dat je site definieert. Een aangepast element is een herbruikbare HTML-tag met een naam met een koppelteken, zoals <wishlist-widget>, die een developer in JavaScript registreert op je storefront. Je blok bevat alleen de tag en de code van je site doet het werk. Gebruik deze aanpak om content te tonen van tools van derden, zoals wenslijst-, review- of loyaliteitsapps.

Zo werkt het

1. Je developer, of de app van een derde partij, definieert het aangepaste element in je storefront. Dit gebeurt meestal via je thema of via het eigen script van de app.
2. Voeg in het HTML-veld de tag toe op de plek waar je het element wilt laten verschijnen. Elke tagnaam met een streepje is toegestaan.
3. Optioneel kun je profielgegevens als kenmerken aan het element doorgeven met behulp van personalisatietags.
4. Publiceer je blok. Wanneer de Klaviyo Customer Hub wordt geladen op een pagina waar je site het element heeft gedefinieerd, rendert de code van je site dit binnen het blok.

In dit voorbeeld wordt een wishlist-element in een blok geplaatst en krijgt het het e-mailadres van de shopper mee. De link in de tag is fallbackcontent die wordt weergegeven als het element niet op de pagina is gedefinieerd. Vervang de tagnaam en kenmerken door diegene die je tool van derden gebruikt.

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

Dingen om te weten

• Het element moet op je site zijn gedefinieerd. Het werkt alleen op pagina's waar je site het script heeft geladen dat het definieert. Klaviyo laadt geen scripts van derden voor je. Voeg fallback-content toe binnen de tag zodat shoppers iets nuttigs zien als het element niet beschikbaar is.
• Personalisatie werkt met kenmerken. Dezelfde regels gelden als overal elders in je blok. Profielgegevens worden alleen weergegeven voor ingelogde of geïdentificeerde shoppers, dus voeg een standaardwaarde toe voor alle anderen.
• Aangepaste elementen nemen de stijlen van je site over. Klaviyo Customer Hub wordt niet gerenderd binnen een iframe of shadow DOM, dus je aangepaste element neemt de CSS van je site over en kan erdoor worden beïnvloed. Je kunt de tag van het element ook opmaken vanuit de CSS van je blok.
• Schrijf JavaScript op je site, niet in het blok. Alle JavaScript die je in het HTML-veld invoert, wordt verwijderd en niet opgeslagen. Definieer de functionaliteit in een aangepast element op je site en verwijs daarna vanuit je blok naar dat element.
• Je bent verantwoordelijk voor code en gegevens van derden. Voordat je profielgegevens doorgeeft aan een tool van derden, controleer je of dat voldoet aan je privacyverplichtingen. Klaviyo Support kan geen problemen oplossen met je aangepaste element of met de tool van derden erachter.

Gebruik aangepaste HTML in onsite-blokken

Aangepaste HTML werkt op dezelfde manier in onsite contentblokken als op het tabblad Voor jou. Je bouwt het blok in dezelfde contentblok-editor met de velden HTML en CSS, en alles in dit artikel is van toepassing, inclusief personalisatietags, aangepaste elementen en click tracking.

Houd deze punten in gedachten wanneer je blok wordt weergegeven in je webshop:

• De CSS van je site kan invloed hebben op het blok. Onsite-blokken worden rechtstreeks op je pagina gerenderd, dus de stijlen van je site kunnen invloed hebben op hoe ze eruitzien. Controleer het blok op je live pagina nadat je hebt gepubliceerd.
• De preview kan afwijken van je livepagina. De editorpreview kan niet elke stijl op je site reproduceren.
• Aangepaste elementen moeten op elke pagina laden waarop het blok wordt weergegeven. Zorg ervoor dat het script dat je aangepaste element definieert, wordt geladen op elke pagina waar het blok wordt weergegeven.

Gebruik aangepaste HTML in contentblokken op de site

Aangepaste HTML werkt ook in contentblokken op de site, die direct op je winkelpagina’s worden weergegeven in plaats van in de lade van de Klaviyo Customer Hub. Je bouwt ze in dezelfde editor voor contentblokken en dezelfde regels zijn van toepassing: kies HTML om aparte HTML- en CSS-velden te gebruiken, gebruik personalisatietags voor profielgegevens en verwijs naar aangepaste elementen voor extra functionaliteit. Een paar dingen werken anders op de site:

• De CSS van je site heeft meer invloed. Het blok wordt rechtstreeks op je pagina gerenderd, dus de stijlen van je site kunnen er meer invloed op hebben dan in de Klaviyo Customer Hub-lade. Test je CSS op de live pagina.
• De voorbeeldweergave komt mogelijk niet precies overeen met je pagina. Gebruik de onsite voorbeeldweergave om je blok te controleren en bevestig vervolgens hoe het gepubliceerde blok eruitziet op je webshop.
• Aangepaste elementen moeten op elke pagina laden waarop het blok wordt weergegeven. Als je naar een aangepast element verwijst, zorg er dan voor dat het script dat het definieert wordt geladen op elke pagina waar je onsite blok wordt weergegeven.

Een voorbeeld bekijken en je blok testen

Het voorbeeld wordt bijgewerkt terwijl je je HTML en CSS bewerkt. Als er een fout in je code zit, toont de editor een validatiebericht zodat je het kunt oplossen voordat je publiceert. Voordat je publiceert:

• Gebruik Voorbeeld weergeven als om een profiel te selecteren en de weergaven Ingelogd en Uitgelogd te vergelijken.
• Test met een profiel waarin de gegevens ontbreken die je personalisatietags gebruiken, om te bevestigen dat je standaardwaarden er goed uitzien.
• Controleer het blok op mobiele en desktopbreedtes.

Prestaties van blokken bijhouden

Klaviyo registreert elke klik op een aangepast HTML-blok als een Klaviyo Customer Hub clicked on content block -event, met de interne naam van het blok, en rapporteert dit op dezelfde manier als andere contentblokken. Klaviyo registreert of er op het blok is geklikt, niet op welke individuele link of knop erin is geklikt.

Best practices

• Houd het simpel. Begin met de standaardstijl en overschrijf alleen wat je nodig hebt.
• Bescherm persoonsgegevens. Als een blok wordt weergegeven aan ingelogde of herkende shoppers, neem dan geen gevoelige persoonsgegevens op. Je bent verantwoordelijk voor de privacy van de gegevens die je toevoegt aan aangepaste blokken.
• Stel altijd standaardwaarden in. Anonieme bezoekers en profielen met ontbrekende gegevens moeten nog steeds een volledig blok zien.
• Ontwerp eerst voor mobiel. De meeste bezoeken aan Klaviyo Customer Hub vinden plaats op kleine schermen, dus test eerst smalle lay-outs.
• Geef blokken duidelijke namen. Interne namen worden gebruikt voor rapportage en kunnen later niet worden gewijzigd.

Probleemoplossing

Mijn blok wordt niet gepubliceerd

Controleer de HTML- en CSS-velden op validatieberichten, los de fouten op en publiceer opnieuw. Als je blok afhankelijk is van JavaScript, houd er dan rekening mee dat JavaScript die je in het HTML-veld invoert, wordt verwijderd en niet opgeslagen. Verplaats die functionaliteit naar een aangepast element op je site en verwijs ernaar in je blok.

Mijn stijlen worden niet toegepast

CSS is beperkt tot het blok, dus je selectors moeten overeenkomen met elementen binnen je eigen HTML. Controleer je classnamen op typfouten. Je CSS kan niets buiten het blok stylen.

Personalisatie toont lege of standaardtekst

Profielgegevens worden alleen weergegeven voor ingelogde of geïdentificeerde shoppers. Controleer of de eigenschapsnaam in je tag exact overeenkomt met de profieleigenschappen, inclusief hoofdletters, en voeg een standaardwaarde toe.

Het blok ziet er anders uit op mijn site dan in de preview

De CSS van je site kan invloed hebben op hoe de Klaviyo Customer Hub wordt gerenderd, vooral bij onsite blocks, die direct op je pagina worden weergegeven. Controleer het gepubliceerde blok op je live site en pas je CSS zo nodig aan.

Mijn aangepaste element is leeg of wordt niet weergegeven

Het element wordt alleen gerenderd op pagina's waar je site het script heeft geladen dat het definieert. Controleer of het script laadt op elke pagina waar het blok wordt weergegeven, en controleer of de tag name in je HTML overeenkomt met de naam die je developer heeft geregistreerd. Als je in plaats daarvan je fallback content ziet, is het element niet gedefinieerd op die pagina.

Ik heb hulp nodig bij het schrijven van code

Klaviyo Support kan geen aangepaste HTML en CSS voor je schrijven of debuggen. Als je hulp nodig hebt, werk dan samen met een developer of een Klaviyo partner.