DocsWidget-Design

Widget-Design

Farben, Logo, Position, Hero-Bild, Dark-Mode und Quick-Replies — alles zentral unter Dashboard → Design, mit Live-Vorschau und ohne neue Code-Einbindung.

Wo du das Design anpasst

Sämtliche Widget-Optionen liegen im Dashboard unter Design. Du änderst dort die Optik des Web-Chat-Widgets, das du per Snippet eingebunden hast — die Code-Zeile auf deiner Seite bleibt unverändert. Speichern publiziert die Änderung direkt; ein neues Einbinden ist nie nötig.

Auto-Branding beim Onboarding. Beim ersten Einrichten crawlt Alpheris deine Domain und erkennt die Markenfarbe automatisch (detected_primary_color). Solange du die Primärfarbe nicht selbst überschreibst, wird diese erkannte Farbe als Standard genutzt. Alles lässt sich danach im Design-Bereich nachjustieren.

Presets

Jedes Widget basiert auf einem Preset, das das Grundthema vorgibt. Es gibt vier Presets — eine helle und eine dunkle Variante je Stil:

Preset	Wert	Charakter
Modern hell	`modern`	Weißes Panel, weiche Schatten, Akzentfarbe — Standard
Modern dunkel	`modern_dark`	Dunkles Panel, helle Schrift
Enterprise hell	`enterprise`	Reduzierter, sachlicher Stil
Enterprise dunkel	`enterprise_dark`	Enterprise-Stil auf dunklem Grund

Das Preset legt nur den Ausgangspunkt fest. Einzelne Farben (Panel-, Bot-, Nutzer-, Eingabe- und Button-Farben) lassen sich darüber hinaus frei überschreiben — siehe nächster Abschnitt.

Farben

Die wichtigste Einstellung ist die Primärfarbe (primary_color, Default #0ea5e9). Sie färbt den Akzent von Bubble, Buttons und Highlights. Für feineres Tuning kannst du zusätzlich folgende Farbgruppen einzeln setzen:

Hintergrund & Text — Panel-Hintergrund und globale Textfarbe
Bot-Bubble — Hintergrund und Schrift der KI-Antworten
Nutzer-Bubble — Hintergrund und Schrift der Kundennachrichten
Eingabefeld — Hintergrund und Schrift des Textfelds
Senden-Button — Hintergrund und Schrift
Chips / Quick-Replies — Hintergrund und Schrift der Vorschlags-Buttons

Farben gibst du als Hex-Wert an. Lässt du eine Detailfarbe leer, leitet das Widget sie sinnvoll aus Preset und Primärfarbe ab.

Logo & Avatar

Du kannst ein eigenes Logo hochladen, das im Kopf des Chat-Panels erscheint. Der Avatar begleitet die Bot-Antworten und ist standardmäßig ein Emoji (💬); du kannst ihn durch ein anderes Emoji oder ein Bild ersetzen.

Das Logo-Branding ist in allen Plänen verfügbar — also auch im Basic-Plan. Es ist nicht an einen bestimmten Plan oder ein Preset gebunden.

Position & Größe

Das Widget sitzt fest in einer unteren Bildschirmecke. Du wählst die Seite und die Größe der Bubble:

Option	Werte	Standard
Position	`right` (unten rechts) / `left` (unten links)	unten rechts
Bubble-Größe	`small` / `medium` / `large`	large

Andere Ecken (oben links/rechts) oder ein freier Pixel-Offset sind aktuell nicht vorgesehen — das Widget verankert sich immer unten links oder unten rechts.

Hero-Bild

Im Begrüßungsbereich des Widgets (der „Home"-Ansicht, bevor der Chat startet) kannst du ein Hero-Bild hochladen. Es dient als Banner über Begrüßungstext und Quick-Replies und gibt dem Widget direkt deinen Marken-Look. Ergänzend lassen sich Begrüßungstitel und -untertitel setzen.

Die ausführliche Begrüßungs-/Home-Ansicht mit Hero-Bild gehört zum modernen Layout (modern / modern_dark). Im Enterprise-Preset ist die Darstellung bewusst reduziert.

Dark-Mode

Neben den dunklen Presets gibt es einen eigenständigen Dark-Mode-Schalter, der unabhängig vom Preset wirkt. Du steuerst, wie sich das Widget an das Theme der Besucher anpasst:

Modus	Wert	Verhalten
Automatisch	`auto`	Folgt der System-/Browser-Einstellung des Besuchers (Standard)
Immer dunkel	`on`	Dark-Mode erzwungen
Immer hell	`off`	Dark-Mode aus

In der Vorschau kannst du den Dark-Mode direkt umschalten, um beide Varianten zu prüfen — die Live-Vorschau nutzt dafür den Parameter force_dark.

Quick-Replies

Quick-Replies sind vorformulierte Vorschlags-Buttons, die der Besucher in der Begrüßungsansicht antippen kann, statt selbst zu tippen — zum Beispiel „Versand & Lieferzeit" oder „Rückgabe". Sie senken die Einstiegshürde und lenken auf häufige Anliegen.

Die Schnellauswahl lässt sich pro Widget ein- oder ausblenden (show_quick_selection).
Du pflegst eigene Vorschläge als Kategorien mit Label und zugehörigem Text/Payload.
Werden keine eigenen Quick-Replies hinterlegt, schlägt Alpheris sinnvolle Standard-Vorschläge vor.

Halte Quick-Replies kurz und konkret. Drei bis sechs gut gewählte Vorschläge wirken besser als eine lange Liste.

„Powered by Alpheris"-Hinweis

Im Widget steht standardmäßig ein dezenter „Powered by Alpheris"-Hinweis. Ob du ihn ausblenden darfst, hängt vom Plan ab:

Plan	Hinweis ausblendbar?
Free / Basic	Nein — der Hinweis bleibt immer aktiv
Business	Nur mit dem Branding-Zusatz (11 €/Monat)
Enterprise	Ja — bereits enthalten

Im Design-Bereich findest du den Schalter show_powered_by. Fehlt dir die Berechtigung, ist er gesperrt und der Hinweis bleibt serverseitig erzwungen — auch wenn der Schalter clientseitig manipuliert würde, wird er beim Speichern wieder aktiviert.

Den Branding-Zusatz aktivierst du im Business-Plan über die Abrechnung. Mehr dazu unter Pläne & Abrechnung.

Live-Vorschau & Speichern

Öffne Dashboard → Design

Rechts läuft das echte Widget als Vorschau mit deinen aktuellen Einstellungen.

Ändere Farben, Logo, Position & Co.

Jede Anpassung wird sofort in der Vorschau gerendert — inklusive Dark-Mode-Umschaltung.

Speichern

Die Änderung wird live publiziert. Auf deiner Website erscheint sie ohne erneutes Einbinden des Snippets.

Siehst du eine Änderung auf deiner Seite nicht sofort, liegt es meist am Browser- oder CDN-Cache. Ein hartes Neuladen (Strg/Cmd + Shift + R) zeigt den aktuellen Stand. Das Einbindungs-Snippet bleibt unverändert:

HTML

<!-- Alpheris Chat Widget -->
<script src="https://alpheris.com/widget.js" data-alpheris-key="INSTALL_ID" crossorigin="anonymous" async></script>
<!-- End Alpheris Chat Widget -->

Den genauen Einbau erklärt die Seite Widget-Code; deine persönliche INSTALL_ID findest du im Dashboard.