Widget-Anpassung
Passen Sie das Chat-Widget an Ihre Marke an und lassen Sie es genau so funktionieren, wie Sie es wünschen. Alle Anpassungen erfolgen in Ihrem Dashboard — Änderungen werden automatisch auf Ihrer Website übernommen, ohne dass Sie den Embed-Code anfassen müssen.
Sie finden die Einstellungen unter Dashboard → Chatbots → wählen Sie Ihren Chatbot aus:
- Der Widget-Tab steuert das Erscheinungsbild (Position, Farben, Größe, Texte)
- Der Behavior-Tab steuert, wie das Widget mit Besuchern interagiert
Klicken Sie oben auf der Seite auf Änderungen speichern, um Ihre Bearbeitungen anzuwenden.
Widget-Tab: Erscheinungsbild
Position
Wählen Sie, wo das Widget auf Ihrer Website erscheint:
| Position | Beschreibung |
|---|---|
| Bottom Right | Schwebende Chat-Blase in der unteren rechten Ecke (Standard) |
| Bottom Left | Schwebende Chat-Blase in der unteren linken Ecke |
| Inline (Embedded) | Widget ist direkt auf der Seite eingebettet, statt zu schweben |
Bei der Inline-Position wird der Chat an der Stelle eingebettet, an der das Embed-Skript platziert ist, und ist immer geöffnet — keine Blase, kein Schließen-Button. Ideal für dedizierte Chat- oder Support-Seiten. Siehe Widget Embedding für Details.
Farbthema
Wählen Sie eines von drei Farb-Voreinstellungen:
| Preset | Beschreibung |
|---|---|
| Default | Das Standard-Farbschema von ChatReact |
| Brand | Die Markenfarben Ihres Unternehmens aus den Company Settings |
| Custom | Wählen Sie eigene Farben |
Die Brand-Voreinstellung ist nur verfügbar, sobald Markenfarben festgelegt wurden. Gehen Sie zu Ihren Company Settings, um Farben von Ihrer Website zu extrahieren.
Bei Auswahl von Custom können Sie vier Basisfarben festlegen:
- Primary — Blase, Header-Verlauf, Buttons und Besucher-Nachrichten
- Secondary — zweite Farbe des Header-Verlaufs
- Background — Hintergrund des Chat-Fensters
- Text — Farbe des Nachrichtentextes
Erweiterte Farbeinstellungen
Brauchen Sie mehr Kontrolle? Bei Auswahl der Custom-Voreinstellung klappen Sie Erweiterte Farbeinstellungen auf, um die automatisch berechneten Farben zu überschreiben:
- Visitor Messages — Hintergrund- und Textfarbe der Besucher-Nachrichtenblasen
- Bot Messages — Hintergrund- und Textfarbe der Bot-Nachrichtenblasen
- Header Text Color — Farbe des Titels und Untertitels im Widget-Header
Alles, was Sie unangetastet lassen, wird automatisch für guten Kontrast berechnet. Jede Überschreibung verfügt über eine Auf automatisch zurücksetzen-Schaltfläche, um zur berechneten Farbe zurückzukehren.
Größe & Stil
| Einstellung | Bereich | Standard |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
Auf kleinen Mobilbildschirmen schaltet das Widget automatisch auf ein Layout in voller Breite um, unabhängig von diesen Abmessungen.
Logo
Aktivieren Sie Use company logo in widget header, um Ihr Firmenlogo im Chat-Header anzuzeigen. Das Logo selbst wird in Ihren Company Settings hochgeladen — empfohlen: quadratisch, mindestens 200×200 px (JPG, PNG, GIF, WebP oder SVG, max. 5 MB).
Diese Option ist im Professional-Plan und höher sowie in allen Agency-Plänen verfügbar.
Header-Titel, Untertitel & Bubble-Text
| Feld | Beschreibung | Standard |
|---|---|---|
| Header Title | Titel, der im Chat-Fenster-Header angezeigt wird | "Chat with us" |
| Header Subtitle | Kleinere Zeile unter dem Titel | "We typically reply within minutes" |
| Bubble Text | Text, der neben der Chat-Blase angezeigt wird, wenn das Widget geschlossen ist | Keine |
Wenn Sie niemals einen Titel oder Untertitel festgelegt haben, zeigt das Widget den Standardtext an — automatisch lokalisiert in die Sprache des jeweiligen Besuchers.
Wie der Header-Untertitel funktioniert: Solange Sie keinen Untertitel konfiguriert haben, zeigt das Widget den lokalisierten Standard an, und das Einstellungsformular füllt diesen Standard vorab aus, damit Sie sehen und bearbeiten können, was Besucher erhalten. Um den Untertitel vollständig auszublenden, löschen Sie das Feld und speichern Sie — ein absichtlich geleerter Untertitel bleibt verborgen.
Der Bubble-Text erscheint als kleines Label neben der geschlossenen Chat-Blase (z. B. "Got questions?"). Lassen Sie es leer, um nur die runde Blase anzuzeigen.
Widget-Übersetzungen
Wenn Ihr Chatbot mehrere Sprachen unterstützt, erscheint unter den Erscheinungsbildeinstellungen eine Widget Translations-Karte. Dort können Sie die Willkommensnachricht, die Fallback-Nachricht, den Header-Titel, den Header-Untertitel und den Bubble-Text für jede aktivierte Sprache übersetzen.
Die Willkommens- und Fallback-Nachrichten selbst werden im Persona-Tab Ihrer Chatbot-Einstellungen konfiguriert.
Live-Vorschau
Die rechte Spalte des Widget-Tabs zeigt eine Live Preview Ihres Widgets, die sich aktualisiert, während Sie Einstellungen ändern. Sie ist interaktiv: Schließen Sie das Chat-Fenster mit dem X, um die geschlossene Blase zu sehen (inklusive Ihres Bubble-Texts), und klicken Sie auf die Blase, um es wieder zu öffnen.
Behavior-Tab: Interaktion
Verhaltenseinstellungen
| Einstellung | Beschreibung | Standard |
|---|---|---|
| Proactive Greeting | Bot begrüßt Besucher automatisch nach einer Verzögerung (1–10 Sekunden) | An, 3 s |
| Auto-Open | Widget öffnet sich automatisch für Besucher nach einer Verzögerung (1–15 Sekunden) | Aus, 5 s |
| Sound Enabled | Sounds für Benachrichtigungen abspielen | An |
| Typing Indicator | Animation anzeigen, während der Bot tippt | An |
| Pre-Chat Form | Vor dem Chat Besucherinformationen erfassen | Aus |
| Show on Mobile | Widget auf Mobilgeräten anzeigen | An |
Maximale Nachrichtenlänge
Begrenzen Sie, wie viele Zeichen Besucher pro Nachricht eingeben können (100–10.000 Zeichen, Standard 2.000). Dies hilft, übermäßige Nutzung durch sehr lange Eingaben zu verhindern. Löschen Sie das Feld oder klicken Sie auf Limit entfernen, um Nachrichten jeder Länge zuzulassen.
Pre-Chat-Formular
Wenn das Pre-Chat-Formular aktiviert ist, füllen Besucher ein kurzes Formular aus, bevor das Gespräch beginnt. Sie konfigurieren die Felder selbst:
- Feldtypen: Text, Email, Phone, Textarea
- Jedes Feld hat ein Label, einen optionalen Placeholder und einen Pflichtfeld-Schalter
- Reihenfolge der Felder mit den Hoch-/Runter-Buttons ändern oder Felder entfernen
Wenn Ihr Chatbot mehrere Sprachen unterstützt, erscheint unter dem Feld-Editor ein Übersetzungsbereich. Geben Sie Übersetzungen für jede Sprache manuell ein oder klicken Sie auf Mit AI übersetzen, um alle Labels und Placeholders automatisch zu übersetzen.
Live-Chat
Der Behavior-Tab enthält außerdem die Live Chat Settings-Karte. Aktivieren Sie Live-Chat, damit Besucher mit Ihren menschlichen Agenten sprechen können, und wählen Sie einen Modus:
| Modus | Beschreibung |
|---|---|
| Handoff Only | Live-Chat nur, wenn der Bot nicht helfen kann |
| Standalone | Besucher können direkt mit Agenten chatten |
| Both | Sowohl Handoff als auch direkter Live-Chat verfügbar |
Live Chat ist im Professional-Plan und höher sowie in allen Agency-Plänen verfügbar. Siehe Live Chat, um eingehende Gespräche zu verwalten.
Branding
In Plänen, die White-Label beinhalten, erscheint am unteren Ende des Behavior-Tabs eine Branding-Karte. Das ChatReact-Branding ist in diesen Plänen standardmäßig verborgen — aktivieren Sie Show "Powered by ChatReact", wenn Sie es trotzdem in der Widget-Footer anzeigen möchten.
Lernphase
Während sich ein neuer Chatbot in seiner Lernphase befindet, können Sie steuern, wie vorsichtig er antwortet — Cautious, Balanced (empfohlen) oder Confident — im Confidence-Tab derselben Einstellungsseite. Dieser Tab erscheint in Plänen, die den Improvement Agent enthalten. Siehe den Improvement Agent-Leitfaden für Details.