Thema & Erscheinungsbild
Die Thema-Seite ist der Ort, an dem Sie Ihrem Assistenten seine visuelle Identität verleihen — Name, Avatar, Markenfarben — und die Kanäle auswählen, in denen er aktiv sein wird. Alles wird live auf der Seite selbst angezeigt, sodass Sie ohne Verlassen des Dashboards iterieren können.
Lassen Sie Ihren KI-Agenten markenkonform aussehen · Thema + GDPR-Widget
→ Admin-Pfad: Anpassung → Thema (/admin/chatModel/{id}/settings/theme)
Was Sie konfigurieren
Die Seite ist in drei Schritte unterteilt. Sie können jederzeit vorwärts und rückwärts navigieren; Änderungen in Schritt 2 werden gespeichert, wenn Sie auf Speichern & Weiter klicken.
Schritt 1 — Identität
- Name — der öffentliche Name Ihres Assistenten (z. B. "Emma", "Support Bot"). Überall sichtbar, wo Ihr Assistent mit Benutzern kommuniziert.
- Avatar — das Bild, das Benutzer im Chatkopf und in den Nachrichtenblasen sehen. Laden Sie ein quadratisches Bild hoch; wir passen es an und liefern es über unser CDN aus.
Der Name ist das, wie Ihre Benutzer den Bot ansprechen. Wählen Sie etwas, das zur Marke passt und leicht zu tippen ist — es wird zur Identität des Assistenten in allen Kanälen.
Schritt 2 — Farben
Zwei Farben definieren die gesamte Widget-Palette:
| Farbe | Wo sie angezeigt wird |
|---|---|
Primär (brand.200) | Hintergrund des schwebenden Buttons, Akzente in Nachrichtenblasen, Hover-Zustände |
Sekundär (brand.500) | Senden-Button, Links im Gespräch, Fokus-Ringe, aktive Zustände |
Beide Eingaben akzeptieren jeden HEX-Wert. Die Live-Vorschau am unteren Ende der Seite spiegelt Ihre Änderungen in Echtzeit wider, sodass Sie ein Paar auswählen können, das gut auf Ihrer Website aussieht, bevor Sie speichern.
Warum nur zwei Farben? Unser Designsystem leitet eine vollständige 5-Stufen-Palette (100/200/500/700/900) von diesen beiden Ankern ab. Sie setzen den Ton; wir halten den Rest konsistent.
Schritt 3 — Integrieren
Sobald Ihr Assistent gut aussieht, springen Sie direkt zu dem Integrationskanal Ihrer Wahl:
- Web-Widget — Einbettungscode für jede Website, mit vollständigen Steuerungen für Button und Layout
- WordPress — automatische Einfügung über das WordPress-Plugin
- PrestaShop — automatische Einfügung über das PrestaShop-Modul
- Shopify — verbinden Sie Ihren Shop und fügen Sie den Chatbot automatisch ein
- Joomla — automatische Einfügung über das Joomla-Plugin
Jede Karte führt Sie zur speziellen Integrationsseite, auf der Sie den Button-Stil, die Position, den Feedback-Modus, die Sprachfunktionen und das kanal-spezifische Verhalten anpassen.
Live-Vorschau
Ein Live-Chat-Widget wird direkt auf der Thema-Seite angezeigt. Es wird automatisch neu geladen, jedes Mal, wenn Sie eine Farbe ändern, sodass Sie das genaue Rendering sehen, das Ihre Endbenutzer erhalten werden — es ist nicht notwendig, zu veröffentlichen oder einen anderen Tab zu öffnen.
Die Vorschau verwendet dasselbe universal-chatbot.js-Bundle wie die Produktion, sodass das, was Sie sehen, das ist, was Ihre Besucher sehen werden.
Berechtigungen
| Aktion | Erforderliche Berechtigung |
|---|---|
| Die Thema-Seite anzeigen | THEME_READ |
| Farben ändern / Thema speichern | THEME_UPDATE |
| Den Assistenten umbenennen | CHAT_MODEL_UPDATE |
Mitglieder ohne THEME_UPDATE sehen die Seite im Nur-Lesen-Modus (Eingaben deaktiviert, kein Speichern-Button). Siehe Zugriffskontrolle für Informationen zur Zuweisung dieser Berechtigungen.
Tipps
- Testen Sie auf Ihrem echten Hintergrund. Öffnen Sie Ihre Website in einem zweiten Tab, während Sie Farben auswählen — was im Dashboard gut aussieht, kann mit Ihrem Hero-Bereich kollidieren.
- Halten Sie den Kontrast. Die sekundäre Farbe wird auch für klickbaren Text im Gespräch verwendet. Wenn Benutzer ihn nicht lesen können, werden sie nicht klicken.
- Passen Sie Ihre CTA an, nicht Ihr Logo. Das Widget ist eine interaktive Fläche, also verankern Sie es an der Aktionsfarbe Ihrer Website (dem "Jetzt kaufen" / "Anmelden"-Ton) und nicht an der Farbe Ihres Logos.
- Avatar ist wichtiger, als Sie denken. Ein echtes Gesicht oder ein stilisierter Charakter konvertiert besser als ein generisches Roboter-Icon — Benutzer öffnen den Chat häufiger, wenn er menschlich aussieht.
Verwandt
- Biografie — definieren Sie die Persönlichkeit und Entscheidungsregeln Ihres Assistenten
- Integration des Chatbots — betten Sie ihn auf einer Website ein
- Kanäle — verbinden Sie Messaging-Plattformen
- Zugriffskontrolle — verwalten Sie, wer das Thema bearbeiten kann