Help Center
/
Customer Hub
/
Customer Hub
/
Konfiguration und Verwendung des Customer Hub
Übersicht

Übersicht

Erfahre mehr über die Designoptionen für deine Klaviyo Customer Hub Schublade und wie du sie passend zu deiner Marke gestalten kannst. Da die Klaviyo Customer Hub-Oberfläche fest in das Kundenerlebnis integriert ist, ist es am besten, sie so zu gestalten, dass sie wie eine Erweiterung deiner Website aussieht.

Bevor du anfängst

Bevor du anfängst

In diesem Leitfaden wird erklärt, wie du den Stil deiner Klaviyo Customer Hub-Oberfläche anpassen kannst. Bevor du fortfährst, stelle sicher, dass die Klaviyo Customer Hub Funktionen aktiviert sind.

Erfahre mehr über den Klaviyo Customer Hub.

Designoptionen für den Klaviyo Customer Hub

Designoptionen für den Klaviyo Customer Hub

Die Schublade des Klaviyo Customer Hub hat mehrere anpassbare Registerkarten:

  • Für dich
  • Bestellungen
  • Profil
  • Chat (nur sichtbar, wenn der Webchat aktiviert ist)

Die Klaviyo Customer Hub Schublade ist auf der Website einer Beispielmarke geöffnet und zeigt an, dass der Shopper bei seinem Kundenkonto angemeldet ist.

Du hast verschiedene Möglichkeiten, das Design auf jeder dieser Registerkarten anzupassen, z. B. Text, Farben, Schriftarten und mehr. Die Auswahl der Stilanpassung wird auf alle Registerkarten im Klaviyo Customer Hub übertragen, um ein konsistentes, markengerechtes Erlebnis für deine Website-Besucher zu gewährleisten. 

Das Aussehen der meisten Elemente in der Klaviyo Customer Hub Schublade kann angepasst werden, ihre Position jedoch nicht. Derzeit sind nur allgemeine Layout-Optionen verfügbar.

Wenn du die Design-Einstellungen für deinen Klaviyo Customer Hub auf Klaviyo bearbeitest, kannst du die Änderungen an der Hub-Oberfläche auf deiner Website über die Schaltfläche Live ansehen. Wenn dein Klaviyo Customer Hub live ist, werden gespeicherte Änderungen auf deiner Website veröffentlicht. 

Passe einen Haupt-Call-to-Action für jede Registerkarte an.

Passe einen Haupt-Call-to-Action für jede Registerkarte an.

Wenn sich ein Kunde bei seinem Kundenkonto anmeldet, zeigt Klaviyo standardmäßig "Willkommen, Vorname" an. als Hauptüberschrift auf der Registerkarte Für dich im Klaviyo Customer Hub. Dieser Text ist nicht editierbar.

Für nicht-authentifizierte Kunden kannst du jedoch eine eigene Call-to-Action-Überschrift schreiben, die über der Schaltfläche "Anmelden" angezeigt wird, bevor sie sich anmelden. Dies kann hilfreich sein, um unauthentifizierte Besucher dazu zu bewegen, sich anzumelden und mit deiner Klaviyo Customer Hub Oberfläche zu interagieren.

Im folgenden Beispiel lautet der Haupt-Call-to-Action: "Verdiene Prämien, verfolge deine Bestellungen und speichere deinen Einkaufsverlauf."

Die Registerkarte "Für dich" im Klaviyo Customer Hub zeigt die wichtigste Call-to-Action für einen Kunden, der sich nicht in einem Konto angemeldet hat.

So aktualisierst du die Haupt-Call-to-Action für dein Klaviyo Customer Hub Interface:

  1. Öffne den Reiter Klaviyo Customer Hub in der linken Navigation von Klaviyo.
  2. Klick auf „Einstellungen“.
  3. Klicke auf die Registerkarte „Inhalt “.
  4. Passe unter Willkommensnachrichten einen Call-to-Action an, der über der Schaltfläche "anmelden" für nicht authentifizierte Kunden angezeigt wird. Du kannst dies für jeden Reiter der Klaviyo Customer Hub Schublade tun:
    • Für dich
    • Bestellungen
    • Profil
      Das Menü Willkommensnachrichten in den Klaviyo Customer Hub Inhaltseinstellungen.
  5. Klicke auf Speichern
Gestalte deinen Klaviyo-Kunden-Hub

Gestalte deinen Klaviyo-Kunden-Hub

Für Designoptionen zur Anpassung deiner Klaviyo Customer Hub-Oberfläche:

  1. Navigiere in der linken Navigation von zu Klaviyo Customer Hub. Klaviyo
  2. Wähl „Design“ aus.
  3. Öffne das Menü „Stil “. 
    CHdesign10.jpg
  4. Im Menü „Stil“ kannst du die folgenden Farb- und Stileinstellungen anpassen und in der Vorschau sehen, wie diese Anpassungen im Klaviyo Customer Hub-Interface aussehen werden:
    • Schriftarten
      • Schriftart für Überschriften
        Wird für Überschriften auf jeder Registerkarte des Klaviyo Customer Hub verwendet. Wähle " Von Website übernehmen", um die Schriftart, die in anderen Überschriften auf deiner Website verwendet wird, automatisch zu übernehmen.

        Du kannst auch eine benutzerdefinierte Schriftart hinzufügen, indem du Benutzerdefinierte Schriftart konfigurieren wählst und dann ihren Namen und ihre Größe eingibst. Diese benutzerdefinierte Schriftart muss bereits im Bereich Schriftarten deines Kontos vorhanden sein

      • Farbe der Überschrift
        Wird für den Überschriftentext auf jeder Registerkarte des Klaviyo Customer Hub verwendet.
      • Absatzschriftart
        Wird für den Text in den einzelnen Abschnitten, dem Inhaltsblock und der Schaltfläche verwendet. Wähle " Von Website übernehmen", um die in anderen Absätzen auf deiner Website verwendete Schriftart automatisch zu übernehmen.
      • Absatzfarbe
        Wird für alle Schaltflächen, Inhaltsblöcke und Abschnittstexte im Klaviyo Customer Hub verwendet.
    • Buttons
      • Buttonfarbe
        Die Hintergrundfarbe für alle Buttons im Klaviyo Customer Hub.
      • Textfarbe der Schaltflächen
        Die Farbe des Textes auf allen Schaltflächen im Klaviyo Customer Hub. 
      • Groß-/Kleinschreibung für Schaltflächentext
        Die Groß-/Kleinschreibung für Text auf allen Schaltflächen im Klaviyo Customer Hub.
    • Stil
      • Form-
        Die Form der Kanten von Inhaltsblöcken, Schaltflächen und Abschnitten im Klaviyo Customer Hub.
      • Hintergrundfarbe
        Die Grundfarbe von Klaviyo Customer Hub unter dem Text, dem Inhaltsblock und den Erweiterungen.
    • Layout
      • Position auf dem Desktop
        Von wo aus die Klaviyo Customer Hub Schublade herausgleitet (linke oder rechte Seite des Ansichtsfensters). Wenn deine Marke eine Warenkorbschublade verwendet, solltest du eine linksbündige Positionierung wählen, damit sie sich nicht mit dem Klaviyo Customer Hub überschneidet.
    • Benutzerdefiniertes CSS-
      Du kannst optional erweiterte Stile mit benutzerdefiniertem CSS anwenden. Weitere Infos findest du im Abschnitt „Benutzerdefiniertes CSS“ weiter unten.
  5. Klick auf „Veröffentlichen“, um deine Änderungen live zu schalten.
Passe das Klaviyo-Kundencenter-Widget an

Passe das Klaviyo-Kundencenter-Widget an

Neben dem Design des Klaviyo Customer Hubs kannst du auch das Hub-Widget anpassen. Das ist ein kleines, schwebendes Element auf deiner Website, auf das Besucher klicken können, um schnell die Benutzeroberfläche des Klaviyo Customer Hubs zu öffnen. Das Hub-Widget funktioniert ähnlich wie ein Formular-Teaser und begleitet Besucher während ihres gesamten Besuchs auf deiner Website. 

So passt du das Hub-Widget an:

  1. Wähle „Klaviyo Customer Hub“ in der linken Navigation von „ Klaviyo“ aus.
  2. Wähl „Design“ aus.
  3. Öffne das Widget -Menü.
    CHdesign11.jpg
  4. Du kannst das Widget des Hub Launcher anpassen:
    • Sichtbarkeits-
      Welche Website-Besucher können das Widget sehen und anklicken?
    • Öffne die Einstellungen
      Welche Seite wird im Klaviyo Customer Hub geöffnet? 
    • Form„
      “ Die Form der Kanten des Widgets
    • Farben-
      Die Farbe des Widgets
    • Position„
      “ Wo auf einer Webseite das Widget schwebt
    • Abstands
      Abstand von der linken/rechten und oberen/unteren Ecke, je nach Position des Widgets
  5. Klick auf „Veröffentlichen“, um deine Änderungen live zu sehen.
Benutzerdefiniertes CSS für Klaviyo Customer Hub

Benutzerdefiniertes CSS für Klaviyo Customer Hub

Wenn die Designoptionen des Klaviyo Customer Hub nicht ausreichen, kannst du mit Custom CSS ein erweitertes Styling anwenden.

Während Klaviyo Customer Hub CSS-Rückstellungen verwendet, um Kollisionen mit dem CSS deiner Website zu vermeiden, musst du eventuell benutzerdefiniertes CSS hinzufügen, um Randfälle zu lösen oder ein einzigartiges Styling anzuwenden, wie z. B. fließende Schubladen oder benutzerdefinierte Randradiuswerte.

Um benutzerdefinierte CSS für deinen Klaviyo Customer Hub zu implementieren, musst du den Code deiner Website bearbeiten. Dies wird nur für technisch versierte Marketer empfohlen oder für diejenigen, die Zugang zu einem Entwickler haben. Unser Produkt unterstützt zwar benutzerdefinierte CSS, aber unser Support-Team kann dir nicht dabei helfen, benutzerdefinierte CSS zu Klaviyo Customer Hub hinzuzufügen, die über die allgemeine Anleitung in dieser Dokumentation hinausgehen. Um die Sicherheit deiner Daten zu gewährleisten, kann das Support-Team von Klaviyo deine HTML-Dateien nicht öffnen.

Benutzerdefiniertes CSS anwenden 

Benutzerdefiniertes CSS anwenden 

Füge alle benutzerdefinierten CSS direkt in den Abschnitt " Benutzerdefinierte CSS" in den Designeinstellungen deines Klaviyo Customer Hub ein und speichere deine Änderungen.

Der Abschnitt Custom CSS am Ende des Klaviyo Customer Hub Design Einstellungsmenüs in Klaviyo.

Alle Basiselemente im Klaviyo Customer Hub haben Klassennamen mit dem Präfix kl-hub-:

  • Alle Textelemente haben die Klasse kl-hub-text, während Überschriften die Klasse kl-hub-headinghaben
  • Schaltflächen haben die Klasse kl-hub-button und umfassen auch ihre Varianten (z. B. kl-hub-button-primär, kl-hub-button-sekundär, usw.)
  • Die Klaviyo Customer Hub Schublade selbst hat die Klasse kl-hub-drawer
  • Texteingaben haben die Klasse kl-hub-input
  • Alle Inhaltsblöcke haben die Klasse kl-hub-content-Block und enthalten auch ihren internen Blocknamen (z.B. kl-hub-content-Block-reward-program für einen Inhaltsblock mit dem Namen "Reward program").

Diese Liste ist nicht vollständig; du kannst mehr finden, wenn du den Klaviyo Customer Hub mit dem Debugger deines Browsers untersuchst. Wenn ein Element eine Klasse hat, die mit kl-hub- beginnt, kann es sicher für benutzerdefiniertes CSS verwendet werden.

CSS-Beispiel

CSS-Beispiel

Wenn du alle Schaltflächen und Überschriften im Klaviyo Customer Hub in Großbuchstaben schreiben möchtest, könntest du das folgende benutzerdefinierte CSS schreiben:

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}
Weitere Ressourcen

Weitere Ressourcen

War dieser Artikel hilfreich?
Nutze dieses Formular nur für Feedback zu Artikeln. So kontaktierst du den Support.

Mehr von Klaviyo entdecken

Community
Vernetze dich mit Kolleg*innen, Partner*innen und Klaviyo-Expert*innen, um dich inspirieren zu lassen, Erkenntnisse auszutauschen und Antworten auf deine Fragen zu erhalten.
Live-Training
Nimm an einer Live-Session mit Klaviyo-Expert*innen teil, um mehr über Best Practices und die Einrichtung wichtiger Funktionen zu erfahren.
Support

Kontaktiere den Support über dein Konto.

Support per E-Mail (kostenlose Testversion und kostenpflichtige Konten) Verfügbar 24/7

Chat / virtuelle Unterstützung
Verfügbarkeit abhängig von Standort und Abonnementtyp