Darstellungseinstellungen

Auf dem Tab Appearance erhält der Assistent sein Aussehen. Er ist in fünf aufklappbare Abschnitte gegliedert, von einfachen Entscheidungen bis zur vollständigen Kontrolle auf CSS-Ebene – gehen Sie so weit in die Tiefe, wie Sie es brauchen.

Layout und Launcher

Wann ein schwebender Button sinnvoll ist: immer dann, wenn Sie den Assistenten auf einer Website mit eigenen Inhalten einbetten und nicht möchten, dass der Chat mit ihnen um Platz konkurriert. Der Button sitzt in einer Ecke, und Besucher öffnen ihn, wenn sie ihn brauchen.

Wann inline einbetten: wenn der Assistent selbst der Inhalt ist – eine eigene Support-Seite, ein Suchportal, die Startseite eines Hilfecenters.

Basis-Theme

Das Basis-Theme ist Ihr Ausgangspunkt. Wählen Sie das, das der Optik Ihrer Website am nächsten kommt, und verfeinern Sie es von dort aus mit der Palette oder dem Theme-Editor.

Farbpalette des Themes überschreiben

Der Paletten-Editor zeigt für jede CSS-Farbvariable, die der Assistent nutzt, einen Farbwähler. Jeder Farbwähler zeigt den Variablennamen (z. B. --brand) und seinen aktuellen Hex-Wert. Sie müssen nur die Farben setzen, die Sie ändern möchten – alle anderen behalten den Wert des Basis-Themes. Die Farben sind nach Bereichen gruppiert:

Marke und Grundlagen – die Kernoptik: --brand (primärer Akzent), --brand-2 (sekundär), --accent, --bg-base (Basis-Hintergrund), --bg-deep, --surface, --surface-paper, --text, --text-strong, --text-muted, --link, --border, --error, --white.

Schwebender Button und Kopfbereich – --floating-button-bg, --floating-button-text, --floating-button-avatar-bg, --floating-header-bg, --floating-header-text, --floating-header-title.

Footer – --footer-bg, --footer-button-text, --footer-button-hover-text, --footer-secondary-hover-text.

Suche und Eingabe – --header-bg, --search-box-bg, --search-input-text, --input-bg, --input-border.

Buttons und Aktionen – --button-primary-bg, --button-primary-hover-bg, --button-hover, --scroll-button-bg, --scroll-button-hover-bg.

Nachrichten – --assistant-avatar-bg, --assistant-avatar-text, --assistant-response-border, --user-message-bg, --user-message-text.

Vorschläge – --hint-text, --hint-border, --form-hint-bg, --form-hint-border.

Code und Zitate – --code-bg, --code-text, --blockquote-text, --blockquote-border, --blockquote-strong-text.

Tabellen – --table-head-bg.

Tabs – --tab-text, --tab-active-text, --tab-active-border.

Status und Reaktionen – --success-bg, --success-border, --success-text, --reaction-hover-bg.

Scrollleiste – --scrollbar-thumb-bg.

Modals und Overlays – --modal-bg, --modal-backdrop-bg, --overlay-muted-bg, --overlay-backdrop-bg, --overlay-panel-bg, --overlay-header-text, --overlay-search-bg, --overlay-modal-bg.

Glas und Leuchten – --glass-bg, --glass-border, --brand-glow, --accent-glow.

Paletten-Beispiel

Um eine Marke mit blauer Primärfarbe auf weißem Hintergrund abzubilden, setzen Sie:

• --brand → #1a73e8
• --button-primary-bg → #1a73e8
• --accent → #1a73e8

Um den schwebenden Button an eine dunkle Navigationsleiste anzupassen:

• --floating-button-bg → #1e293b
• --floating-button-text → #ffffff
• --floating-header-bg → #1e293b
• --floating-header-text → #ffffff

Theme-Einstellungen überschreiben

Unter der Farbpalette stellt der Abschnitt Override theme settings Variablen bereit, die keine Farben sind – Schriften, Abmessungen, Rahmen, Schatten und Effekte –, als Texteingabefelder nach Kategorien gruppiert:

Typografie – --font-base (Hauptschrift), --font-code (Codeblöcke), --font-assistant (Antworten des Assistenten). Geben Sie einen CSS-Font-Stack ein, z. B. 'Inter', sans-serif.

Layout und Größen – --floating-bottom-offset, --floating-right-offset (Position des schwebenden Buttons), --container-width, --container-height (Abmessungen des Assistenten-Containers).

Rahmen und Konturen – --card-border-style, --article-table-border, --modal-header-border, --overlay-panel-border, --overlay-search-border, --loading-spinner-border.

Schatten und Tiefe – --shadow-soft, --shadow-raised, --shadow-light, --shadow-subtle, --shadow-minimal, --shadow-elevated, --shadow-premium, --floating-button-shadow, --floating-button-hover-shadow, --overlay-panel-shadow.

Verläufe und Effekte – --brand-gradient-line, --brand-halo-welcome, --skeleton-shimmer, --glass-shimmer, --glass-blur.

Einstellungs-Beispiel

Um eine eigene Schrift zu verwenden und den schwebenden Button neu zu positionieren:

• --font-base → 'Inter', sans-serif
• --font-assistant → 'Inter', sans-serif
• --floating-bottom-offset → 24px
• --floating-right-offset → 24px

Um die Schatten abzumildern:

• --shadow-soft → 0 2px 8px rgba(0,0,0,0.06)
• --shadow-raised → 0 4px 16px rgba(0,0,0,0.08)

Editor für eigene Themes

Für vollständige Kontrolle auf CSS-Ebene öffnet der Custom theme editor unten auf dem Tab Appearance einen Monaco-Code-Editor, in dem Sie ein Theme-Objekt in JSON schreiben, das tief über alles andere gemergt wird. Hier sprechen Sie bestimmte Komponenten über ihre CSS-Selektoren an, fügen responsive Regeln hinzu oder überschreiben beliebige Style-Eigenschaften.

Die Standards laden

Klicken Sie auf Load default theme definition, um den Editor mit dem aktuell berechneten Theme zu füllen – dem vollständig ausgeschriebenen Ergebnis aus Basis-Theme + Palette + Einstellungen. So haben Sie einen funktionierenden Ausgangspunkt: Suchen Sie die Eigenschaft, die Sie ändern möchten, bearbeiten Sie ihren Wert und speichern Sie. Sie müssen nie ein Theme von Grund auf schreiben.

Struktur

Das Theme-Objekt verwendet CSS-in-JS-Syntax (Eigenschaften in camelCase) und spricht die Komponenten des Assistenten über ihre CSS-Selektoren an:

{
  ":root": {
    "--brand": "#1a73e8",
    "--text": "#1e293b"
  },
  ".skdwn-assistant-response": {
    "backgroundColor": "#f8fafc",
    "borderRadius": "12px",
    "padding": "16px"
  },
  "#skdwn-floating-button": {
    "boxShadow": "0 4px 12px rgba(0,0,0,0.15)"
  },
  "@media (max-width: 600px)": {
    "#skdwn-main-container": {
      "fontSize": "14px"
    }
  }
}

Was Sie ansprechen können

Beispiel: abgerundete Sprechblasen mit eigener Schrift

{
  ":root": {
    "--font-base": "'Inter', sans-serif",
    "--font-assistant": "'Inter', sans-serif"
  },
  ".skdwn-assistant-response": {
    "borderRadius": "16px"
  },
  ".skdwn-user-request": {
    "borderRadius": "16px"
  }
}

Beispiel: runder schwebender Button

{
  "#skdwn-floating-button": {
    "borderRadius": "50%",
    "width": "56px",
    "height": "56px"
  }
}

Wie die vier Ebenen zusammengeführt werden

Der Assistent erzeugt sein endgültiges Aussehen, indem er vier Ebenen der Reihe nach zusammenführt – jede überschreibt die vorherige:

1. Basis-Theme – die gewählte Vorlage (default, light, dark, purple, blue, otherBlue).
2. Farbpalette – die Farbwähler. Sie überschreiben Farben des Basis-Themes.
3. Theme-Einstellungen – die Textfelder für Schriften, Schatten, Rahmen und Abmessungen.
4. Eigenes Theme-JSON – der Code-Editor. Er wird tief über alles gemergt und hat daher das letzte Wort.

Die meisten Assistenten brauchen nur ein Basis-Theme und ein paar Palettenfarben. Die Theme-Einstellungen dienen dazu, Schriften und Abstände anzupassen, ohne JSON zu schreiben. Der Editor für eigene Themes ist für die vollständige Kontrolle auf CSS-Ebene über bestimmte Komponenten gedacht.

Fehlerbehebung

• Ist Text schwer lesbar, erhöhen Sie in der Palette den Kontrast zwischen Text- und Hintergrundfarben.
• Wirkt das Widget zu groß oder zu klein, wechseln Sie das Basis-Template (default vs. overlay) oder passen Sie --container-width und --container-height in den Theme-Einstellungen an.
• Farben werden in der eingebetteten Vorschau sofort angewendet – nutzen Sie sie, um schnell zu iterieren.
• Zeigt das eigene Theme-JSON Fehler, prüfen Sie es auf überzählige Kommas, fehlende Anführungszeichen oder nicht zusammenpassende Klammern. Nutzen Sie Load default theme definition, um mit einem gültigen Objekt zu beginnen.
• Im Editor für eigene Themes ist camelCase für CSS-Eigenschaften erforderlich (backgroundColor, nicht background-color), aber CSS-Variablennamen behalten ihre Bindestriche (--brand, --text).

Verwandte Dokumente

• Die eingebettete Vorschau öffnen