Widget

Gestaltung

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.

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"
/>

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:

Benutzerdefinierte Eigenschaften überschreiben#

Legen Sie die Akzentfarbe über die Prop primaryColor fest:

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

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

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;
}

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>
  )
}