Zum Hauptinhalt springen

Erweitertes Chat-Design

Die integrierten Darstellungseinstellungen – Farben, Eckenradien, Schatten, Trennlinien, Abstände – decken die meisten Branding-Anforderungen ab. Für alles, was darüber hinausgeht, gibt es in den globalen Einstellungen der Admin-App ein Feld für benutzerdefiniertes CSS. Alles, was dort hineingeht, wird auf jeder Storefront-Seite in einen <style>-Block eingefügt; eine Variante pro Seite oder Block gibt es nicht.

CSS-Custom-Properties, die Sie überschreiben können​

Das Widget legt sein eigenes Erscheinung sbild durch benutzer definierte CSS-Eigenschaften für :root und auch für eigene Container fest, sodass sie weiterhin in Themen funktionieren, die Shadow DOM verwenden. Überschreiben Sie stattdessen direkt eine dieser Eigenschaften, anstatt gegen die Spezifität anzukämpfen:

:root {
  --user-bg-color: #2C9AB4;
  --user-text-color: #FFFFFF;
  --bot-bg-color: #FFFFFF;
  --bot-text-color: #1A1E23;
  --chat-bubble-radius: 10px;
  --input-button-radius: 10px;
  --outer-radius: 20px;
  --container-padding: 20px;
  --chat-input-spacing: 20px;
  --divider-spacing: 15px;
  --divider-thickness: 1px;
  --divider-color: rgba(0,0,0,0.1);
  --container-border-color: #2C9AB4;
  --container-border-width: 2px;
  --container-border-radius: 20px;
  --container-background-color: #FAFAFA;
  --shadow-offset-x: 8px;
  --shadow-offset-y: 8px;
  --shadow-blur: 24px;
  --shadow-opacity: 0.1;
  --profile-image-size: 40px;
  --bubble-size: 60px;
  --chat-container-width: 980px;
  --chat-container-padding: 20px;
  --chat-container-margin: 20px;
  --chat-max-height-desktop: 35vh;
  --chat-max-height-mobile: 50vh;
}

Die meisten von ihnen haben bereits ein passendes Feld auf der Erscheinung seite -greifen Sie nach benutzer definiertem CSS, haupt sächlich für Dinge, die die Benutzer oberfläche der Einstellungen nicht verfügbar macht.

Echte Selektoren, die es wert sind, bekannt zu sein​

SelektorWas es ist
#main-chat-containerDas Haupt-Chat-Fenster
.AIchatbotKlasse im Haupt-Chatfenster
[data-style-template="classic"] / .classic-styleAngezeigt, wenn Classic das aktive Stilvorlage ist.
[data-style-template="bubbly"] / .bubbly-styleAnwesend, wenn Bubbly Glow aktiv ist
[data-style-template="floaty"]Anwesend, wenn Floaty aktiv ist
#ai-ambient-wrapperÄußere Verpackung für die Floaty- und Bubbly-Glow-Umgebungslicht-Knubbel
.chat-anchor-bubble-wrapperFeste Position um die schwebende Launcher-Blase
.chat-anchor-bubbleDie kreisförmige Startschale selbst
.desktop-headingDie Überschrift der Chat-Oberfläche
.chat-login-buttonDie Schaltfläche zur Gastanmeldung
.show-border / .show-shadowAuf #main-chat-container angewendet, wenn diese Einstellungen aktiviert sind

Ein kleines Beispiel – verstärken Sie den Schatten der Blase und verleihen Sie der Überschrift eine benutzerdefinierte Unterstreichung, ohne dabei andere Einstellungen zu ändern:

.chat-anchor-bubble {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.desktop-heading {
  border-bottom: 2px solid var(--user-bg-color);
}

Einige Punkte, die Sie beachten sollten​

Die schwebende Blase ist immer position: fixed, der je nachBubble-Positionunten links oder unten rechts verankert ist (siehe Chat-Position ierung & Layout). Sie können es mit benutzerdefiniertem CSS neu gestalten, aber es von einer festen Ecke zu verschieben ist nicht Wird unterstützt und wird auf Mobilgeräten wahrscheinlich fehlschlagen.

Benutzerdefiniertes CSS ist global – ein einziges Feld, das auf das Widget auf jeder Seite und in jedem Block des Shops angewendet wird, da es im gleichen Metafeld wie die übrigen Einstellungen gespeichert ist. Halten Sie die Selektoren weiterhin auf die eigenen Klassen und IDs des Widgets beschränkt, wie oben gezeigt, anstatt als breite Tag-Selektoren, sodass nichts in den Rest Ihres Themes hineinreicht. Und wenn Sie Ihre eigenen Animationen hinzufügen oder Text farben außer Kraft setzen, respektieren Sie prefers-reduced-motion und halten Sie den Kontrast lesbar-das Widget erzwingt keine der für Sie benutzer definierten CSS.

Nächste Schritte​