Så skapar du anpassade HTML- och CSS-block för Klaviyo Customer Hub

Du kommer att lära dig

Så här skapar du ett anpassat block för din Klaviyo Customer Hub med din egen HTML och CSS. Använd den för att skapa varumärkesanpassat innehåll, som lojalitetskort för framsteg, kampanjmoduler och jämförelsetabeller, när fälten i standardinnehållsblocket inte är tillräckligt flexibla.

Innan du börjar

Den här guiden bygger på innehållsblock. Om du inte har skapat ett innehållsblock tidigare kan du börja med Så skapar du innehållsblock för Klaviyo Customer Hub. Om du vill ändra utseendet på hela din Klaviyo Customer Hub i stället för ett enskilt block kan du läsa Så anpassar du stilen för din Klaviyo Customer Hub.

Vad du kan göra med anpassade HTML-block

Ett anpassat HTML-block är ett avancerat innehållsblock med två kodfält: ett för HTML och ett för CSS. HTML definierar blockets struktur och innehåll, och CSS styr dess styling, layout och responsiva beteende. Använd anpassade HTML-block för att:

• Visa ett lojalitetskort med förloppsstatus eller en belöningssammanfattning med hjälp av poäng- eller nivådata från en Klaviyo-profil.
• Skapa en jämförelsetabell, till exempel för att förklara medlemsnivåer eller abonnemang.
• Skapa en reklambanner eller modul som matchar ditt varumärke.
• Ordna innehållet på sätt som standardfälten för rubriker, stycken och bilder inte tillåter.
• Lägg till funktioner, till exempel en önskelista eller ett recensionsverktyg från en tredjepart, genom att referera till ett anpassat element som har definierats på din webbplats.

Anpassade HTML-block visas på fliken För dig tillsammans med dina andra innehållsblock, och du kan också använda dem i innehållsblock på webbplatsen. Inställningar för inloggningsstatus, gruppbaserad synlighet, schemaläggning och visningskontext fungerar på samma sätt som för andra innehållsblock.

Vad som stöds och vad som inte gör det

Klaviyo sanerar din HTML och CSS och begränsar din CSS till blocket så att den inte kan ändra resten av din Klaviyo Customer Hub eller din webbplats. Tänk på följande begränsningar:

• Stöds: HTML för struktur och innehåll, CSS för styling och layout, Klaviyo-personaliseringstagg för profildata samt anpassade element som definieras på din webbplats för tillagd funktionalitet.
• JavaScript finns på din webbplats, inte i blocket: Du kan inte skriva JavaScript direkt i HTML-fältet. Allt du anger där tas bort och sparas inte. För att lägga till funktionalitet, inklusive integrationer från tredje part, definierar du ett anpassat element på din egen webbplats och refererar till det i ditt block. Se Integrera verktyg från tredje part med anpassade element nedan.
• Stöds inte: CSS som påverkar något utanför ditt block, till exempel sidomfattande formatering, eller ändringar i markeringen för Klaviyos inbyggda block.
• Data: Alla data du visar måste komma från Klaviyo-profilegenskaper via personaliseringstagg. Händelsedata stöds inte.

Skapa ett anpassat HTML-block

1. Gå till Klaviyo Customer Hub under fliken Webbplats.
2. Välj Design i navigeringen i Klaviyo Customer Hub.
3. Klicka på Redigera din Hub för att öppna redigeraren för Klaviyo Customer Hub.
4. Välj ”+” i det vänstra navigeringsfältet för att lägga till ett innehållsblock
5. Klicka på Skapa din egen och välj sedan HTML högst upp i innehållspanelen för att använda separata fält för HTML och CSS.
6. Ange ett internt namn. Klaviyo använder det här namnet för att rapportera klick på blocket, och du kan inte ändra det efter att blocket har skapats.
7. Ange din kod i fälten för HTML och CSS. Se Skriv din HTML och CSS nedan.
8. Konfigurera vem som ser blocket med hjälp av inloggningsstatus, gruppbaserad synlighet, schemaläggning och visningskontext.
9. Granska liveförhandsgranskningen och åtgärda eventuella valideringsvarningar. När HTML är valt klickar du på Publicera för att spara ditt block. För att visa den på din webbplats måste även din Klaviyo Customer Hub vara live.

Skriv din HTML och CSS

Lägg till din HTML

Använd HTML-fältet för att bygga upp strukturen för ditt block med standardelement som rubriker, stycken, listor, länkar, bilder och tabeller. Länka till sidor på din webbplats med vanliga ankar-taggar. Eftersom JavaScript inte kan skrivas i blocket ska knappar och länkar peka till en URL. För allt som är mer interaktivt använder du ett anpassat element.

Styla med CSS

Använd CSS-fältet för att styra avstånd, färg, typografi och responsiv layout. Din CSS gäller bara för det här blocket. Som standard formateras ett anpassat HTML-block så att det matchar dina andra innehållsblock, så du behöver bara skriva CSS för de delar du vill ändra.

• Ge dina element egna klassnamn, till exempel rewards-card, och rikta in dig på de klasserna i din CSS.
• Lägg till @media regler så att blocket ser rätt ut på små skärmar.
• Använd font-family: inherit så att texten matchar de teckensnitt du valde på fliken Format.

Lägg till personanpassning

Använd Klaviyos personaliseringstagg i din HTML för att visa profildata, till exempel ett saldo av lojalitetspoäng. Ta alltid med ett standardvärde så att blocket inte visar tomma ytor när en kund inte har angett uppgifterna. Profildata visas bara för inloggade eller identifierade kunder. Alla andra ser standardvärdet.

Exempel: lojalitetspoängskort

Det här exemplet visar en kunds nivå och poängsaldo med en knapp som länkar till din belöningssida. Ersätt egenskapsnamnen (loyalty_points och Membership Tier) med de profilegenskaper som din lojalitetsintegration synkroniserar och uppdatera länkens URL.

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

Exempel: jämförelsetabell för medlemskap

Det här exemplet jämför två medlemsnivåer. Omslutningen gör att tabellen kan rulla i sidled på smala skärmar i stället för att förstöra layouten.

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

Integrera verktyg från tredje part med anpassade element

Du kan inte skriva JavaScript direkt i ett anpassat HTML-block, men du kan fortfarande lägga till JavaScript-baserad funktionalitet genom att referera till ett anpassat element som din webbplats definierar. Ett anpassat element är en återanvändbar HTML-etikett med ett bindestrecksseparerat namn, som <wishlist-widget>, som en utvecklare registrerar i JavaScript i din webbshop. Ditt block innehåller bara etiketten, och din webbplats kod gör jobbet. Använd det här tillvägagångssättet för att visa innehåll från tredjepartsverktyg, till exempel önskelistor, recensioner eller lojalitetsappar.

Så fungerar det

1. Din utvecklare, eller tredjepartsappen, definierar det anpassade elementet i din webbshop. Detta görs vanligtvis via ditt tema eller appens eget skript.
2. I HTML-fältet lägger du till etiketten där du vill att elementet ska visas. Alla etikettnamn som innehåller ett bindestreck är tillåtna.
3. Om du vill kan du skicka profildata till elementet som attribut med hjälp av personaliseringstagg.
4. Publicera ditt block. När Klaviyo Customer Hub läses in på en sida där din webbplats har definierat elementet renderar din webbplats kod det inuti blocket.

Det här exemplet placerar ett önskelisteelement i ett block och skickar med kundens e-postadress. Länken inuti etiketten är reservinnehåll som visas om elementet inte är definierat på sidan. Ersätt etikettnamnet och attributen med de som ditt tredjepartsverktyg använder.

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

Viktig information

• Elementet måste vara definierat på din webbplats. Det fungerar bara på sidor där din webbplats har laddat skriptet som definierar det. Klaviyo laddar inte tredjepartsskript åt dig. Lägg till reservinnehåll inuti taggen så att kunder ser något användbart om elementet inte är tillgängligt.
• Personalisering fungerar i attribut. Samma regler gäller precis som i resten av ditt block. Profildata visas bara för inloggade eller identifierade kunder, så inkludera ett standardvärde för alla andra.
• Anpassade element ärver webbplatsens stilar. Klaviyo Customer Hub renderas inte inuti en iframe eller shadow DOM, så ditt anpassade element tar upp webbplatsens CSS och kan påverkas av den. Du kan också formge elementets etikett med blockets CSS.
• Skriv JavaScript på din webbplats, inte i blocket. All JavaScript som du anger i HTML-fältet tas bort och sparas inte. Definiera funktionaliteten i ett anpassat element på din webbplats och referera sedan till det elementet från ditt block.
• Du ansvarar för kod och data från tredje part. Innan du skickar profildata till ett verktyg från tredje part, se till att det uppfyller dina integritetsskyldigheter. Klaviyo Support kan inte felsöka ditt anpassade element eller verktyget från tredje part bakom det.

Använd anpassad HTML i block på webbplatsen

Anpassad HTML fungerar på samma sätt i innehållsblock på webbplatsen som på fliken För dig. Du bygger blocket i samma redigerare för innehållsblock med hjälp av fälten för HTML och CSS, och allt i den här artikeln gäller, inklusive personaliseringstaggar, anpassade element och klickspårning.

Tänk på följande när ditt block visas i din butik:

• Webbplatsens CSS kan påverka blocket. Onsite-block renderas direkt på sidan, så webbplatsens stilar kan påverka hur de ser ut. Kontrollera blocket på din publicerade sida när du har publicerat.
• Förhandsvisningen kan skilja sig från din livesida. Förhandsvisningen i redigeraren kan inte återge alla stilar på din webbplats.
• Anpassade element måste läsas in på varje sida där blocket visas. Se till att skriptet som definierar ditt anpassade element läses in på varje sida där blocket visas.

Använd anpassad HTML i webbplatsinnehållsblock

Anpassad HTML fungerar också i innehållsblock på webbplatsen, som visas direkt på dina butikssidor i stället för inuti Klaviyo Customer Hub-panelen. Du bygger dem i samma redigerare för innehållsblock, och samma regler gäller: välj HTML för att använda separata fält för HTML och CSS, använd personaliseringstagg för profildata och hänvisa till anpassade element för all tillagd funktionalitet. Ett par saker fungerar annorlunda på webbplatsen:

• Din webbplats CSS har större påverkan. Blocket renderas direkt på din sida, så din webbplats stilar kan påverka det mer än de gör i lådan för Klaviyo Customer Hub. Testa din CSS på den live-sidan.
• Förhandsvisningen kanske inte matchar din sida exakt. Använd förhandsvisningen på plats för att kontrollera ditt block och bekräfta sedan hur det publicerade blocket ser ut i din butik.
• Anpassade element måste läsas in på varje sida där blocket visas. Om du refererar till ett anpassat element ska du se till att skriptet som definierar det läses in på varje sida där ditt onsite-block visas.

Förhandsgranska och testa ditt block

Förhandsvisningen uppdateras när du redigerar din HTML och CSS. Om det finns ett fel i din kod visar redigeraren ett valideringsmeddelande så att du kan åtgärda det innan du publicerar. Innan du publicerar:

• Använd Förhandsgranska som för att välja en profil och jämföra vyerna Inloggad och Utloggad.
• Testa med en profil som saknar de data som dina personaliseringstaggar använder för att bekräfta att dina standardvärden ser korrekta ut.
• Kontrollera blocket i mobil- och desktopbredd.

Spåra blockets prestanda

Klaviyo spårar varje klick på ett anpassat HTML-block som en Customer Hub clicked on content block -händelse, med blockets interna namn, och rapporterar det på samma sätt som andra innehållsblock. Klaviyo registrerar om blocket klickades på, inte vilken enskild länk eller knapp i blocket som klickades på.

Bästa praxis

• Håll det enkelt. Utgå från standardstilen och åsidosätt bara det du behöver.
• Skydda personuppgifter. Om ett block visas för inloggade eller identifierade shoppare ska du inte ta med känsliga personuppgifter. Du ansvarar för integriteten för data som du lägger till i anpassade block.
• Ange alltid standardvärden. Anonyma besökare och profiler med saknade data ska fortfarande se ett komplett block.
• Designa för mobilen först. De flesta besök i Klaviyo Customer Hub sker på små skärmar, så testa smala layouter först.
• Namnge block tydligt. Interna namn används i rapportering och kan inte ändras senare.

Felsökning

Mitt block går inte att publicera

Kontrollera fälten för HTML och CSS efter valideringsmeddelanden, åtgärda felen och publicera igen. Om ditt block förlitar sig på JavaScript ska du tänka på att JavaScript som anges i HTML-fältet tas bort och inte sparas. Flytta den funktionen till ett anpassat element på din webbplats och referera till det i ditt block.

Mina stilar tillämpas inte

CSS:en är avgränsad till blocket, så dina selektorer måste matcha element i din egen HTML. Kontrollera dina klassnamn så att de inte innehåller stavfel. Din CSS kan inte styla något utanför blocket.

Personalisering visar tom eller standardtext

Profildata visas bara för inloggade eller identifierade kunder. Bekräfta att profilegenskapens namn i din etikett matchar profilegenskapen exakt, inklusive versaler och gemener, och lägg till ett standardvärde.

Blocket ser annorlunda ut på min webbplats än i förhandsvisningen

Din webbplats CSS kan påverka hur Klaviyo Customer Hub återges, särskilt för onsite-block som visas direkt på din sida. Kontrollera det publicerade blocket på din livewebbplats och justera din CSS vid behov.

Mitt anpassade element är tomt eller visas inte

Elementet renderas bara på sidor där din webbplats har läst in skriptet som definierar det. Bekräfta att skriptet läses in på varje sida där blocket visas och kontrollera att etikettnamnet i din HTML matchar namnet som din utvecklare registrerade. Om du i stället ser ditt reservinnehåll är elementet inte definierat på den sidan.

Jag behöver hjälp med att skriva kod

Klaviyo Support kan inte skriva eller felsöka anpassad HTML och CSS åt dig. Om du behöver hjälp kan du jobba med en utvecklare eller en Klaviyo partner.