> ## Documentation Index
> Fetch the complete documentation index at: https://docs.northline-echo.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding & Einbindung

> Optik des Widgets und Einbettung auf der Website

## Branding & Einbindung

Das Chat-**Widget** kann optisch angepasst und auf deiner Website eingebunden werden. Konsistentes Branding und eine klare Platzierung verbessern die Nutzerakzeptanz.

***

# Einbettung

* **Script-Snippet** – Siehe [Chatbot Einrichtung](/chatbot/einrichtung): Das Widget wird über ein Script mit `data-widget-key` geladen.
* **Position** – Üblich ist eine **Bubble** (z. B. unten rechts), die bei Klick ein **Panel** mit dem Chat öffnet.
* **Responsiv** – Das Widget passt sich verschiedenen Bildschirmgrößen an; auf Mobilgeräten kann es Vollbild oder nahe Vollbild genutzt werden.

***

# Branding-Optionen

Unter **Chatbot** bzw. **Widget** → Aussehen können u. a. konfiguriert werden:

* **Farben** – Akzentfarbe, Hintergrund, ggf. Anpassung an Corporate Design
* **Logo** – Eigenes Logo im Widget-Header oder in der Bubble
* **Begrüßungstext** – Erste Nachricht, die der Nutzer beim Öffnen des Chats sieht

Die genauen Optionen hängen von der Plattform-Version ab. Nicht alle Anpassungen sind in jeder Instanz verfügbar.

*More coming soon.*

***

# Technische Hinweise

* **Shadow DOM** – Das Widget kann in einem Shadow DOM gerendert werden, damit globale CSS deiner Website das Widget nicht versehentlich überschreibt.
* **Ladezeit** – Script mit `defer` einbinden, um die Ladezeit der Seite nicht zu blockieren.
* **Cookie/Consent** – Wenn das Widget erst nach Cookie-Consent geladen werden soll, das Script dynamisch einbinden (z. B. nach Nutzeraktion).

***

# Barrierefreiheit

* Widget und Chat-Panel sollten per Tastatur bedienbar und für Screenreader zugänglich sein.
* Kontrast und Schriftgrößen den Anforderungen der Barrierefreiheits-Richtlinien anpassen, soweit konfigurierbar.

*More coming soon.*