Branding & Media

Pfad: /dashboard/settings (Tab Branding) · Berechtigung: Modul Einstellungen

Passen Sie die visuelle Identität Ihres KI-Assistenten an Ihre Marke an. Das Branding wird sowohl auf das Dashboard als auch auf das Widget angewendet, das Ihre Benutzer sehen.

Logo

Ihr Logo erscheint in der Kopfzeile des Dashboards und optional im Widget.

Anforderung	Details
Mindestbreite	200px
Maximale Anzeigegröße	Automatische Skalierung auf 350px Breite
Empfohlenes Format	PNG mit transparentem Hintergrund
Upload-Methode	Drag-and-Drop oder Dateiauswahl

Tipps:

Verwenden Sie ein transparentes PNG für eine saubere Ausrichtung auf hellen und dunklen Hintergründen.
Laden Sie das Logo in der doppelten (2x) gewünschten Anzeigegröße hoch, um eine gestochen scharfe Darstellung auf Retina-Displays zu gewährleisten.
Vermeiden Sie sehr hohe Logos — breite/horizontale Formate funktionieren in der Kopfzeile am besten.

Favicon

Das Favicon erscheint in Browser-Tabs und Lesezeichen.

Anforderung	Details
Mindestgröße	16x16 Pixel
Verarbeitung	Quadratisch zugeschnitten, skaliert auf max. 48x48
Empfohlenes Format	PNG oder SVG

Tipps:

Verwenden Sie ein einfaches Icon, einen Buchstaben oder ein Symbol — komplexe Bilder werden in kleinen Größen unleserlich.
Wenn Ihr Logo sehr detailliert ist, erstellen Sie eine vereinfachte Favicon-Version (z. B. nur den ersten Buchstaben oder das Icon-Symbol).

Farben

Einstellung	Steuert was	Beispiel
Primärfarbe	Hauptfarbe des Themes — Widget-Header, Buttons, aktive Zustände, Sidebar-Highlights	`#3b82f6` (Blau), `#10b981` (Grün)
Sekundärfarbe	Akzentfarbe — Hover-Zustände, Links, sekundäre Buttons	`#6366f1` (Indigo), `#f59e0b` (Bernstein)

Geben Sie Hex-Farbcodes direkt ein oder nutzen Sie die integrierte Farbauswahl. Änderungen werden sofort in der Dashboard-Vorschau angezeigt.

Tipps zur Farbwahl

Markentreue — Verwenden Sie die primäre Markenfarbe Ihres Unternehmens für Konsistenz zwischen Ihrer Website und dem Widget.
Kontrast sicherstellen — Dunkle Farben eignen sich am besten für Header und Buttons. Vermeiden Sie sehr helle Farben, die auf weißem Hintergrund schwer lesbar sind.
Im Widget testen — Öffnen Sie nach der Farbanpassung das Widget auf Ihrer Website, um Lesbarkeit und visuelle Konsistenz zu prüfen.

Typografie

Wählen Sie aus Premium-Schriftfamilien. Die Schriftauswahl ist sprachsensitiv — sie zeigt automatisch Schriftarten an, die die Zeichensätze Ihrer aktivierten Sprachen unterstützen.

Sprache	Beispiel-Schriften
Englisch / Lateinisch	Inter, Poppins, Open Sans, Roboto, Montserrat
Hebräisch	Heebo, Assistant, Rubik, Open Sans Hebrew
Arabisch	Cairo, Tajawal, IBM Plex Arabic
CJK	Noto Sans CJK (automatisch ausgewählt)

Die gewählte Schriftart gilt sowohl für das Dashboard als auch für das Widget und sorgt so für ein einheitliches Markenerlebnis für Ihr Team und Ihre Nutzer.

Der Avatar ist das Profilbild, das Nutzer im Chat-Widget sehen. Er gibt den Ton für die Konversation an — freundlich, professionell oder markentypisch.

Option	Details	Bestens geeignet für
Galerie	Auswahl aus einem kuratierten Set vorgefertigter Avatare mit großen Vorschaukarten	Schnelle Einrichtung, professioneller Look
Upload	Eigenes Bild hochladen — wird automatisch zugeschnitten und als 100x100 PNG optimiert	Marken-Maskottchen, Teamfoto, benutzerdefiniertes Icon
URL	Externen Bild-Link einfügen	Dynamische Avatare von einem CDN (Hinweis: abhängig von Erreichbarkeit des externen Hosts)

Tipps für Avatare

Nutzen Sie ein freundliches Gesicht oder Icon — Avatare mit einem Gesicht (menschlich oder illustriert) steigern die Interaktion um 15–25 %.
Markenkonsistenz — Wenn Sie ein Maskottchen oder ein Icon-Logo haben, nutzen Sie dieses für sofortigen Wiedererkennungswert.
Vermeiden Sie textlastige Bilder — Bei 100x100 Pixeln wird Text unleserlich.

Benutzerdefiniertes CSS

Für fortgeschrittene Anpassungen können Sie eigenes CSS hinzufügen, das die Standard-Styles des Dashboards überschreibt. Dies ist nützlich für:

Abgleich mit spezifischen Corporate-Design-Vorgaben über Primär-/Sekundärfarben hinaus
Anpassung von Abständen, Rahmen oder Farbnuancen
Ausblenden oder Neupositionieren von UI-Elementen für spezielle Einsatzszenarien

Beispiel: Benutzerdefinierter Button-Stil

.btn-primary {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

Vorsicht geboten

Custom-CSS-Überschreibungen können das Dashboard-Layout beeinträchtigen, wenn sich Selektoren bei Updates ändern. Halten Sie Anpassungen minimal, dokumentieren Sie Ihre Änderungen und testen Sie nach jedem System-Update.

FAQ

F: Warum sieht mein Logo verschwommen aus?

Laden Sie ein größeres Quellbild hoch (mindestens die doppelte gewünschte Anzeigegröße) und lassen Sie das System die Skalierung übernehmen. Ein 700px breites Bild sieht bei einer Anzeige von 350px gestochen scharf aus.

F: Kann ich eine URL anstelle eines Uploads verwenden?

Ja, für Logos und Avatare. Aber externe URLs können ungültig werden, wenn der Host Pfade ändert oder offline geht. Ein direkter Upload ist zuverlässiger.

F: Wirken sich Branding-Änderungen sofort auf das Widget aus?

Ja. Änderungen am Branding (Farben, Logo, Avatar) werden für neue Widget-Sitzungen sofort wirksam. Bei bereits offenen Sitzungen ist eventuell ein Neuladen der Seite erforderlich.

F: Gilt das Branding pro Bot oder global?

Das Branding erfolgt pro Bot. Jeder Bot in einem Multi-Bot-Setup kann eigene Farben, Logos und Avatare haben.