Stilizare - ThunderPhone

Widgetul este redat ca o bară cu efect de sticlă, cu teme deschise și întunecate integrate. Personalizarea este disponibilă la trei niveluri: proprietăți pentru opțiuni comune, proprietăți personalizate CSS pentru teme și suprascrieri de clase CSS pentru control complet.

Aceste opțiuni de stilizare se aplică widgetului predefinit redat de componenta React ThunderPhoneWidget și de metoda CDN ThunderPhone.mount(). Dacă aveți nevoie de o interfață complet personalizată, utilizați în schimb hookul headless.

Teme

Proprietatea theme controlează schema de culori a widgetului. Aceasta aplică o clasă tp--light sau tp--dark rădăcinii widgetului:

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

Temă	Clasă	Descriere
`'light'`	`tp--light`	Fundal deschis cu text închis. Implicită.
`'dark'`	`tp--dark`	Fundal închis cu text deschis.

Ambele teme folosesc designul de bară cu efect de sticlă, cu estomparea fundalului și transparență subtilă.

Proprietăți personalizate CSS

Widgetul expune proprietăți personalizate CSS (variabile) pe care le puteți suprascrie pentru a modifica culorile fără a modifica clase individuale. Acestea sunt definite de clasa de temă (.tp--light sau .tp--dark) aplicată rădăcinii .tp-widget:

Proprietate	Implicit (deschis)	Implicit (închis)	Descriere
`--tp-accent`	`#000`	`#fff`	Culoare de accent: butonul de pornire, barele formei de undă, punctul de conectare, textul stării de conectare. Setată inline din proprietatea `primaryColor`.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Fundalul barei (translucid; estompat de `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Fundalul butonului de dezactivare a sunetului.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Fundalul la trecerea cursorului peste butonul de dezactivare a sunetului.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Chenarele barei și ale butoanelor.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Culoarea chenarului la trecerea cursorului.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Text principal (titlu, numele agentului).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Text secundar (subtitlu, linia de stare, cronometrul apelului).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter` care creează efectul de sticlă pe bară.
`--tp-shadow`	stivă de umbre cu trei straturi	stivă de umbre cu trei straturi	`box-shadow` al barei (straturi inel + apropiat + îndepărtat).
`--tp-shadow-hover`	stivă de umbre cu trei straturi	stivă de umbre cu trei straturi	Declarată pentru elevarea la trecerea cursorului; nu este aplicată în prezent de nicio regulă.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Evidențierea interioară de sus suprapusă peste umbra barei.
`--tp-connected`	`#059669`	`#34d399`	Culoarea indicatorului pentru starea de conectare (punct de stare).
`--tp-error`	`#dc2626`	`#fb7185`	Culoarea textului de stare pentru erori.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Fundalul butonului de încheiere a apelului.
`--tp-end-color`	`#ef4444`	`#fb7185`	Culoarea pictogramei butonului de încheiere a apelului.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Chenarul butonului de încheiere a apelului.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Fundalul la trecerea cursorului peste butonul de încheiere a apelului.
`--tp-idle-opacity`	`0.4`	`0.3`	Declarată pentru estomparea în starea inactivă; nu este aplicată în prezent de nicio regulă.

Suprascrierea proprietăților personalizate

Setați culoarea de accent prin proprietatea primaryColor:

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

--tp-accent este setată ca stil inline din proprietatea primaryColor, astfel încât suprascrierile din foile de stil pentru --tp-accent nu au efect. Modificați culoarea de accent folosind proprietatea. Orice altă proprietate personalizată poate fi suprascrisă în CSS.

Suprascrieți celelalte proprietăți personalizate cu CSS. Utilizați un selector cu două clase (.tp-widget.tp--light / .tp-widget.tp--dark) pentru ca regula dumneavoastră să aibă prioritate față de clasa de temă care definește valorile implicite, indiferent de ordinea foilor de stil:

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

Clase CSS

Toate clasele widgetului au prefixul tp- pentru a evita conflictele cu stilurile dumneavoastră existente.

Clasă	Element	Descriere
`.tp-widget`	Container rădăcină	Container cu poziție fixă (`position: fixed`, colț stabilit de proprietatea `position`, `z-index: 9999`). Include clasa de temă și setările de bază pentru font; nu are propriile elemente vizuale.
`.tp--light` / `.tp--dark`	Modificatori de temă	Aplicate la `.tp-widget` împreună cu tema; definesc toate proprietățile personalizate `--tp-*`.
`.tp-bar`	Bara	Elementul tip pastilă cu efect glassmorphic: fundal, estompare de fundal, chenar, rază de `99px`, umbră. Lățime de `300px`.
`.tp-meta`	Bloc de text	Container pentru tot textul — titlu și subtitlu în repaus, numele agentului și starea în timpul unui apel.
`.tp-name`	Etichetă principală	Afișează proprietatea `title` în repaus și numele agentului conectat (folosind `title` ca alternativă) în timpul unui apel.
`.tp-sub`	Subtitlu	Linia „Disponibil acum” afișată în repaus.
`.tp-start`	Buton de apel în repaus	Butonul circular de pornire cu accent (42px). Utilizează `--tp-accent` ca fundal.
`.tp-dot`	Punct de conectare	Punct de accent pulsatoriu afișat în partea stângă a barei în timpul conectării.
`.tp-wave` / `.tp-wave--idle`	Formă de undă	Forma de undă cu cinci bare. `--idle` adaugă animația lentă de respirație; în timpul unui apel, barele reacționează la sunet.
`.tp-button`	Butoane în apel	Stil de bază pentru comenzile din timpul apelului (42px, colțuri rotunjite de 12px).
`.tp-button-group`	Rând de butoane	Include butoanele de dezactivare a sunetului și de încheiere în timpul unui apel.
`.tp-button--start`	Variantă de buton pentru conectare	Variantă în culoarea de accent, afișată în timp ce începe un apel.
`.tp-button--mute`	Comutator de dezactivare a sunetului	Dezactivează/activează microfonul în timpul unui apel. Utilizează `--tp-surface`.
`.tp-button--end`	Buton de încheiere a apelului	Închide apelul. Utilizează paleta `--tp-end-*`.
`.tp-button--loading`	Modificator de încărcare	Estompează butonul în timpul conectării.
`.tp-icon` / `.tp-spin`	Pictograme	Dimensiunea pictogramelor butoanelor; `tp-spin` animează indicatorul de conectare.
`.tp-status`	Bloc de stare în apel	Include linia de stare în timpul stărilor de conectare/conectat/eroare.
`.tp-status__text`	Linie de stare	Textul stării conexiunii (de exemplu, „Se conectează…”) sau cronometrul apelului. Primește `.tp-status--connected` (culoare de accent) sau `.tp-status--error` (culoare de eroare) în funcție de stare.
`.tp-status__name`	Zonă pentru numele agentului	Parte a blocului de stare, dar nu este afișată în aspectul actual al barei — numele agentului apare în schimb în `.tp-name`.
`.tp-status__dot`	Punct de stare	Stil de punct pulsatoriu pentru starea conectată (utilizează `--tp-connected`).

Exemple

Accent personalizat prin proprietăți

Cea mai simplă modalitate de a personaliza widgetul cu identitatea de brand:

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

Culori personalizate prin CSS

Suprascrieți proprietățile personalizate pentru control complet asupra culorilor. Rețineți că accentul provine din proprietatea primaryColor, nu din 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);
}

Dimensiune personalizată

Măriți sau micșorați widgetul ajustând dimensiunile barei, butoanelor și textului:

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

Ascundeți etichetele text

Tot textul widgetului se află în .tp-meta. Ascundeți-l complet pentru a păstra doar forma de undă și butoanele:

.tp-meta {
  display: none;
}

Sau ascundeți elemente individuale:

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

Eticheta pentru starea inactivă se află în .tp-name/.tp-sub, nu în .tp-status — ascunderea doar a .tp-status afișează în continuare titlul când widgetul este inactiv.

Suprascrieri specifice temei

Vizați o anumită temă folosind clasa temei:

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

Limitarea domeniului cu className

Când utilizați componenta React, transmiteți o proprietate className pentru a limita suprascrierile la o anumită instanță de widget:

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

Apoi vizați acea clasă în CSS:

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

.support-widget .tp-name {
  font-weight: 700;
}

Astfel, puteți avea mai multe instanțe de widget pe aceeași pagină, cu stiluri diferite. Oferiți fiecărei instanțe propriul accent prin proprietatea primaryColor (CSS nu poate suprascrie --tp-accent — acesta este setat inline).

Interfață complet personalizată

Dacă suprascrierile CSS nu sunt suficiente, hookul headless vă oferă control complet. Furnizați tot HTML-ul și stilizarea, în timp ce useThunderPhone gestionează sesiunea vocală. Hookul oferă și audioLevelRef pentru crearea de vizualizări reactive la sunet, cum ar fi formele de undă.

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

Hookul headless este alegerea potrivită când aveți nevoie de animații reactive la sunet, machete personalizate sau integrare într-o bibliotecă de componente existentă. Suprascrierile CSS și proprietățile personalizate sunt mai potrivite pentru ajustări rapide ale temei.

​Teme

​Proprietăți personalizate CSS

​Suprascrierea proprietăților personalizate

​Clase CSS

​Exemple

​Accent personalizat prin proprietăți

​Culori personalizate prin CSS

​Dimensiune personalizată

​Ascundeți etichetele text

​Suprascrieri specifice temei

​Limitarea domeniului cu className

​Interfață complet personalizată

Teme

Proprietăți personalizate CSS

Suprascrierea proprietăților personalizate

Clase CSS

Exemple

Accent personalizat prin proprietăți

Culori personalizate prin CSS

Dimensiune personalizată

Ascundeți etichetele text

Suprascrieri specifice temei

Limitarea domeniului cu className

Interfață complet personalizată