Erscheinungsbild anpassen (Visuals)
Unter dem Tab Visuals gestalten Sie das gesamte Aussehen Ihres Chatbots – vom Button über das Chatfenster bis hin zu den einzelnen Nachrichten-Blasen. Alle Änderungen werden sofort in der Live-Vorschau rechts neben den Einstellungen angezeigt, sodass Sie das Ergebnis direkt sehen, bevor Sie speichern.
Chat-Button
Der Chat-Button ist das Element, das Ihre Besucher auf der Website sehen und anklicken, um den Chat zu öffnen.
- Position: Rechts unten, links unten oder rechts mittig auf der Seite.
- Stil: Rund (nur Icon) oder mit Beschriftung (Icon + Text).
- Beschriftung: Der Text, der auf dem Button angezeigt wird, z.B. „Chat starten“ oder „Fragen? Hier klicken“.
- Icon: Wählen Sie aus 10 verschiedenen Icons (Sprechblase, Roboter, Blitz, Gehirn, Headset und weitere).
- Icon-Farbe: Die Farbe des Icons auf dem Button.
- Hintergrundfarbe: Einfarbig oder als Farbverlauf (Gradient) mit zwei Farben. Bei Farbverläufen wählen Sie zwischen linear und radial sowie den Winkel.
- Hover-Effekt: Was passiert, wenn ein Besucher mit der Maus über den Button fährt – Shine/Glow (Leuchten), Pulse (Pulsieren), Scale (Vergrößern) oder kein Effekt.
Chatfenster
Das Chatfenster öffnet sich, wenn der Besucher auf den Button klickt.
- Titel: Die Überschrift im Kopfbereich des Fensters, z.B. „Wie kann ich Ihnen helfen?“ oder Ihr Firmenname.
- Breite & Höhe: Die Abmessungen des Chatfensters in Pixeln. Besucher können das Fenster zusätzlich über einen Button in der Titelleiste vergrößern.
- Hintergrundfarbe: Einfarbig oder als Farbverlauf – bestimmt den Hintergrund des gesamten Chatfensters.
- Textfarbe: Die Standardtextfarbe im Chatfenster.
- Linkfarbe: Die Farbe von klickbaren Links in den Bot-Antworten.
- Öffnungsanimation: Wie das Fenster erscheint – Boost (schnelles Aufziehen), Bounce (federndes Einblenden), Fade (sanftes Einblenden) oder keine Animation.
Nachrichten-Blasen
Die Nachrichten von Besuchern und Bot werden in farblich unterscheidbaren Blasen dargestellt.
- Besucher-Blase: Hintergrundfarbe (einfarbig oder Gradient) für die Nachrichten des Besuchers.
- Bot-Blase: Hintergrundfarbe (einfarbig oder Gradient) für die Antworten des Bots.
Durch unterschiedliche Farben für beide Seiten wird das Gespräch übersichtlich und leicht lesbar.
Eingabefeld
Das Textfeld, in das Besucher ihre Nachrichten tippen.
- Hintergrundfarbe: Einfarbig oder als Farbverlauf. Wählen Sie eine Farbe, die sich gut vom Chatfenster-Hintergrund abhebt, damit das Eingabefeld klar erkennbar ist.
Rahmen & Schatten
- Rahmen: Aktivieren Sie optional einen Rahmen um das Chatfenster. Sie bestimmen Farbe, Breite und Eckenradius (abgerundete Ecken).
- Schatten: Ein optionaler Schatteneffekt verleiht dem Chatfenster mehr Tiefe. Wählen Sie zwischen kleinem, mittlerem und großem Schatten.
Typografie
- Schriftfamilie: Wählen Sie eine Schriftart aus der Google Fonts-Bibliothek oder belassen Sie es bei der Systemschrift. Hinweis: Bei Auswahl einer Google Font wird diese vom Google-Server nachgeladen. Wenn keine Google Font gewählt ist, werden ausschließlich Systemschriften verwendet – vollständig DSGVO-konform ohne externe Anfragen.
- Schriftgröße Nachrichten: Die Textgröße in den Chat-Nachrichten.
- Schriftgröße Titel: Die Textgröße der Fensterüberschrift.
Powered by Nachbrand
Am unteren Rand des Chatfensters wird je nach Lizenzplan der Hinweis „powered by Nachbrand“ angezeigt.
- Standard-Lizenz: Der Hinweis ist immer sichtbar. Farbe und Größe werden automatisch angepasst, um auf Ihrem gewählten Hintergrund gut lesbar zu sein.
- Pro- und Enterprise-Lizenz: Sie können den Hinweis ausblenden oder Farbe und Schriftgröße frei anpassen.
Tipps für ein stimmiges Design
- Orientieren Sie sich an den Farben Ihrer Website – der Chatbot sollte sich harmonisch in Ihr bestehendes Design einfügen.
- Achten Sie auf ausreichend Kontrast zwischen Text- und Hintergrundfarben, damit die Nachrichten gut lesbar sind.
- Testen Sie das Ergebnis auf Mobilgeräten – der Chatbot passt sich automatisch an kleinere Bildschirme an, aber die gewählten Farben und Größen sollten auch dort gut aussehen.
- Weniger ist oft mehr: Ein dezentes, professionelles Erscheinungsbild wirkt vertrauenswürdiger als ein überladenes, buntes Design.