Gestaltung - ThunderPhone

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.

Designs

Die Prop theme steuert das Farbschema des Widgets. Sie wendet eine Klasse tp--light oder tp--dark auf das Widget-Stammelement an:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>

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:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>

--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:

.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:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="light"
  primaryColor="#059669"
  title="Talk to support"
/>

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:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>

/* 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:

/* 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:

.tp-meta {
  display: none;
}

Oder blenden Sie einzelne Elemente aus:

/* 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:

/* 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:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>

Richten Sie diese Klasse anschließend in Ihrem CSS an:

.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 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.

import { useThunderPhone } from '@thunderphone/widget'

function MyWidget() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  return (
    <div className="my-totally-custom-widget">
      {/* Your own buttons, animations, layouts -- anything */}
      <button onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}>
        {phone.state === 'connected' ? 'Hang up' : 'Call us'}
      </button>
      {phone.audio}
    </div>
  )
}

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.

​Designs

​CSS-Benutzerdefinierte Eigenschaften

​Benutzerdefinierte Eigenschaften überschreiben

​CSS-Klassen

​Beispiele

​Benutzerdefinierte Akzentfarbe über Props

​Benutzerdefinierte Farben über CSS

​Benutzerdefinierte Größe

​Textbeschriftungen ausblenden

​Themenspezifische Überschreibungen

​Eingrenzung mit className

​Vollständig benutzerdefinierte Benutzeroberfläche

Designs

CSS-Benutzerdefinierte Eigenschaften

Benutzerdefinierte Eigenschaften überschreiben

CSS-Klassen

Beispiele

Benutzerdefinierte Akzentfarbe über Props

Benutzerdefinierte Farben über CSS

Benutzerdefinierte Größe

Textbeschriftungen ausblenden

Themenspezifische Überschreibungen

Eingrenzung mit className

Vollständig benutzerdefinierte Benutzeroberfläche