> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cosmo.humanizing.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Styling
> Passen Sie das visuelle Erscheinungsbild Ihres Agenten mit Avataren, Farben, Hintergründen und Themes an Ihre Marke an
## Überblick
Die Styling-Einstellungen ermöglichen es Ihnen, das Aussehen und die Wirkung Ihres Chat-Widgets auf Ihrer Website anzupassen. Sie können alles vom Avatar-Charakter über Farben, Themes bis hin zur Widget-Positionierung anpassen, um ein nahtloses Markenerlebnis für Ihre Besucher zu schaffen.
Alle Styling-Änderungen können in Echtzeit vor dem Speichern in der Vorschau angezeigt werden. Nutzen Sie das Live-Vorschau-Panel, um genau zu sehen, wie Ihr Widget für Besucher erscheinen wird.
## Zugriff auf die Styling-Einstellungen
1. Navigieren Sie zu Ihrem Agenten im Dashboard
2. Klicken Sie auf **Bereitstellen** in der Seitenleiste
3. Wählen Sie **Chat-Widget** aus, um auf die Styling-Optionen zuzugreifen
Die Styling-Optionen sind im **Styling**-Tab organisiert, während Inhaltsoptionen wie Begrüßungsnachrichten und vorgeschlagene Fragen im **Inhalt**-Tab zu finden sind.
## Avatar
Der Avatar Ihres Agenten ist die visuelle Darstellung, die im Chat-Widget erscheint. Er schafft ein ansprechenderes, menschenähnlicheres Erlebnis für Besucher.
### Avatar auswählen
| Option | Beschreibung |
| ---------------------------- | ------------------------------------------------------------------- |
| **Aus Bibliothek auswählen** | Wählen Sie aus einer Sammlung vorgefertigter 3D-Avatar-Charaktere |
| **Jederzeit ändern** | Sie können Avatare jederzeit über die Widget-Einstellungen wechseln |
Um einen Avatar auszuwählen oder zu ändern:
1. Klicken Sie auf die Schaltfläche **Ändern** (oder **Auswählen**, wenn kein Avatar gesetzt ist)
2. Durchstöbern Sie die Avatar-Galerie
3. Klicken Sie auf einen Avatar, um ihn in der Vorschau anzuzeigen
4. Klicken Sie auf **Auswählen**, um Ihre Wahl zu bestätigen
Avatare sind animiert und können Antworten mittels Text-to-Speech sprechen, was ein interaktiveres Erlebnis für Ihre Besucher schafft.
### Avatar-Hintergrund
Sie können den Hintergrund hinter Ihrem Avatar anpassen:
| Einstellung | Beschreibung |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **Benutzerdefinierter Hintergrund** | Aktivieren, um eine benutzerdefinierte Hintergrundfarbe festzulegen |
| **Hintergrundfarbe** | Wählen Sie eine beliebige Farbe mit dem Farbwähler oder geben Sie einen Hex-Code ein |
| **Transparenz** | Passen Sie die Hintergrundtransparenz von 0% (vollständig transparent) bis 100% (vollständig undurchsichtig) an |
## Erscheinungsbild
Wählen Sie zwischen hellen und dunklen Themes für Ihr Chat-Widget, passend zum Design Ihrer Website.
### Theme-Optionen
Ein helles, klares Erscheinungsbild mit hellen Hintergründen und dunklem Text. Am besten geeignet für Websites mit hellen Farbschemata.
Ein dunkleres Erscheinungsbild mit dunklen Hintergründen und hellem Text. Ideal für Websites mit dunklen Farbschemata oder zur Reduzierung der Augenbelastung.
Um das Theme zu ändern:
1. Navigieren Sie zum **Styling**-Tab
2. Klicken Sie unter **Erscheinungsbild** auf die **Hell**- oder **Dunkel**-Karte
3. Das ausgewählte Theme wird mit einem Rahmen hervorgehoben
## Markenfarbe
Die Markenfarbe ist Ihre Primärfarbe, die im gesamten Widget erscheint. Sie wird verwendet für:
* Senden-Schaltfläche
* Aktive Elemente und Hervorhebungen
* Links und interaktive Komponenten
* Primäre Aktionsschaltflächen
### Markenfarbe festlegen
1. Klicken Sie auf das Farbfeld, um den Farbwähler zu öffnen
2. Wählen Sie Ihre gewünschte Farbe, oder
3. Geben Sie einen Hex-Farbcode direkt ein (z.B. `#171717`)
4. Klicken Sie auf das Zurücksetzen-Symbol, um die Standardfarbe wiederherzustellen
Wählen Sie eine Markenfarbe, die zur Primärfarbe Ihrer Website passt, für ein einheitliches Erscheinungsbild. Stellen Sie ausreichenden Kontrast für die Barrierefreiheit sicher.
## Farbüberschreibungen
Passen Sie bestimmte Elemente Ihres Widgets mit individuellen Farbüberschreibungen fein an. Jede Überschreibung kann unabhängig aktiviert oder deaktiviert werden.
### Verfügbare Farbüberschreibungen
| Farbeinstellung | Was sie beeinflusst | Standard |
| --------------------------- | --------------------------------------------------------- | --------- |
| **Benutzernachricht-Farbe** | Hintergrundfarbe der von Besuchern gesendeten Nachrichten | `#171717` |
| **Widget-Header-Farbe** | Hintergrundfarbe der Widget-Kopfleiste | `#171717` |
| **Bubble-Farbe** | Hintergrundfarbe des Chat-Bubble-Buttons | `#171717` |
| **Hinweis-Hintergrund** | Hintergrundfarbe von Hinweis-/Tooltip-Elementen | `#171717` |
### Farbüberschreibungen konfigurieren
Für jede Farbüberschreibung:
1. Schalten Sie den Schalter auf **Aktiviert**, um die Überschreibung einzuschalten
2. Klicken Sie auf das Farbfeld, um den Farbwähler zu öffnen
3. Wählen Sie Ihre Farbe oder geben Sie einen Hex-Code ein
4. Verwenden Sie die Zurücksetzen-Schaltfläche, um den Standardwert wiederherzustellen
Wenn eine Farbüberschreibung deaktiviert ist, verwendet das Widget automatisch die Standardfarbe. Aktivieren Sie Überschreibungen nur, wenn Sie benutzerdefinierte Farben benötigen.
## Chat-Bubble
Die Chat-Bubble ist die schwebende Schaltfläche, auf die Besucher klicken, um das Chat-Widget zu öffnen. Passen Sie ihre Position und ihr Erscheinungsbild an.
### Bubble-Position
Wählen Sie, wo die Chat-Bubble auf Ihrer Website erscheint:
| Position | Beschreibung |
| ---------- | ------------------------------------------------------- |
| **Links** | Bubble erscheint in der unteren linken Ecke |
| **Rechts** | Bubble erscheint in der unteren rechten Ecke (Standard) |
### Benutzerdefiniertes Chat-Symbol
Ersetzen Sie das Standard-Chat-Symbol durch Ihr eigenes:
1. Aktivieren Sie **Chat-Symbol**, um das benutzerdefinierte Symbol zu aktivieren
2. Klicken Sie auf **Hochladen**, um ein Bild von Ihrem Gerät auszuwählen
3. Unterstützte Formate: PNG, JPG, SVG
4. Empfohlene Größe: 48x48 Pixel oder größer
Wenn Sie den Schalter für das benutzerdefinierte Symbol deaktivieren, kehrt das Widget zum Standard-Chat-Symbol zurück.
## Änderungen speichern
Nach dem Vornehmen von Styling-Änderungen:
1. Überprüfen Sie Ihre Änderungen im Live-Vorschau-Panel
2. Klicken Sie auf **Änderungen speichern**, wenn Sie zufrieden sind
3. Das Widget auf Ihrer Website wird automatisch aktualisiert
Wenn Sie mit ungespeicherten Änderungen wegnavigieren, werden Sie aufgefordert, diese zu speichern oder zu verwerfen.
### Änderungen verwerfen
Klicken Sie auf **Verwerfen**, um alle Änderungen auf den letzten gespeicherten Zustand zurückzusetzen. Dies ist nützlich, wenn Sie von vorne beginnen möchten oder Änderungen vorgenommen haben, die Sie nicht behalten möchten.
## Best Practices
Verwenden Sie die Primärfarben Ihrer Website für die Markenfarbe und Überschreibungen. Einheitliche Farben schaffen ein professionelles, integriertes Erlebnis.
Zeigen Sie Ihr Widget sowohl im hellen als auch im dunklen Theme in der Vorschau an, um sicherzustellen, dass es unabhängig von den Benutzerpräferenzen oder dem Website-Design gut aussieht.
Wählen Sie Farben mit ausreichenden Kontrastverhältnissen. Vermeiden Sie kontrastarme Kombinationen, die Text schwer lesbar machen.
Platzieren Sie die Chat-Bubble dort, wo sie keine wichtigen Inhalte verdeckt. Die untere rechte Ecke ist üblich, aber die linke Positionierung funktioniert bei manchen Layouts ebenfalls gut.
Testen Sie Ihr Styling auf mobilen Geräten. Das Widget sollte auf kleineren Bildschirmen gut aussehen und einfach zu bedienen sein.
## Styling-Referenz
### Standardwerte
| Einstellung | Standardwert |
| ------------------------------ | ------------ |
| Erscheinungsbild | Hell |
| Markenfarbe | `#171717` |
| Benutzernachricht-Farbe | `#171717` |
| Widget-Header-Farbe | `#171717` |
| Bubble-Farbe | `#171717` |
| Hinweis-Hintergrund | `#171717` |
| Bubble-Position | Rechts |
| Avatar-Hintergrundfarbe | `#FFFFFF` |
| Avatar-Hintergrund-Transparenz | 70% |
### Farbformat
Alle Farben verwenden das Hexadezimalformat:
```
#RRGGBB
Beispiele:
- #171717 (dunkelgrau - Standard)
- #FFFFFF (weiß)
- #3B82F6 (blau)
- #10B981 (grün)
- #EF4444 (rot)
```
## Nächste Schritte
Konfigurieren Sie Widget-Inhalte wie Begrüßungsnachrichten und vorgeschlagene Fragen.
Richten Sie Sprachoptionen für internationale Besucher ein.
Holen Sie sich den Einbettungscode und fügen Sie Ihr gestaltetes Widget zu Ihrer Website hinzu.
Testen Sie die Antworten Ihres Agenten, bevor Sie live gehen.