--- title: "Gestaltung" description: "Passen Sie das Erscheinungsbild des ThunderPhone-Sprach-Widgets mit CSS an" --- Das Widget wird als Glassmorphismus-Leiste mit integrierten hellen und dunklen Designs gerendert. Die Anpassung ist auf drei Ebenen möglich: Props für gängige Optionen, benutzerdefinierte CSS-Eigenschaften für das Theming und CSS-Klassenüberschreibungen für vollständige Kontrolle. Diese Styling-Optionen gelten für das vorgefertigte Widget, das von der React-Komponente `ThunderPhoneWidget` und der CDN-Methode `ThunderPhone.mount()` gerendert wird. Wenn Sie eine vollständig benutzerdefinierte Benutzeroberfläche benötigen, verwenden Sie stattdessen den [Headless-Hook](/de/widget/headless-hook). --- ## Designs Die Prop `theme` steuert das Farbschema des Widgets. Sie wendet eine Klasse `tp--light` oder `tp--dark` auf das Widget-Stammelement an: ```tsx ``` | Design | Klasse | Beschreibung | |-------|-------|-------------| | `'light'` | `tp--light` | Heller Hintergrund mit dunklem Text. Standard. | | `'dark'` | `tp--dark` | Dunkler Hintergrund mit hellem Text. | Beide Designs verwenden das Glassmorphismus-Leistendesign mit Hintergrundunschärfe und dezenter Transparenz. --- ## CSS-Benutzerdefinierte Eigenschaften Das Widget stellt CSS-Benutzerdefinierte Eigenschaften (Variablen) bereit, die Sie überschreiben können, um Farben zu ändern, ohne einzelne Klassen anzupassen. Sie werden durch die auf das `.tp-widget`-Stammelement angewendete Theme-Klasse (`.tp--light` oder `.tp--dark`) definiert: | Eigenschaft | Standard (hell) | Standard (dunkel) | Beschreibung | |----------|-----------------|-----------------|-------------| | `--tp-accent` | `#000` | `#fff` | Akzentfarbe: Start-Schaltfläche, Wellenformbalken, Verbindungsstatuspunkt, Text für den verbundenen Status. Wird über die Prop `primaryColor` **inline** festgelegt. | | `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Balkenhintergrund (halbtransparent; durch `--tp-glass` weichgezeichnet). | | `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Hintergrund der Stummschaltfläche. | | `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Hover-Hintergrund der Stummschaltfläche. | | `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Rahmen für Balken und Schaltflächen. | | `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Rahmenfarbe bei Hover. | | `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Primärtext (Titel, Agentenname). | | `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Sekundärtext (Untertitel, Statuszeile, Anruf-Timer). | | `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter`, der den Glaseffekt auf dem Balken erzeugt. | | `--tp-shadow` | dreistufiger Schattensatz | dreistufiger Schattensatz | Der `box-shadow` des Balkens (Ring- + nahe + entfernte Ebenen). | | `--tp-shadow-hover` | dreistufiger Schattensatz | dreistufiger Schattensatz | Für die Hover-Anhebung definiert; wird derzeit von keiner Regel angewendet. | | `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Innerer oberer Glanz, der über den Balkenschatten gelegt wird. | | `--tp-connected` | `#059669` | `#34d399` | Farbe der Anzeige für den verbundenen Zustand (Statuspunkt). | | `--tp-error` | `#dc2626` | `#fb7185` | Textfarbe für den Fehlerstatus. | | `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Hintergrund der Schaltfläche zum Beenden des Anrufs. | | `--tp-end-color` | `#ef4444` | `#fb7185` | Symbolfarbe der Schaltfläche zum Beenden des Anrufs. | | `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Rahmen der Schaltfläche zum Beenden des Anrufs. | | `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Hover-Hintergrund der Schaltfläche zum Beenden des Anrufs. | | `--tp-idle-opacity` | `0.4` | `0.3` | Für die Abdunklung im Leerlaufzustand definiert; wird derzeit von keiner Regel angewendet. | ### Benutzerdefinierte Eigenschaften überschreiben Legen Sie die Akzentfarbe über die Prop `primaryColor` fest: ```tsx ``` `--tp-accent` wird über die Prop `primaryColor` als **Inline-Stil** festgelegt. Daher haben Stylesheet-Überschreibungen von `--tp-accent` keine Wirkung. Ändern Sie die Akzentfarbe mit der Prop. Alle anderen benutzerdefinierten Eigenschaften können in CSS überschrieben werden. Überschreiben Sie die anderen benutzerdefinierten Eigenschaften mit CSS. Verwenden Sie einen Selektor mit zwei Klassen (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), damit Ihre Regel unabhängig von der Reihenfolge im Stylesheet Vorrang vor der Theme-Klasse hat, die die Standardwerte definiert: ```css .tp-widget.tp--light { --tp-bg: rgba(0, 0, 0, 0.9); --tp-text: rgba(255, 255, 255, 0.95); --tp-text-2: rgba(255, 255, 255, 0.55); --tp-border: rgba(255, 255, 255, 0.15); } ``` --- ## CSS-Klassen Alle Widget-Klassen sind mit `tp-` vorangestellt, um Konflikte mit Ihren bestehenden Stilen zu vermeiden. | Klasse | Element | Beschreibung | |-------|---------|-------------| | `.tp-widget` | Stamm-Wrapper | Container mit fester Position (`position: fixed`, Ecke über die Prop `position` festgelegt, `z-index: 9999`). Trägt die Theme-Klasse und die grundlegenden Schriftarteinstellungen; kein eigenes visuelles Design. | | `.tp--light` / `.tp--dark` | Theme-Modifikatoren | Werden zusammen mit dem Theme auf `.tp-widget` angewendet; definieren alle benutzerdefinierten Eigenschaften `--tp-*`. | | `.tp-bar` | Die Leiste | Das glassmorphe Pill-Element selbst: Hintergrund, Backdrop-Blur, Rahmen, `99px`-Radius, Schatten. `300px` breit. | | `.tp-meta` | Textblock | Container für sämtlichen Text – Titel und Untertitel im Leerlauf, Agentenname und Status während eines Anrufs. | | `.tp-name` | Primäre Beschriftung | Zeigt im Leerlauf die Prop `title` und während eines Anrufs den Namen des verbundenen Agenten an (mit `title` als Fallback). | | `.tp-sub` | Untertitel | Die im Leerlauf angezeigte Zeile „Jetzt verfügbar“. | | `.tp-start` | Anrufbutton im Leerlauf | Der kreisförmige Startbutton in Akzentfarbe (42px). Verwendet `--tp-accent` als Hintergrund. | | `.tp-dot` | Verbindungspunkt | Pulsierender Punkt in Akzentfarbe, der während des Verbindungsaufbaus links neben der Leiste angezeigt wird. | | `.tp-wave` / `.tp-wave--idle` | Wellenform | Die Wellenform mit fünf Balken. `--idle` fügt die langsame Atemanimation hinzu; während eines Anrufs reagieren die Balken auf Audio. | | `.tp-button` | Buttons während eines Anrufs | Basisstil für die Steuerelemente während eines Anrufs (42px, abgerundet mit 12px). | | `.tp-button-group` | Buttonzeile | Umschließt während eines Anrufs die Stumm- und Beenden-Buttons. | | `.tp-button--start` | Variante des Verbindungsbuttons | Variante in Akzentfarbe, die angezeigt wird, während ein Anruf gestartet wird. | | `.tp-button--mute` | Stummschaltung | Schaltet das Mikrofon während eines Anrufs stumm bzw. wieder ein. Verwendet `--tp-surface`. | | `.tp-button--end` | Button zum Beenden des Anrufs | Legt auf. Verwendet die Palette `--tp-end-*`. | | `.tp-button--loading` | Lade-Modifikator | Dämpft den Button während des Verbindungsaufbaus. | | `.tp-icon` / `.tp-spin` | Symbole | Größe der Button-Symbole; `tp-spin` animiert den Verbindungs-Spinner. | | `.tp-status` | In-Call-Statusblock | Umschließt die Statuszeile während der Zustände „Verbindungsaufbau“, „verbunden“ und „Fehler“. | | `.tp-status__text` | Statuszeile | Text zum Verbindungsstatus (z. B. „Verbindung wird hergestellt...“) oder der Anruf-Timer. Erhält je nach Status `.tp-status--connected` (Akzentfarbe) oder `.tp-status--error` (Fehlerfarbe). | | `.tp-status__name` | Slot für den Agentennamen | Teil des Statusblocks, wird jedoch im aktuellen Layout der Leiste nicht gerendert – der Agentenname erscheint stattdessen in `.tp-name`. | | `.tp-status__dot` | Statuspunkt | Pulsierender Punktstil für den verbundenen Zustand (verwendet `--tp-connected`). | --- ## Beispiele ### Benutzerdefinierte Akzentfarbe über Props Die einfachste Möglichkeit, das Widget an Ihre Marke anzupassen: ```tsx ``` ### Benutzerdefinierte Farben über CSS Überschreiben Sie die benutzerdefinierten Eigenschaften, um die Farben vollständig zu steuern. Beachten Sie, dass die Akzentfarbe aus dem Prop `primaryColor` und nicht aus CSS stammt: ```tsx ``` ```css /* Emerald theme for everything else */ .tp-widget.tp--light { --tp-bg: rgba(236, 253, 245, 0.85); --tp-text: rgba(6, 78, 59, 0.95); --tp-text-2: rgba(4, 120, 87, 0.8); --tp-border: rgba(5, 150, 105, 0.2); } ``` ### Benutzerdefinierte Größe Vergrößern oder verkleinern Sie das Widget, indem Sie die Abmessungen von Leiste, Schaltflächen und Text anpassen: ```css /* Wider bar */ .tp-bar { width: 340px; } /* Larger buttons (42px by default) */ .tp-start, .tp-button { width: 56px; height: 56px; } /* Larger text */ .tp-name { font-size: 16px; } .tp-sub, .tp-status__text { font-size: 14px; } ``` ### Textbeschriftungen ausblenden Der gesamte Text des Widgets befindet sich in `.tp-meta`. Blenden Sie ihn vollständig aus, um nur die Wellenform und Schaltflächen beizubehalten: ```css .tp-meta { display: none; } ``` Oder blenden Sie einzelne Elemente aus: ```css /* Hide only the idle "Available now" subtitle */ .tp-sub { display: none; } /* Hide only the in-call status line (connection state / timer) */ .tp-status { display: none; } ``` Die Beschriftung im Leerlauf befindet sich in `.tp-name`/`.tp-sub`, nicht in `.tp-status` -- wenn Sie nur `.tp-status` ausblenden, wird der Titel weiterhin angezeigt, wenn sich das Widget im Leerlauf befindet. ### Themenspezifische Überschreibungen Richten Sie sich mit der Themenklasse an ein bestimmtes Theme: ```css /* Only affect dark theme */ .tp--dark .tp-start { box-shadow: 0 0 20px rgba(255, 255, 255, 0.25); } /* Only affect light theme */ .tp-widget.tp--light { --tp-bg: rgba(255, 255, 255, 0.95); } ``` --- ## Eingrenzung mit className Wenn Sie die React-Komponente verwenden, übergeben Sie ein `className`-Prop, um Ihre Überschreibungen auf eine bestimmte Widget-Instanz einzugrenzen: ```tsx ``` Richten Sie diese Klasse anschließend in Ihrem CSS an: ```css .support-widget.tp--dark { --tp-bg: rgba(30, 30, 46, 0.9); } .support-widget .tp-name { font-weight: 700; } ``` So können Sie mehrere Widget-Instanzen mit unterschiedlichen Stilen auf derselben Seite verwenden. Geben Sie jeder Instanz über ihr `primaryColor`-Prop eine eigene Akzentfarbe (CSS kann `--tp-accent` nicht überschreiben -- sie wird inline festgelegt). --- ## Vollständig benutzerdefinierte Benutzeroberfläche Wenn CSS-Überschreibungen nicht ausreichen, bietet Ihnen der [Headless Hook](/de/widget/headless-hook) volle Kontrolle. Sie stellen das gesamte HTML und Styling bereit, während `useThunderPhone` die Sprachsitzung verwaltet. Der Hook stellt außerdem `audioLevelRef` bereit, um audio-reaktive Visualisierungen wie Wellenformen zu erstellen. ```tsx import { useThunderPhone } from '@thunderphone/widget' function MyWidget() { const phone = useThunderPhone({ publishableKey: 'pk_live_your_publishable_key', }) return (
{/* Your own buttons, animations, layouts -- anything */} {phone.audio}
) } ``` Der Headless Hook ist die richtige Wahl, wenn Sie audio-reaktive Animationen, benutzerdefinierte Layouts oder die Integration in eine bestehende Komponentenbibliothek benötigen. CSS-Überschreibungen und benutzerdefinierte Eigenschaften eignen sich besser für schnelle Theme-Anpassungen.