Erscheinungsbild
Wie der Agent auf der Website aussieht.
Einstellungen öffnen
- Das Dashboard aufrufen
- Einen Agenten auswählen
- Settings > Interface öffnen
Theme
Farbschema des Chat-Widgets:
| Theme | Beschreibung |
|---|---|
| Light | Heller Hintergrund, dunkle Schrift |
| Dark | Dunkler Hintergrund, helle Schrift |
| System | Folgt der Einstellung des Endgeräts |
:::tip Einheitliches Auftreten Ein Theme, das zum Website-Design passt, wirkt weniger wie ein Fremdkörper. :::
Anzeigename
Der Name in der Kopfzeile des Widgets — sichtbar für Besucherinnen und Besucher.
Beispiele:
- „Support"
- „KI fragen"
- „Assistent"
Bleibt das Feld leer, erscheint kein Name in der Kopfzeile.
Begrüßungsnachricht
Die Nachricht, die beim Öffnen des Widgets erscheint.
Beispiele:
- „Guten Tag. Wobei ist Unterstützung nötig?"
- „Willkommen. Fragen zu den Produkten sind hier richtig."
- „Hier gibt es Antworten rund um Bestellung und Versand."
:::tip Erwartung setzen Eine gute Begrüßung sagt, wofür der Agent zuständig ist. :::
Vorgeschlagene Nachrichten
Vorformulierte Einstiege, die sich per Klick senden lassen:
- Auf Add Suggested Message klicken
- Text eingeben
- Bis zu vier Vorschläge hinterlegen
Beispiele:
- „Welche Tarife gibt es?"
- „Wie funktioniert der Einstieg?"
- „Hilfe zum Konto"
Position
Wo das Widget erscheint:
- Unten rechts (Standard)
- Unten links
Markenfarbe
Die primäre Farbe gilt für:
- Sende-Schaltfläche
- Nachrichtenblasen der Besuchenden
- Links und Hervorhebungen
Eingabe als Hex-Wert (etwa #5045e6) oder über die Farbauswahl.
Avatar
Ein eigenes Avatarbild erscheint neben den Antworten des Agenten.
Anforderungen:
- Quadratisches Bild (Seitenverhältnis 1:1)
- PNG oder JPG
- Mindestens 64 × 64 Pixel
Vorschau
Die Seite zeigt eine Live-Vorschau des Widgets. Änderungen sind vor dem Speichern sichtbar.
Mobile Darstellung
Das Widget ist für mobile Geräte optimiert:
- Vollbildmodus auf kleinen Displays
- Ausreichend große Schaltflächen
- Reaktionsfähiges Layout
Speichern
Mit Save werden die Anpassungen übernommen und wirken sofort auf der Website.
Nächste Schritte
- Einbettungscode holen — Agent auf der Website einbinden
- Im Playground testen — Design prüfen