Stylizacja - ThunderPhone

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.

Te opcje stylizacji dotyczą gotowego widżetu renderowanego przez komponent React ThunderPhoneWidget oraz metodę CDN ThunderPhone.mount(). Jeśli potrzebujesz całkowicie niestandardowego interfejsu, użyj zamiast tego hooka headless.

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

Motyw	Klasa	Opis
`'light'`	`tp--light`	Jasne tło z ciemnym tekstem. Domyślnie.
`'dark'`	`tp--dark`	Ciemne tło z jasnym tekstem.

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:

Właściwość	Domyślnie (jasny)	Domyślnie (ciemny)	Opis
`--tp-accent`	`#000`	`#fff`	Kolor akcentu: przycisk rozpoczęcia, paski fali dźwiękowej, kropka łączenia, tekst stanu połączenia. Ustawiany inline z właściwości `primaryColor`.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Tło paska (półprzezroczyste; rozmywane przez `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Tło przycisku wyciszenia.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Tło przycisku wyciszenia po najechaniu.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Obramowania paska i przycisków.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Kolor obramowania po najechaniu.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Tekst główny (tytuł, nazwa agenta).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Tekst drugorzędny (podtytuł, wiersz stanu, licznik połączenia).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter`, który tworzy efekt szkła na pasku.
`--tp-shadow`	trzywarstwowy stos cieni	trzywarstwowy stos cieni	Właściwość `box-shadow` paska (warstwy: pierścień + bliska + daleka).
`--tp-shadow-hover`	trzywarstwowy stos cieni	trzywarstwowy stos cieni	Zadeklarowane dla uniesienia po najechaniu; obecnie nie jest stosowane przez żadną regułę.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Wewnętrzne górne podświetlenie nałożone na cień paska.
`--tp-connected`	`#059669`	`#34d399`	Kolor wskaźnika stanu połączenia (kropka statusu).
`--tp-error`	`#dc2626`	`#fb7185`	Kolor tekstu statusu błędu.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Tło przycisku zakończenia połączenia.
`--tp-end-color`	`#ef4444`	`#fb7185`	Kolor ikony przycisku zakończenia połączenia.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Obramowanie przycisku zakończenia połączenia.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Tło przycisku zakończenia połączenia po najechaniu.
`--tp-idle-opacity`	`0.4`	`0.3`	Zadeklarowane dla przyciemnienia w stanie bezczynności; obecnie nie jest stosowane przez żadną regułę.

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

--tp-accent jest ustawiane jako styl inline z właściwości primaryColor, więc zastąpienia --tp-accent w arkuszu stylów nie działają. Zmień kolor akcentu za pomocą właściwości. Wszystkie pozostałe niestandardowe właściwości można zastąpić w CSS.

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.

Klasa	Element	Opis
`.tp-widget`	Główny kontener	Kontener o stałej pozycji (`position: fixed`, róg ustawiany przez właściwość `position`, `z-index: 9999`). Zawiera klasę motywu i podstawowe ustawienia czcionki; nie ma własnej oprawy wizualnej.
`.tp--light` / `.tp--dark`	Modyfikatory motywu	Stosowane do `.tp-widget` wraz z motywem; definiują wszystkie właściwości niestandardowe `--tp-*`.
`.tp-bar`	Pasek	Sama kapsuła ze szklistym efektem: tło, rozmycie tła, obramowanie, promień `99px`, cień. Szerokość `300px`.
`.tp-meta`	Blok tekstowy	Kontener na cały tekst — tytuł i podtytuł w stanie bezczynności, nazwę agenta i status podczas połączenia.
`.tp-name`	Główna etykieta	Wyświetla właściwość `title` w stanie bezczynności oraz nazwę połączonego agenta (z użyciem `title` jako wartości zastępczej) podczas połączenia.
`.tp-sub`	Podtytuł	Wiersz „Dostępny teraz” wyświetlany w stanie bezczynności.
`.tp-start`	Przycisk połączenia w stanie bezczynności	Okrągły przycisk rozpoczęcia z akcentem (42px). Jako tła używa `--tp-accent`.
`.tp-dot`	Kropka łączenia	Pulsująca kropka akcentu wyświetlana po lewej stronie paska podczas łączenia.
`.tp-wave` / `.tp-wave--idle`	Przebieg fali	Pięciosłupkowy przebieg fali. `--idle` dodaje powolną animację oddechu; podczas połączenia słupki reagują na dźwięk.
`.tp-button`	Przyciski podczas połączenia	Styl podstawowy dla kontrolek podczas połączenia (42px, zaokrąglenie 12px).
`.tp-button-group`	Wiersz przycisków	Obejmuje przyciski wyciszenia i zakończenia podczas połączenia.
`.tp-button--start`	Wariant przycisku połączenia	Wariant w kolorze akcentu wyświetlany podczas rozpoczynania połączenia.
`.tp-button--mute`	Przełącznik wyciszenia	Wycisza/włącza mikrofon podczas połączenia. Używa `--tp-surface`.
`.tp-button--end`	Przycisk zakończenia połączenia	Rozłącza połączenie. Używa palety `--tp-end-*`.
`.tp-button--loading`	Modyfikator ładowania	Przyciemnia przycisk podczas łączenia.
`.tp-icon` / `.tp-spin`	Ikony	Rozmiar ikon przycisków; `tp-spin` animuje wskaźnik łączenia.
`.tp-status`	Blok statusu podczas połączenia	Obejmuje wiersz statusu podczas stanów łączenia/połączenia/błędu.
`.tp-status__text`	Wiersz statusu	Tekst stanu połączenia (np. „Łączenie…”) albo licznik czasu połączenia. Otrzymuje `.tp-status--connected` (kolor akcentu) albo `.tp-status--error` (kolor błędu) zależnie od stanu.
`.tp-status__name`	Miejsce na nazwę agenta	Część bloku statusu, ale nie jest renderowana w bieżącym układzie paska — nazwa agenta pojawia się zamiast tego w `.tp-name`.
`.tp-status__dot`	Kropka statusu	Styl pulsującej kropki stanu połączenia (używa `--tp-connected`).

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

Etykieta stanu bezczynności znajduje się w .tp-name/.tp-sub, a nie w .tp-status — ukrycie samego .tp-status nadal wyświetla tytuł, gdy widżet jest w stanie bezczynności.

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

Headless hook to właściwy wybór, gdy potrzebujesz animacji reagujących na dźwięk, niestandardowych układów lub integracji z istniejącą biblioteką komponentów. Zastąpienia CSS i właściwości niestandardowe lepiej sprawdzają się przy szybkich zmianach motywu.

​Motywy

​Niestandardowe właściwości CSS

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

​Klasy CSS

​Przykłady

​Niestandardowy akcent za pomocą propsów

​Niestandardowe kolory za pomocą CSS

​Niestandardowy rozmiar

​Ukrywanie etykiet tekstowych

​Zastąpienia specyficzne dla motywu

​Zakresowanie za pomocą className

​W pełni niestandardowy interfejs

Motywy

Niestandardowe właściwości CSS

Zastępowanie niestandardowych właściwości

Klasy CSS

Przykłady

Niestandardowy akcent za pomocą propsów

Niestandardowe kolory za pomocą CSS

Niestandardowy rozmiar

Ukrywanie etykiet tekstowych

Zastąpienia specyficzne dla motywu

Zakresowanie za pomocą className

W pełni niestandardowy interfejs