---
title: Visuals
description: "**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…"
url: "https://www.nachbrand.de/docs/visuals/"
updated: "2026-03-14"
category: Visuals
---

# Visuals

**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.