Widget

Stylizacja

Dostosuj wygląd widżetu głosowego ThunderPhone za pomocą CSS

Widżet jest renderowany jako pasek w stylu glassmorphism z wbudowanymi jasnym i ciemnym motywem. Dostosowanie jest dostępne na trzech poziomach: właściwości dla typowych opcji, niestandardowe właściwości CSS do motywowania oraz nadpisania klas CSS dla pełnej kontroli.

Motywy#

Właściwość theme kontroluje schemat kolorów widżetu. Stosuje klasę tp--light lub tp--dark do głównego elementu widżetu:

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

Oba motywy wykorzystują stylistykę paska glassmorphism z rozmyciem tła i subtelną przezroczystością.

Niestandardowe właściwości CSS#

Widżet udostępnia niestandardowe właściwości CSS (zmienne), które możesz zastąpić, aby zmienić kolory bez modyfikowania poszczególnych klas. Są one definiowane przez klasę motywu (.tp--light lub .tp--dark) zastosowaną do głównego elementu .tp-widget:

Zastępowanie niestandardowych właściwości#

Ustaw kolor akcentu za pomocą właściwości primaryColor:

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

Zastąp pozostałe niestandardowe właściwości za pomocą CSS. Użyj selektora z dwiema klasami (.tp-widget.tp--light / .tp-widget.tp--dark), aby Twoja reguła miała wyższy priorytet niż klasa motywu definiująca wartości domyślne, niezależnie od kolejności arkuszy stylów:

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

Klasy CSS#

Wszystkie klasy widżetu mają prefiks tp-, aby uniknąć konfliktów z istniejącymi stylami.

Przykłady#

Niestandardowy akcent za pomocą propsów#

Najprostszy sposób na dostosowanie widżetu do marki:

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

Niestandardowe kolory za pomocą CSS#

Zastąp właściwości niestandardowe, aby uzyskać pełną kontrolę nad kolorami. Pamiętaj, że kolor akcentu pochodzi z propa primaryColor, a nie z CSS:

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

Niestandardowy rozmiar#

Powiększ lub pomniejsz widżet, dostosowując wymiary paska, przycisków i tekstu:

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

Ukrywanie etykiet tekstowych#

Cały tekst widżetu znajduje się w .tp-meta. Ukryj go całkowicie, aby pozostawić tylko przebieg fali i przyciski:

.tp-meta {
  display: none;
}

Możesz też ukryć poszczególne elementy:

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

Zastąpienia specyficzne dla motywu#

Wybierz konkretny motyw za pomocą klasy motywu:

/* 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);
}

Zakresowanie za pomocą className#

Podczas korzystania z komponentu React przekaż prop className, aby ograniczyć zastąpienia do konkretnej instancji widżetu:

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

Następnie wskaż tę klasę w CSS:

.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}
 
.support-widget .tp-name {
  font-weight: 700;
}

Pozwala to mieć wiele instancji widżetu na tej samej stronie, z różnymi stylami. Nadaj każdej instancji własny akcent za pomocą propa primaryColor (CSS nie może zastąpić --tp-accent -- jest ustawiany inline).

W pełni niestandardowy interfejs#

Jeśli zastąpienia CSS nie wystarczają, headless hook zapewnia pełną kontrolę. Udostępniasz cały HTML i stylowanie, a useThunderPhone obsługuje sesję głosową. Hook udostępnia również audioLevelRef do tworzenia wizualizacji reagujących na dźwięk, takich jak przebiegi fali.

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