Wie du deinen Klaviyo Customer Hub gestaltest

Ü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

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

Die Schublade des Klaviyo Customer Hub hat mehrere anpassbare Registerkarten:

• Für dich
• Bestellungen
• Profil
• Chat (nur sichtbar, wenn Web-Chat aktiviert 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. 

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.

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 Hauptanruf „Verdiene Prämien, verfolge Bestellungen und speichere deine Einkaufshistorie“.

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

1. Öffne den Reiter Service - Klaviyo Customer Hub in der linken Navigation von Klaviyo.
2. Klick auf „Einstellungen“.
3. 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
     
4. Klicke auf Speichern. 

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. Wähle oben in der Vorschau Hub aus.
   
   
   
   
4. Im Menü „Stil“ kannst du die Einstellungen für „Anzeigesprache“, „Schriftarten“, „Farbe“ und „Stil“ anpassen und eine Vorschau der Anpassungen im Customer Hub-Schnittstellenbereich anzeigen
5. Du kannst optional ein erweitertes Styling mit Custom CSS anwenden. Weitere Informationen findest du im Abschnitt "Benutzerdefiniertes CSS" weiter unten.
6. Weitere Informationen zur Auswahl einer anderen Sprache findest du im Customer Hub- Artikel Unterstützung für Sprache und Gebietsschema.
7. Klicke auf Speichern, um deine Änderungen livezuschalten.

Passe das Klaviyo-Kundencenter-Widget an

Neben der eigentlichen Gestaltung des Customer Hub kannst du auch das Hub-Widget anpassen. Dabei handelt es sich um ein kleines, schwebendes Element auf deiner Website, auf das Besucher klicken können, um die Customer-Hub-Oberfläche schnell zu öffnen. Das Widget zeigt deinen Kund*innen zum richtigen Zeitpunkt Informationen wie eingehende Chat-Nachrichten und Feedback an, wenn sie Artikel in ihre Favoritenliste aufnehmen. Wir empfehlen, die Widget-Benutzeroberfläche zu aktivieren, um eine sinnvolle Kundenengagement zu fördern, insbesondere wenn Web-Chat und Favoriten aktiviert sind.

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. Wähle oben in der Vorschau Widget aus.
   
   

   

4. Über das Menü Allgemein kannst du einstellen, welche Käufer*innen das Widget sehen sollen und welche Customer Hub-Ansicht geöffnet werden soll, wenn auf das Widget geklickt wird.
5. Im Menü Stil kannst du die Farb- und Stileinstellungen anpassen und sehen, wie diese Anpassungen im Benutzeroberflächenbereich des Customer Hub-Widgets aussehen werden
6. Im Menü Layout kannst du die Positionierung des Widgets auf deiner Website anpassen.
7. Klicke auf Speichern, um deine Änderungen livezuschalten.

Zusätzliche Widget-Status anpassen

Du kannst weitere Widget-Status anpassen, indem du die Einfügemarke neben Symbol auswählst und zu einem anderen Widget-Status navigierst.

• Der Status „Zum Warenkorb hinzugefügt “ ist auf den Produktdetailseiten sichtbar. Das anpassbare Widget regt Kund*innen dazu an, einen Kauf zu tätigen oder ein Produkt für später zu speichern, wenn sie unter den oberen Rand der Produktdetailseite gescrollt haben und die herkömmliche Schaltfläche Zum Warenkorb hinzufügen nicht mehr zu sehen ist. Erfahre mehr darüber , wie du das Widget Zum Warenkorb hinzufügen im Customer Hub einrichtest.

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.

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.

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

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

• Erste Schritte mit Klaviyo Customer Hub
• Erste Schritte mit dem Webchat
• Wie erstelle ich einen Inhaltsblock für Klaviyo Customer Hub?
• So richtest du das Widget Zum Warenkorb hinzufügen im Customer Hub ein