So verwendest du benutzerdefiniertes CSS, um Web-Chat zu gestalten

Übersicht

So verwendest du benutzerdefiniertes CSS, um das Erscheinungsbild des Klaviyo Web-Chats zu ändern – den Launcher, das Chatfenster, die Nachrichtenblasen und den Nachrichten-Composer. Du erfährst, welche Theme-Variablen und Klassennamen du sicher ansprechen kannst und welche beim Ausrollen eines Updates durch Klaviyo nicht mehr funktionieren.

Dieser Artikel gilt unabhängig davon, ob du Web-Chat allein oder als Teil von Klaviyo Customer Hub verwendest. Die Chat-Oberfläche ist in beiden Fällen gleich, daher funktioniert dasselbe CSS für beide.

Bevor du anfängst

Du brauchst:

• Eine Rolle als Kontoinhaber, Administrator oder Manager
• Vertrautheit mit CSS-Selektor*innen und benutzerdefinierten Eigenschaften (CSS-Variablen)

Bevor du benutzerdefiniertes CSS schreibst, prüfe, ob die integrierten Design-Einstellungen bereits das tun, was du brauchst. Farben, Schriftarten, Button-Form und Launcher-Position lassen sich alle ohne Code konfigurieren, und diese Einstellungen bleiben bei Klaviyo-Updates erhalten. Verwende benutzerdefiniertes CSS nur für das, was die Design-Einstellungen nicht abdecken.

Wo du dein benutzerdefiniertes CSS hinzufügst

Wo du den Editor für benutzerdefiniertes CSS findest, hängt von deiner Einrichtung ab.

Wenn du den Klaviyo Customer Hub verwendest

1. Gehe zu Klaviyo Customer Hub > Design.
2. Scrolle zum Abschnitt Benutzerdefiniert unten in den Stileinstellungen.
3. Klicke auf Benutzerdefiniertes CSS hinzufügen oder bearbeite das bereits vorhandene CSS.
4. Klicke auf Speichern.

Wenn du eigenständigen Web-Chat verwendest

1. Navigiere zu Einstellungen > Web-Chat > Design.
2. Scrolle zum Abschnitt Benutzerdefiniert unten in den Stileinstellungen.
3. Klicke auf Benutzerdefiniertes CSS hinzufügen oder bearbeite das bereits vorhandene CSS.
4. Klicke auf Speichern.

Wie benutzerdefiniertes CSS angewendet wird

Dein CSS wird in einem Style-Tag in deinem Storefront hinzugefügt, nach den eigenen Styles von Klaviyo. Daraus ergeben sich zwei Dinge:

• Dein CSS setzt sich durch. Da es zuletzt geladen wird, überschreiben deine Regeln in den meisten Fällen die Standardeinstellungen von Klaviyo, ohne dass !important erforderlich ist.
• Dein CSS ist nicht auf den Chat begrenzt. Es gilt für deine gesamte Seite. Begrenze deine Selektoren immer auf ein Chat-Element, statt einfache Regeln wie button { … } zu schreiben, die dein gesamtes Storefront betreffen würden.

Beginne mit Theme-Variablen

Die zuverlässigste Methode, den Web-Chat neu zu gestalten, besteht darin, die Theme-Variablen von Klaviyo in einem :root-Block zu überschreiben. Diese sind stabil, sie werden korrekt durch die gesamte Benutzeroberfläche vererbt, und es ist deutlich weniger wahrscheinlich, dass sie kaputtgehen, als wenn du einzelne Elemente gezielt ansprichst.

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

Variablen für Chat-Nachrichten

Nachrichten von Shopper*innen (ausgehend) verwenden absichtlich deine Markenfarben wieder: Die Sprechblase nutzt --atlas-button-primary und der Text nutzt --atlas-text-primary-inverse – beides legst du in den Designeinstellungen fest.

Farb- und Oberflächenvariablen

Form- und Abstandsvariablen

Typografie-Variablen

Einige davon werden bereits durch deine Designeinstellungen vorgegeben. Schriftarten und Farben in der Design-Einstellungs-UI festzulegen ist vorzuziehen – verwende die Variablen für Werte, die die UI nicht verfügbar macht.

Elemente mit Klassen-Hooks ansprechen

Wenn eine Theme-Variable nicht ausreicht, sprich Elemente direkt an. Klaviyo garantiert die folgenden Klassennamen.

Chat-Elemente

Das Chatfenster trägt außerdem eine Klasse, die den aktuellen Bildschirm benennt – .kl-hub-route-chat für den Chat selbst. Im eigenständigen Web-Chat ist das immer .kl-hub-route-chat. Im Klaviyo Customer Hub ändert sie sich, wenn der*die Kund*in navigiert (.kl-hub-route-home, .kl-hub-route-orders, und so weiter), sodass du CSS auf einen Bildschirm eingrenzen kannst.

Die Schaltfläche „Senden“ hat keine dedizierte Klasse. Richte es über den Composer aus:

.kl-hub-chat-input-wrapper .kl-hub-button-primary {
  background: #2f4f4f;
}

Geteilte Elemente

Agent*innen- und Shopper-Nachrichten unterschiedlich gestalten

Dies ist die häufigste Anfrage, und sie erfordert einen spezifischen Ansatz. Agent*innen- und Shopper-Bubbles teilen sich die einzelne .kl-hub-message Klasse – es gibt keine stabile Klasse, die sie unterscheidet, daher kannst du keine davon direkt auswählen.

Verwende stattdessen die Theme-Variablen, da diese die beiden bereits unterschiedlich behandeln:

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

Beispiele

Alles rechtwinklig machen

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 0;
}

Überschriften und Buttons in Großbuchstaben

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Launcher mit einem benutzerdefinierten Schatten vergrößern

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

Der Launcher setzt mehrere Eigenschaften direkt auf dem Element, daher benötigen Launcher-Regeln !important, um wirksam zu werden. Dies ist der einzige Ort, an dem es routinemäßig erforderlich ist.

Vergrößere das Chatfenster auf dem Desktop

@media (min-width: 900px) {
  .kl-hub-drawer {
    width: 480px;
  }
}

Wenn dein CSS nicht gespeichert wird

Wenn du speicherst, prüft Klaviyo, ob dein CSS geparst werden kann. Wenn nicht, siehst du Ungültiges CSS. Bitte überprüfe deine Syntax. und deine Änderungen werden nicht gespeichert.

Ein Stylesheet wird nur dann vollständig abgelehnt, wenn es überhaupt keine Regeln erzeugt, was normalerweise bedeutet, dass das, was du eingefügt hast, kein CSS ist. Häufige Ursachen:

• Einfügen von Plaintext, HTML oder einem Style-Tag statt CSS-Regeln
• Einfügen eines Teils einer Deklaration statt einer vollständigen Regel
• Ein Stylesheet, in dem jede Regel einen Syntaxfehler hat

Was benutzerdefiniertes CSS nicht kann

• Text ändern. Mit benutzerdefiniertem CSS kannst du keine Formulierungen bearbeiten. Verwende dafür die Design- und Inhaltseinstellungen.
• Elemente neu anordnen oder neu positionieren, über das hinaus, was das CSS-Layout zulässt. Die Struktur des Chats ist nicht anpassbar.
• Agent*innen- und Shopper-Blasen separat nach Klasse ansprechen. Verwende Theme-Variablen, wie oben beschrieben.
• Überstehe Redesigns automatisch. Klassen-Hooks und Variablen sind bei normalen Updates stabil, aber ein umfangreiches Redesign kann erfordern, dass du dein CSS erneut prüfst. Teste nach großen Releases erneut.

Weitere Ressourcen