So erstellst du benutzerdefinierte HTML- und CSS-Blöcke für das Klaviyo Customer Hub

Übersicht

So erstellst du einen benutzerdefinierten Block für deinen Klaviyo Customer Hub mit deinem eigenen HTML und CSS. Nutze ihn, um markenspezifische Inhalte zu erstellen, z. B. Treuefortschrittskarten, Werbemodule und Vergleichstabellen, wenn die Felder des Standardinhaltsblocks nicht flexibel genug sind.

Bevor du anfängst

Dieser Leitfaden baut auf Inhaltsblöcken auf. Wenn du noch nie zuvor einen Inhaltsblock erstellt hast, beginne mit So erstellst du Inhaltsblöcke für den Klaviyo Customer Hub. Wenn du das Erscheinungsbild deines gesamten Klaviyo Customer Hub statt eines einzelnen Blocks ändern möchtest, siehe So gestaltest du deinen Klaviyo Customer Hub.

Was du mit benutzerdefinierten HTML-Blöcken machen kannst

Ein benutzerdefinierter HTML-Block ist ein erweiterter Inhaltsblock mit zwei Codefeldern: einem für HTML und einem für CSS. HTML definiert die Struktur und den Inhalt des Blocks, und CSS steuert sein Styling, Layout und responsives Verhalten. Benutzerdefinierte HTML-Blöcke verwenden, um:

• Zeige eine Treuefortschrittskarte oder eine Prämienübersicht mithilfe von Punkte- oder Stufendaten aus einem Klaviyo Profil.
• Erstelle eine Vergleichstabelle, zum Beispiel um Mitgliedschaftsstufen oder Pläne zu erklären.
• Erstelle ein Werbebanner oder ein Modul, das zu deiner Marke passt.
• Strukturiere Inhalte auf Arten, die die Standardfelder für Überschrift, Absatz und Bild nicht ermöglichen.
• Füge Funktionen hinzu, z. B. ein Wishlist- oder Bewertungstool eines Drittanbieters, indem du auf ein benutzerdefiniertes Element verweist, das auf deiner Website definiert ist.

Benutzerdefinierte HTML-Blöcke werden im Tab Für dich zusammen mit deinen anderen Inhaltsblöcken angezeigt, und du kannst sie auch in Onsite-Inhaltsblöcken verwenden. Anmeldestatus, gruppenbasierte Sichtbarkeit, Zeitplanung und Einstellungen für den Anzeigekontext funktionieren auf die gleiche Weise wie bei anderen Inhaltsblöcken.

Was unterstützt wird und was nicht

Klaviyo bereinigt dein HTML und CSS und begrenzt den Geltungsbereich deines CSS auf den Block, sodass es den Rest deines Klaviyo Customer Hub oder deiner Website nicht ändern kann. Behalte diese Limits im Hinterkopf:

• Unterstützt: HTML für Struktur und Inhalte, CSS für Styling und Layout, Klaviyo-Personalisierungs-Tags für Profildaten und benutzerdefinierte Elemente, die auf deiner Website definiert sind, für zusätzliche Funktionen.
• JavaScript befindet sich auf deiner Website, nicht im Block: Du kannst JavaScript nicht direkt in das HTML-Feld schreiben. Alles, was du dort eingibst, wird entfernt und nicht gespeichert. Um Funktionen hinzuzufügen, einschließlich Integrationen von Drittanbietern, definiere auf deiner eigenen Website ein benutzerdefiniertes Element und verweise in deinem Block darauf. Siehe unten Tools von Drittanbietern mit benutzerdefinierten Elementen integrieren.
• Nicht unterstützt: CSS, das sich auf alles außerhalb deines Blocks auswirkt, z. B. seitenweites Styling, oder Bearbeitungen des Markups der nativen Blöcke von Klaviyo.
• Daten: Alle Daten, die du anzeigst, müssen aus Klaviyo-Profileigenschaften über Personalisierungs-Tags stammen. Ereignisdaten werden nicht unterstützt.

Benutzerdefinierten HTML-Block erstellen

1. Navigiere im Tab Website zu Klaviyo Customer Hub.
2. Wähle Design in der Navigation des Klaviyo Customer Hub aus.
3. Klicke auf Bearbeite deinen Hub, um den Klaviyo Customer Hub-Editor zu öffnen.
4. Wähle das „+“ in der linken Navigationsleiste aus, um einen Inhaltsblock hinzuzufügen
5. Klicke auf Eigenes erstellen und wähle dann oben im Inhaltsbereich HTML aus, um separate HTML- und CSS-Felder zu verwenden.
6. Gib einen Internen Namen ein. Klaviyo verwendet diesen Namen, um Klicks auf den Block zu erfassen, und du kannst ihn nicht mehr ändern, nachdem der Block erstellt wurde.
7. Gib deinen Code in die HTML- und CSS-Felder ein. Siehe unten Schreibe dein HTML und CSS.
8. Konfiguriere, wer den Block anhand des Anmeldestatus, der gruppenbasierten Sichtbarkeit, der Zeitplanung und des Anzeigekontexts sieht.
9. Überprüfe die Live-Vorschau und behebe alle Validierungswarnungen. Wenn HTML ausgewählt ist, klicke auf Veröffentlichen, um deinen Block zu speichern. Damit es auf deiner Website angezeigt wird, muss auch dein Klaviyo Customer Hub live sein.

Schreibe dein HTML und CSS

Füge dein HTML hinzu

Verwende das HTML-Feld, um die Struktur deines Blocks mit Standard-Elementen wie Überschriften, Absätzen, Listen, Links, Bildern und Tabellen zu erstellen. Verlinke auf Seiten deiner Website mit normalen Anchor-Tags. Da JavaScript nicht im Block geschrieben werden kann, sollten Buttons und Links auf eine URL verweisen. Für alles, was interaktiver ist, verwende ein benutzerdefiniertes Element.

Mit CSS gestalten

Verwende das CSS-Feld, um Abstände, Farben, Typografie und das responsive Layout zu steuern. Dein CSS gilt nur für diesen Block. Standardmäßig wird ein benutzerdefinierter HTML-Block so formatiert, dass er zu deinen anderen Inhaltsblöcken passt, sodass du CSS nur für die Teile schreiben musst, die du ändern möchtest.

• Gib deinen Elementen eigene Klassennamen, z. B. rewards-card, und sprich diese Klassen in deinem CSS an.
• Füge @media Regeln hinzu, damit der Block auf kleinen Bildschirmen richtig aussieht.
• Verwende font-family: inherit, damit der Text zu den Schriftarten passt, die du im Tab „Stil“ ausgewählt hast.

Personalisierung hinzufügen

Verwende Klaviyo-Personalisierungs-Tags in deinem HTML, um Profildaten anzuzeigen, z. B. ein Treuepunktguthaben. Füge immer einen Standardwert hinzu, damit der Block keine leeren Bereiche anzeigt, wenn Kund*innen die Daten nicht bereitgestellt haben. Profildaten werden nur für angemeldete oder identifizierte Kund*innen angezeigt. Alle anderen sehen den Standardwert.

Beispiel: Treuepunktekarte

Dieses Beispiel zeigt die Stufe und den Punktestand eines Shopper*in mit einer Schaltfläche, die zu deiner Belohnungsseite verlinkt. Ersetze die Eigenschaftsnamen (loyalty_points und Membership Tier) durch die Profileigenschaften, die deine Treueprogramm-Integrationen synchronisiert, und aktualisiere die Link-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;
  }
}

Beispiel: Vergleichstabelle zur Mitgliedschaft

Dieses Beispiel vergleicht zwei Mitgliedschaftsstufen. Der Wrapper ermöglicht es, dass die Tabelle auf schmalen Bildschirmen horizontal scrollt, statt das Layout zu zerstören.

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

Integriere Drittanbieter-Tools mit benutzerdefinierten Elementen

Du kannst JavaScript nicht direkt in einen benutzerdefinierten HTML-Block schreiben, aber du kannst trotzdem JavaScript-gestützte Funktionalität hinzufügen, indem du auf ein benutzerdefiniertes Element verweist, das deine Website definiert. Ein benutzerdefiniertes Element ist ein wiederverwendbarer HTML-Tag mit einem Namen, der einen Bindestrich enthält, z. B. <wishlist-widget>, den eine Entwickler*in in JavaScript in deinem Storefront registriert. Dein Block enthält nur den Tag, und der Code deiner Website erledigt die Arbeit. Verwende diesen Ansatz, um Inhalte aus Drittanbieter-Tools anzuzeigen, z. B. Wunschliste-, Bewertungs- oder Treue-Apps.

So funktioniert es

1. Dein*e Entwickler*in oder die Drittanbieter-App definiert das benutzerdefinierte Element in deinem Storefront. Das wird in der Regel über dein Theme oder das app-eigene Script erledigt.
2. Füge im HTML-Feld den Tag dort hinzu, wo das Element erscheinen soll. Jeder Tag-Name, der einen Bindestrich enthält, ist zulässig.
3. Optional kannst du Profildaten mithilfe von Personalisierungs-Tags als Attribute an das Element übergeben.
4. Veröffentliche deinen Block. Wenn der Klaviyo Customer Hub auf einer Seite geladen wird, auf der deine Website das Element definiert hat, rendert der Code deiner Website es innerhalb des Blocks.

Dieses Beispiel platziert ein Wishlist-Element in einem Block und übergibt ihm die E-Mail-Adresse der*des Shopper*in. Der Link innerhalb des Tags ist Fallback-Inhalt, der angezeigt wird, wenn das Element auf der Seite nicht definiert ist. Ersetze den Tag-Namen und die Attribute durch die, die dein Drittanbieter-Tool verwendet.

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

Wissenswertes

• Das Element muss auf deiner Website definiert sein. Es funktioniert nur auf Seiten, auf denen deine Website das Skript geladen hat, das es definiert. Klaviyo lädt keine Drittanbieter-Skripte für dich. Füge Fallback-Inhalte innerhalb des Tag hinzu, damit Shopper*innen etwas Nützliches sehen, wenn das Element nicht verfügbar ist.
• Personalization funktioniert mit Attributen. In deinem Block gelten dieselben Regeln wie überall sonst. Profildaten werden nur für angemeldete oder identifizierte Shopper*innen angezeigt, also gib für alle anderen einen Standardwert an.
• Benutzerdefinierte Elemente übernehmen die Styles deiner Website. Klaviyo Customer Hub wird nicht innerhalb eines iframe oder Shadow DOM gerendert, daher übernimmt dein benutzerdefiniertes Element das CSS deiner Website und kann davon beeinflusst werden. Du kannst auch den Tag des Elements über das CSS deines Blocks gestalten.
• Schreibe JavaScript auf deiner Website, nicht im Block. Jegliches JavaScript, das du in das HTML-Feld eingibst, wird entfernt und nicht gespeichert. Definiere die Funktionalität in einem benutzerdefinierten Element auf deiner Website und verweise dann in deinem Block auf dieses Element.
• Du bist für Code und Daten von Drittanbieter*innen verantwortlich. Bevor du Profildaten an ein Drittanbieter-Tool weitergibst, stelle sicher, dass dies deinen Datenschutzpflichten entspricht. Der Klaviyo Support kann dein benutzerdefiniertes Element oder das Drittanbieter-Tool dahinter nicht beheben.

Verwende benutzerdefiniertes HTML in Onsite-Blöcken

Benutzerdefiniertes HTML funktioniert in Onsite-Content-Blöcken genauso wie im Tab „Für dich“. Du erstellst den Block im selben Content-Block-Editor mithilfe der HTML- und CSS-Felder, und alles in diesem Artikel gilt ebenfalls, einschließlich Personalisierungs-Tags, benutzerdefinierter Elemente und Click Tracking.

Behalte diese Punkte im Hinterkopf, wenn dein Block in deinem Storefront angezeigt wird:

• Das CSS deiner Website kann den Block beeinflussen. Onsite-Blöcke werden direkt auf deiner Seite gerendert, daher können die Styles deiner Website beeinflussen, wie sie aussehen. Prüfe den Block auf deiner Live-Seite, nachdem du ihn veröffentlicht hast.
• Die Vorschau kann von deiner Live-Seite abweichen. Die Editor-Vorschau kann nicht jeden Stil auf deiner Website wiedergeben.
• Benutzerdefinierte Elemente müssen auf jeder Seite geladen werden, auf der der Block erscheint. Stelle sicher, dass das Skript, das dein benutzerdefiniertes Element definiert, auf jeder Seite geladen wird, auf der der Block angezeigt wird.

Benutzerdefiniertes HTML in Onsite-Inhaltsblöcken verwenden

Benutzerdefiniertes HTML funktioniert auch in Onsite-Content-Blöcken, die direkt auf deinen Storefront-Seiten angezeigt werden, statt innerhalb des Klaviyo Customer Hub-Drawers. Du erstellst sie im selben Content-Block-Editor, und es gelten dieselben Regeln: Wähle HTML, um separate HTML- und CSS-Felder zu verwenden, verwende Personalisierungs-Tag für Profildaten und verweise auf benutzerdefinierte Elemente für jede zusätzliche Funktionalität. Ein paar Dinge funktionieren Onsite anders:

• Das CSS deiner Website hat mehr Einfluss. Der Block wird direkt in deiner Seite gerendert, sodass die Styles deiner Website ihn stärker beeinflussen können als innerhalb des Klaviyo Customer Hub-Drawers. Teste dein CSS auf der Live-Seite.
• Die Vorschau stimmt möglicherweise nicht genau mit deiner Seite überein. Nutze die Vorschau vor Ort, um deinen Block zu überprüfen, und sieh dir dann an, wie der veröffentlichte Block in deinem Shop aussieht.
• Benutzerdefinierte Elemente müssen auf jeder Seite geladen werden, auf der der Block erscheint. Wenn du ein benutzerdefiniertes Element referenzierst, stelle sicher, dass das Script, das es definiert, auf jeder Seite geladen wird, auf der dein Onsite-Block angezeigt wird.

Zeige eine Vorschau an und teste deinen Block

Die Vorschau wird aktualisiert, während du dein HTML und CSS bearbeitest. Wenn dein Code einen Fehler enthält, zeigt der Editor eine Validierungsnachricht an, damit du ihn vor dem Veröffentlichen beheben kannst. Bevor du veröffentlichst:

• Verwende Vorschau als, um ein Profil auszuwählen und die Ansichten Angemeldet und Abgemeldet zu vergleichen.
• Teste mit einem Profil, dem die Daten fehlen, die deine Personalisierungs-Tags verwenden, um zu bestätigen, dass deine Standardwerte richtig aussehen.
• Prüfe den Block bei Breiten für Mobilgeräte und Desktop.

Block-Performance verfolgen

Klaviyo erfasst jeden Klick auf einen benutzerdefinierten HTML-Block als Ereignis Customer Hub clicked on content block, verwendet dabei den internen Namen des Blocks und meldet ihn auf dieselbe Weise wie andere Inhaltsblöcke. Klaviyo zeichnet auf, ob auf den Block geklickt wurde, nicht auf welchen einzelnen Link oder Button innerhalb des Blocks geklickt wurde.

Best Practices

• Halte es einfach. Starte mit dem Standard-Design und überschreibe nur, was du brauchst.
• Schütze personenbezogene Daten. Wenn ein Block angemeldeten oder erkannten Shopper*innen angezeigt wird, füge keine sensiblen personenbezogenen Informationen ein. Du bist für den Datenschutz der Daten verantwortlich, die du zu benutzerdefinierten Blöcken hinzufügst.
• Lege immer Standardwerte fest. Anonyme Besucher*innen und Profile mit fehlenden Daten sollten trotzdem einen vollständigen Block sehen.
• Entwirf zuerst für Mobilgeräte. Die meisten Besuche im Klaviyo Customer Hub erfolgen auf kleinen Bildschirmen. Teste daher zuerst schmale Layouts.
• Benennen die Blöcke eindeutig. Interne Namen werden im Reporting verwendet und können später nicht mehr geändert werden.

Fehlerbehebung

Mein Block wird nicht veröffentlicht

Prüfe die Felder HTML und CSS auf Validierungsmeldungen, behebe die Fehler und veröffentliche erneut. Wenn dein Block auf JavaScript angewiesen ist, beachte, dass JavaScript, das im HTML-Feld eingegeben wird, entfernt wird und nicht gespeichert wird. Verschiebe diese Funktionalität in ein benutzerdefiniertes Element auf deiner Website und verweise in deinem Block darauf.

Meine Styles werden nicht angewendet

CSS ist auf den Block begrenzt, daher müssen deine Selektoren mit Elementen in deinem eigenen HTML übereinstimmen. Überprüfe deine Klassennamen auf Tippfehler. Dein CSS kann nichts außerhalb des Blocks gestalten.

Personalization zeigt leeren oder Standardtext an

Profildaten werden nur für angemeldete oder identifizierte Shopper*innen angezeigt. Bestätige, dass der Eigenschaftenname in deinem Tag genau mit den Profileigenschaften übereinstimmt, einschließlich Groß- und Kleinschreibung, und füge einen Standardwert hinzu.

Der Block sieht auf meiner Website anders aus als in der Vorschau

Das CSS deiner Website kann beeinflussen, wie der Klaviyo Customer Hub gerendert wird, insbesondere bei Onsite-Blöcken, die direkt auf deiner Seite angezeigt werden. Prüfe den veröffentlichten Block auf deiner Live-Website und passe dein CSS nach Bedarf an.

Mein benutzerdefiniertes Element ist leer oder wird nicht angezeigt

Das Element wird nur auf Seiten gerendert, auf denen deine Website das Script geladen hat, das es definiert. Bestätige, dass das Script auf jeder Seite geladen wird, auf der der Block angezeigt wird, und prüfe, dass der Tag-Name in deinem HTML mit dem Namen übereinstimmt, den dein*e Entwickler*in registriert hat. Wenn du stattdessen deinen Fallback-Content siehst, ist das Element auf dieser Seite nicht definiert.

Ich brauche Hilfe beim Schreiben von Code

Der Klaviyo Support kann kein benutzerdefiniertes HTML und CSS für dich schreiben oder debuggen. Wenn du Hilfe brauchst, arbeite mit Entwickler*innen oder einem Klaviyo Partner zusammen.