Zum Hauptinhalt springen

​
Überblick

Die Styling-Einstellungen ermöglichen es Ihnen, das Aussehen und die Wirkung Ihres Chat-Widgets auf Ihrer Website anzupassen. Sie können alles vom Avatar-Charakter über Farben, Themes bis hin zur Widget-Positionierung anpassen, um ein nahtloses Markenerlebnis für Ihre Besucher zu schaffen.
Alle Styling-Änderungen können in Echtzeit vor dem Speichern in der Vorschau angezeigt werden. Nutzen Sie das Live-Vorschau-Panel, um genau zu sehen, wie Ihr Widget für Besucher erscheinen wird.

​
Zugriff auf die Styling-Einstellungen

  1. Navigieren Sie zu Ihrem Agenten im Dashboard
  2. Klicken Sie auf Bereitstellen in der Seitenleiste
  3. Wählen Sie Chat-Widget aus, um auf die Styling-Optionen zuzugreifen
Die Styling-Optionen sind im Styling-Tab organisiert, während Inhaltsoptionen wie Begrüßungsnachrichten und vorgeschlagene Fragen im Inhalt-Tab zu finden sind.

​
Avatar

Der Avatar Ihres Agenten ist die visuelle Darstellung, die im Chat-Widget erscheint. Er schafft ein ansprechenderes, menschenähnlicheres Erlebnis für Besucher.

​
Avatar auswählen

OptionBeschreibung
Aus Bibliothek auswählenWählen Sie aus einer Sammlung vorgefertigter 3D-Avatar-Charaktere
Jederzeit ändernSie können Avatare jederzeit über die Widget-Einstellungen wechseln
Um einen Avatar auszuwählen oder zu ändern:
  1. Klicken Sie auf die Schaltfläche Ändern (oder Auswählen, wenn kein Avatar gesetzt ist)
  2. Durchstöbern Sie die Avatar-Galerie
  3. Klicken Sie auf einen Avatar, um ihn in der Vorschau anzuzeigen
  4. Klicken Sie auf Auswählen, um Ihre Wahl zu bestätigen
Avatare sind animiert und können Antworten mittels Text-to-Speech sprechen, was ein interaktiveres Erlebnis für Ihre Besucher schafft.

​
Avatar-Hintergrund

Sie können den Hintergrund hinter Ihrem Avatar anpassen:
EinstellungBeschreibung
Benutzerdefinierter HintergrundAktivieren, um eine benutzerdefinierte Hintergrundfarbe festzulegen
HintergrundfarbeWählen Sie eine beliebige Farbe mit dem Farbwähler oder geben Sie einen Hex-Code ein
TransparenzPassen Sie die Hintergrundtransparenz von 0% (vollständig transparent) bis 100% (vollständig undurchsichtig) an

​
Erscheinungsbild

Wählen Sie zwischen hellen und dunklen Themes für Ihr Chat-Widget, passend zum Design Ihrer Website.

​
Theme-Optionen

Helles Theme

Ein helles, klares Erscheinungsbild mit hellen Hintergründen und dunklem Text. Am besten geeignet für Websites mit hellen Farbschemata.

Dunkles Theme

Ein dunkleres Erscheinungsbild mit dunklen Hintergründen und hellem Text. Ideal für Websites mit dunklen Farbschemata oder zur Reduzierung der Augenbelastung.
Um das Theme zu ändern:
  1. Navigieren Sie zum Styling-Tab
  2. Klicken Sie unter Erscheinungsbild auf die Hell- oder Dunkel-Karte
  3. Das ausgewählte Theme wird mit einem Rahmen hervorgehoben

​
Markenfarbe

Die Markenfarbe ist Ihre Primärfarbe, die im gesamten Widget erscheint. Sie wird verwendet für:
  • Senden-Schaltfläche
  • Aktive Elemente und Hervorhebungen
  • Links und interaktive Komponenten
  • Primäre Aktionsschaltflächen

​
Markenfarbe festlegen

  1. Klicken Sie auf das Farbfeld, um den Farbwähler zu öffnen
  2. Wählen Sie Ihre gewünschte Farbe, oder
  3. Geben Sie einen Hex-Farbcode direkt ein (z.B. #171717)
  4. Klicken Sie auf das Zurücksetzen-Symbol, um die Standardfarbe wiederherzustellen
Wählen Sie eine Markenfarbe, die zur Primärfarbe Ihrer Website passt, für ein einheitliches Erscheinungsbild. Stellen Sie ausreichenden Kontrast für die Barrierefreiheit sicher.

​
Farbüberschreibungen

Passen Sie bestimmte Elemente Ihres Widgets mit individuellen Farbüberschreibungen fein an. Jede Überschreibung kann unabhängig aktiviert oder deaktiviert werden.

​
Verfügbare Farbüberschreibungen

FarbeinstellungWas sie beeinflusstStandard
Benutzernachricht-FarbeHintergrundfarbe der von Besuchern gesendeten Nachrichten#171717
Widget-Header-FarbeHintergrundfarbe der Widget-Kopfleiste#171717
Bubble-FarbeHintergrundfarbe des Chat-Bubble-Buttons#171717
Hinweis-HintergrundHintergrundfarbe von Hinweis-/Tooltip-Elementen#171717

​
Farbüberschreibungen konfigurieren

Für jede Farbüberschreibung:
  1. Schalten Sie den Schalter auf Aktiviert, um die Überschreibung einzuschalten
  2. Klicken Sie auf das Farbfeld, um den Farbwähler zu öffnen
  3. Wählen Sie Ihre Farbe oder geben Sie einen Hex-Code ein
  4. Verwenden Sie die Zurücksetzen-Schaltfläche, um den Standardwert wiederherzustellen
Wenn eine Farbüberschreibung deaktiviert ist, verwendet das Widget automatisch die Standardfarbe. Aktivieren Sie Überschreibungen nur, wenn Sie benutzerdefinierte Farben benötigen.

​
Chat-Bubble

Die Chat-Bubble ist die schwebende Schaltfläche, auf die Besucher klicken, um das Chat-Widget zu öffnen. Passen Sie ihre Position und ihr Erscheinungsbild an.

​
Bubble-Position

Wählen Sie, wo die Chat-Bubble auf Ihrer Website erscheint:
PositionBeschreibung
LinksBubble erscheint in der unteren linken Ecke
RechtsBubble erscheint in der unteren rechten Ecke (Standard)

​
Benutzerdefiniertes Chat-Symbol

Ersetzen Sie das Standard-Chat-Symbol durch Ihr eigenes:
  1. Aktivieren Sie Chat-Symbol, um das benutzerdefinierte Symbol zu aktivieren
  2. Klicken Sie auf Hochladen, um ein Bild von Ihrem Gerät auszuwählen
  3. Unterstützte Formate: PNG, JPG, SVG
  4. Empfohlene Größe: 48x48 Pixel oder größer
Wenn Sie den Schalter für das benutzerdefinierte Symbol deaktivieren, kehrt das Widget zum Standard-Chat-Symbol zurück.

​
Änderungen speichern

Nach dem Vornehmen von Styling-Änderungen:
  1. Überprüfen Sie Ihre Änderungen im Live-Vorschau-Panel
  2. Klicken Sie auf Änderungen speichern, wenn Sie zufrieden sind
  3. Das Widget auf Ihrer Website wird automatisch aktualisiert
Wenn Sie mit ungespeicherten Änderungen wegnavigieren, werden Sie aufgefordert, diese zu speichern oder zu verwerfen.

​
Änderungen verwerfen

Klicken Sie auf Verwerfen, um alle Änderungen auf den letzten gespeicherten Zustand zurückzusetzen. Dies ist nützlich, wenn Sie von vorne beginnen möchten oder Änderungen vorgenommen haben, die Sie nicht behalten möchten.

​
Best Practices

Verwenden Sie die Primärfarben Ihrer Website für die Markenfarbe und Überschreibungen. Einheitliche Farben schaffen ein professionelles, integriertes Erlebnis.
Zeigen Sie Ihr Widget sowohl im hellen als auch im dunklen Theme in der Vorschau an, um sicherzustellen, dass es unabhängig von den Benutzerpräferenzen oder dem Website-Design gut aussieht.
Wählen Sie Farben mit ausreichenden Kontrastverhältnissen. Vermeiden Sie kontrastarme Kombinationen, die Text schwer lesbar machen.
Platzieren Sie die Chat-Bubble dort, wo sie keine wichtigen Inhalte verdeckt. Die untere rechte Ecke ist üblich, aber die linke Positionierung funktioniert bei manchen Layouts ebenfalls gut.
Testen Sie Ihr Styling auf mobilen Geräten. Das Widget sollte auf kleineren Bildschirmen gut aussehen und einfach zu bedienen sein.

​
Styling-Referenz

​
Standardwerte

EinstellungStandardwert
ErscheinungsbildHell
Markenfarbe#171717
Benutzernachricht-Farbe#171717
Widget-Header-Farbe#171717
Bubble-Farbe#171717
Hinweis-Hintergrund#171717
Bubble-PositionRechts
Avatar-Hintergrundfarbe#FFFFFF
Avatar-Hintergrund-Transparenz70%

​
Farbformat

Alle Farben verwenden das Hexadezimalformat: 
#RRGGBB

Beispiele:
- #171717 (dunkelgrau - Standard)
- #FFFFFF (weiß)
- #3B82F6 (blau)
- #10B981 (grün)
- #EF4444 (rot)

​
Nächste Schritte

Widget-Konfiguration

Konfigurieren Sie Widget-Inhalte wie Begrüßungsnachrichten und vorgeschlagene Fragen.

Lokalisierung

Richten Sie Sprachoptionen für internationale Besucher ein.

Widget bereitstellen

Holen Sie sich den Einbettungscode und fügen Sie Ihr gestaltetes Widget zu Ihrer Website hinzu.

Im Playground testen

Testen Sie die Antworten Ihres Agenten, bevor Sie live gehen.