Widget

Stile

Personalizza l

Il widget viene visualizzato come una barra glassmorfica con temi chiaro e scuro integrati. La personalizzazione è disponibile su tre livelli: prop per le opzioni comuni, proprietà personalizzate CSS per i temi e override delle classi CSS per il controllo completo.

Temi#

La prop theme controlla lo schema colori del widget. Applica una classe tp--light o tp--dark alla radice del widget:

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

Entrambi i temi utilizzano il design a barra glassmorfica con sfocatura dello sfondo e trasparenza delicata.

Proprietà personalizzate CSS#

Il widget espone proprietà personalizzate CSS (variabili) che puoi sovrascrivere per modificare i colori senza intervenire sulle singole classi. Sono definite dalla classe del tema (.tp--light o .tp--dark) applicata alla radice .tp-widget:

Sovrascrivere le proprietà personalizzate#

Imposta il colore di accento tramite la prop primaryColor:

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

Sovrascrivi le altre proprietà personalizzate con CSS. Usa un selettore a due classi (.tp-widget.tp--light / .tp-widget.tp--dark) affinché la tua regola prevalga sulla classe del tema che definisce i valori predefiniti, indipendentemente dall'ordine del foglio di stile:

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

Classi CSS#

Tutte le classi del widget hanno il prefisso tp- per evitare conflitti con gli stili esistenti.

Esempi#

Accento personalizzato tramite props#

Il modo più semplice per personalizzare il brand del widget:

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

Colori personalizzati tramite CSS#

Sovrascrivi le proprietà personalizzate per avere il pieno controllo dei colori. Ricorda che l'accento proviene dalla prop primaryColor, non dal 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);
}

Dimensioni personalizzate#

Ingrandisci o rimpicciolisci il widget regolando le dimensioni della barra, dei pulsanti e del testo:

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

Nascondere le etichette di testo#

Tutto il testo del widget si trova in .tp-meta. Nascondilo completamente per mantenere solo la forma d'onda e i pulsanti:

.tp-meta {
  display: none;
}

In alternativa, nascondi singole parti:

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

Sovrascritture specifiche per tema#

Indirizza un tema specifico con la classe del tema:

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

Ambito con className#

Quando usi il componente React, passa una prop className per limitare le sovrascritture a una specifica istanza del widget:

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

Quindi indirizza quella classe nel tuo CSS:

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

Questo ti consente di avere più istanze del widget nella stessa pagina con stili diversi. Assegna a ogni istanza il proprio accento tramite la relativa prop primaryColor (il CSS non può sovrascrivere --tp-accent -- viene impostato inline).

Interfaccia utente completamente personalizzata#

Se le sovrascritture CSS non sono sufficienti, l'hook headless ti offre il pieno controllo. Fornisci tutto l'HTML e lo stile, mentre useThunderPhone gestisce la sessione vocale. L'hook fornisce inoltre audioLevelRef per creare visualizzazioni reattive all'audio, come le forme d'onda.

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