Stil & Branding

Das Chat-Widget ist vollständig anpassbar. Die Einstellungen befinden sich an zwei Stellen:

Widget → Stil — Farben, Schriften, Nachrichtenblasen, Widget-Größe, feste Links und Footer.
Widget → Inhalt — Bot-Name, Begrüßung, Avatar, Sprache und Branding-Text.

Jede Änderung wird sofort in der Live-Vorschau rechts angezeigt, und die meisten Einstellungen werden beim Bearbeiten automatisch gespeichert.

Design

Wählen Sie Hell oder Dunkel. Dies legt das Basis-Farbschema des gesamten Widgets fest — Hintergrund, Text, Rahmen und Eingabefelder.

Die Wahl von Dunkel wirkt sich nicht auf das Design Ihrer Website aus — nur auf das Widget.

Die primäre Akzentfarbe für Kopfzeile, Senden-Button und Benutzer-Sprechblasen. Klicken Sie auf das Farbfeld, um den Picker zu öffnen, oder geben Sie direkt einen Hex-Wert ein — z. B. #1a56db.

Farbe und Symbol der Starter-Bubble

Die schwebende Schaltfläche, die Besucher anklicken, um den Chat zu öffnen.

Farbe — standardmäßig die Widget-Farbe, wenn nicht separat gesetzt.
Symbol — das Standard-Chat-Symbol, ein eigenes Emoji oder ein hochgeladenes kleines PNG/SVG-Bild (empfohlen: 40×40px).

Bot-Avatar

Wird neben jeder Bot-Nachricht angezeigt. Optionen:

Emoji — beliebiges Emoji-Zeichen. Einfach und in kleiner Größe gut lesbar.
Bild — laden Sie ein PNG oder JPG hoch. Wird kreisförmig zugeschnitten. Empfohlene Größe: 80×80px.

Chat-Header

Im Block Stil → Chat-Header können Sie festlegen:

Untertitel — kleiner Text unter dem Bot-Namen (z. B. „KI-Assistent" oder die Rolle des Bots).
Namensfarbe und Untertitelfarbe — überschreiben die Textfarben der Kopfzeile.
Reset-Tooltip — die Beschriftung der Schaltfläche „Neue Konversation".

Den Bot-Namen selbst und die Begrüßungsnachricht (die erste Nachricht, die Besucher sehen) legen Sie unter Widget → Inhalt fest. Halten Sie die Begrüßung freundlich und handlungsorientiert:

Hallo! 👋 Ich bin Ihr Support-Assistent. Fragen Sie mich alles zu unseren Produkten oder Diensten.

Nachrichtenblasen

Im Block Stil → Nachrichten:

Eingabefeld-Platzhalter — Hinweistext im Eingabefeld (Standard „Nachricht schreiben…").
Schriftgröße — Basis-Schriftgröße der Konversation.
Benutzer-Sprechblase — Hintergrund- und Textfarbe der Besuchernachrichten (aktivieren Sie Überschreiben, um einen eigenen Hintergrund zu setzen).
Bot-Sprechblase — Hintergrund- und Textfarbe der Bot-Antworten.

Ziehen Sie unter Stil → Widget-Größe die Schieberegler, um die Abmessungen des Chat-Fensters festzulegen:

Breite — 240 bis 520 px
Höhe — 360 bis 800 px

Die hier gesetzte Größe gilt für das eingebettete Widget auf Ihrer Website, nicht nur für die Vorschau im Dashboard. Auf Mobilgeräten füllt das Widget immer den ganzen Bildschirm aus.

Standardmäßig erkennt das Widget die Sprache des Besuchers automatisch aus dessen Browser und lokalisiert alle eingebauten Beschriftungen (Schaltflächen, Formularfelder, Platzhalter). Um eine bestimmte Sprache zu erzwingen, wählen Sie sie aus dem Dropdown Sprache auf der Stil-Registerkarte (Englisch, Ukrainisch, Polnisch, Deutsch, Spanisch, Französisch, Italienisch).

Dies steuert nur die Oberflächen-Beschriftungen des Widgets. Der Bot antwortet immer in der Sprache, in der der Besucher schreibt.

Feste Links

Unter Stil → Feste Links können Sie bis zu 6 Links anheften, die bei den Bot-Antworten erscheinen — praktisch für eine Kontaktseite, Preise oder einen „Demo buchen"-Aufruf.

Legen Sie für jeden Link eine Beschriftung und eine URL fest (nur http/https). Sie können außerdem steuern:

Hintergrund / Textfarbe / Größe — passend zu Ihrer Marke.
Platzierung — Unter jeder Nachricht (unter jeder Antwort) oder Unten im Chat (eine feste Leiste über dem Eingabefeld).

Unter Stil → Chat-Footer können Sie eigenes HTML unter der Konversation hinzufügen — einen Disclaimer, einen Link zur Datenschutzerklärung oder Öffnungszeiten.

Aus Sicherheitsgründen sind nur diese Tags erlaubt: <a>, , , , , ,  . Links öffnen sich automatisch in einem neuen Tab.

Der eigene Footer ist im Business-Plan und höher verfügbar.

Branding

Standardmäßig erscheint unten im Widget ein kleiner Link „Powered by BotChata".

Um ihn durch Ihre eigene Marke zu ersetzen, gehen Sie zu Widget → Inhalt:

Eigener Markenname — der Name Ihres Unternehmens.
Eigene Marken-URL — verlinkt den Markentext mit Ihrer Website.

Um das Branding vollständig auszublenden, benötigt Ihr Konto einen Plan mit White-Label (Enterprise/Agency). Siehe Tarife & Abrechnung.

Kontakt-Schaltfläche

Um einen direkten Kontaktlink im Widget-Header hinzuzufügen, setzen Sie Widget → Inhalt → Contact URL auf mailto:support@yoursite.com oder tel:+1234567890. Das Kontaktsymbol erscheint, wenn das Feld gefüllt ist, und ist ausgeblendet, wenn leer.

Spracheingabe

Wenn der Browser des Besuchers Spracherkennung unterstützt (Chrome, Edge, Safari), erscheint im Eingabefeld automatisch ein Mikrofonsymbol — ohne Einrichtung. Der Besucher kann eine Nachricht diktieren, das Transkript prüfen und vor dem Senden bearbeiten. In Browsern ohne Unterstützung (z. B. Firefox) ist das Mikrofon stillschweigend ausgeblendet.

Das ＋-Starter-Menü

Der Widget-Footer hat ein einzelnes ＋-Menü, das Buchungen und die von Ihnen ausgewählten Formulare oder Widgets enthält. Fügen Sie ein Element hinzu, indem Sie „Im Widget-Menü anzeigen" bei einem benutzerdefinierten Formular (Benutzerdefinierte Formulare) oder einem Builder-Widget (Widget-Builder) aktivieren. Buchungen erscheinen hier automatisch, wenn sie aktiviert sind. Das Menü ist ausgeblendet, wenn es nichts anzuzeigen gibt.