Stijlen - ThunderPhone

De widget wordt weergegeven als een glasachtige balk met ingebouwde lichte en donkere thema’s. Aanpassing is beschikbaar op drie niveaus: props voor veelvoorkomende opties, aangepaste CSS-eigenschappen voor thematisering en CSS-klasse-overschrijvingen voor volledige controle.

Deze stijlopties zijn van toepassing op de vooraf gebouwde widget die wordt weergegeven door de React-component ThunderPhoneWidget en de CDN-methode ThunderPhone.mount(). Als je een volledig aangepaste UI nodig hebt, gebruik dan in plaats daarvan de headless hook.

Thema’s

De prop theme bepaalt het kleurenschema van de widget. Deze voegt een klasse tp--light of tp--dark toe aan de hoofdcontainer van de widget:

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

Thema	Klasse	Beschrijving
`'light'`	`tp--light`	Lichte achtergrond met donkere tekst. Standaard.
`'dark'`	`tp--dark`	Donkere achtergrond met lichte tekst.

Beide thema’s gebruiken het glasachtige balkontwerp met achtergrondvervaging en subtiele transparantie.

Aangepaste CSS-eigenschappen

De widget biedt aangepaste CSS-eigenschappen (variabelen) die je kunt overschrijven om kleuren te wijzigen zonder afzonderlijke klassen aan te passen. Ze worden gedefinieerd door de themaklasse (.tp--light of .tp--dark) die op de .tp-widget-root wordt toegepast:

Eigenschap	Standaard (licht)	Standaard (donker)	Beschrijving
`--tp-accent`	`#000`	`#fff`	Accentkleur: startknop, golfvormbalken, verbindingspunt, statustekst voor verbonden. Wordt inline ingesteld via de `primaryColor`-prop.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Achtergrond van de balk (doorschijnend; vervaagd door `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Achtergrond van de dempknop.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Achtergrond van de dempknop bij aanwijzen.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Randen van de balk en knoppen.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Randkleur bij aanwijzen.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Primaire tekst (titel, naam van de agent).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Secundaire tekst (ondertitel, statusregel, gesprekstimer).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter` die het glaseffect op de balk creëert.
`--tp-shadow`	schaduwstapel met drie lagen	schaduwstapel met drie lagen	De `box-shadow` van de balk (ring + nabije + verre lagen).
`--tp-shadow-hover`	schaduwstapel met drie lagen	schaduwstapel met drie lagen	Gedeclareerd voor verhoging bij aanwijzen; momenteel niet toegepast door een regel.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Binnenste bovenste highlight die over de schaduw van de balk wordt gelegd.
`--tp-connected`	`#059669`	`#34d399`	Kleur van de indicator voor de verbonden status (statuspunt).
`--tp-error`	`#dc2626`	`#fb7185`	Tekstkleur voor de foutstatus.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Achtergrond van de knop om het gesprek te beëindigen.
`--tp-end-color`	`#ef4444`	`#fb7185`	Icoonkleuren van de knop om het gesprek te beëindigen.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Rand van de knop om het gesprek te beëindigen.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Achtergrond van de knop om het gesprek te beëindigen bij aanwijzen.
`--tp-idle-opacity`	`0.4`	`0.3`	Gedeclareerd voor dimmen in de inactieve status; momenteel niet toegepast door een regel.

Aangepaste eigenschappen overschrijven

Stel de accentkleur in via de primaryColor-prop:

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

--tp-accent wordt ingesteld als een inline stijl via de primaryColor-prop, dus overschrijvingen van --tp-accent in stylesheets hebben geen effect. Wijzig de accentkleur met de prop. Alle andere aangepaste eigenschappen kun je in CSS overschrijven.

Overschrijf de andere aangepaste eigenschappen met CSS. Gebruik een selector met twee klassen (.tp-widget.tp--light / .tp-widget.tp--dark), zodat je regel zwaarder weegt dan de themaklasse die de standaardwaarden definieert, ongeacht de volgorde van de stylesheet:

.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 widgetklassen hebben het voorvoegsel tp- om conflicten met je bestaande stijlen te voorkomen.

Klasse	Element	Beschrijving
`.tp-widget`	Hoofdcontainer	Container met vaste positie (`position: fixed`, hoek ingesteld via de `position`-prop, `z-index: 9999`). Bevat de themaklasse en basislettertype-instellingen; heeft zelf geen visuele omlijsting.
`.tp--light` / `.tp--dark`	Thema-aanpassingen	Worden samen met het thema toegepast op `.tp-widget`; definiëren alle aangepaste eigenschappen `--tp-*`.
`.tp-bar`	De balk	De glazen pilvormige balk zelf: achtergrond, achtergrondvervaging, rand, straal van `99px`, schaduw. `300px` breed.
`.tp-meta`	Tekstblok	Container voor alle tekst — titel en ondertitel wanneer inactief, naam en status van de agent tijdens een oproep.
`.tp-name`	Primair label	Toont de `title`-prop wanneer inactief, en de naam van de verbonden agent (met `title` als terugvaloptie) tijdens een oproep.
`.tp-sub`	Ondertitel	De regel “Nu beschikbaar” die wordt getoond wanneer inactief.
`.tp-start`	Knop voor oproep in inactieve toestand	De ronde startknop met accentkleur (42px). Gebruikt `--tp-accent` als achtergrond.
`.tp-dot`	Verbindingspunt	Pulserend punt met accentkleur dat tijdens het verbinden links van de balk wordt weergegeven.
`.tp-wave` / `.tp-wave--idle`	Golfvorm	De golfvorm met vijf balken. `--idle` voegt de langzame ademhalingsanimatie toe; tijdens een oproep reageren de balken op audio.
`.tp-button`	Knoppen tijdens een oproep	Basisstijl voor bedieningselementen tijdens een oproep (42px, afgerond met 12px).
`.tp-button-group`	Knoppenrij	Bevat de knoppen voor dempen en beëindigen tijdens een oproep.
`.tp-button--start`	Variant voor verbindingsknop	Variant met accentkleur die wordt weergegeven terwijl een oproep wordt gestart.
`.tp-button--mute`	Schakelaar voor dempen	Dempt of heft de demping van de microfoon op tijdens een oproep. Gebruikt `--tp-surface`.
`.tp-button--end`	Knop voor oproep beëindigen	Hangt op. Gebruikt het palet `--tp-end-*`.
`.tp-button--loading`	Laadstatusaanpassing	Maakt de knop donkerder tijdens het verbinden.
`.tp-icon` / `.tp-spin`	Pictogrammen	Grootte van knopictogrammen; `tp-spin` animeert de verbindingsspinner.
`.tp-status`	Statusblok tijdens oproep	Bevat de statusregel tijdens de statussen verbinden/verbonden/fout.
`.tp-status__text`	Statusregel	Tekst voor de verbindingsstatus (bijvoorbeeld “Verbinden…”) of de oproeptimer. Krijgt `.tp-status--connected` (accentkleur) of `.tp-status--error` (foutkleur) afhankelijk van de status.
`.tp-status__name`	Plaats voor agentnaam	Onderdeel van het statusblok, maar wordt niet weergegeven in de huidige balkindeling — de naam van de agent verschijnt in plaats daarvan in `.tp-name`.
`.tp-status__dot`	Statuspunt	Stijl voor pulserend punt in verbonden toestand (gebruikt `--tp-connected`).

Voorbeelden

Aangepast accent via props

De eenvoudigste manier om de widget van je merk te voorzien:

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

Aangepaste kleuren via CSS

Overschrijf de aangepaste eigenschappen voor volledige controle over de kleuren. Onthoud dat het accent afkomstig is van de prop primaryColor, niet van 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);
}

Aangepast formaat

Maak de widget groter of kleiner door de afmetingen van de balk, knoppen en tekst aan te passen:

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

De tekstlabels verbergen

Alle tekst van de widget bevindt zich in .tp-meta. Verberg deze volledig zodat alleen de golfvorm en knoppen overblijven:

.tp-meta {
  display: none;
}

Of verberg afzonderlijke onderdelen:

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

Het inactieve label bevindt zich in .tp-name/.tp-sub, niet in .tp-status — als je alleen .tp-status verbergt, wordt de titel nog steeds weergegeven wanneer de widget inactief is.

Thema-specifieke overschrijvingen

Richt je op een specifiek thema met de themaklasse:

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

Afbakenen met className

Wanneer je de React-component gebruikt, geef je een prop className door om je overschrijvingen te beperken tot een specifieke widgetinstantie:

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

Richt je vervolgens in je CSS op die klasse:

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

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

Hiermee kun je meerdere widgetinstanties met verschillende stijlen op dezelfde pagina hebben. Geef elke instantie een eigen accent via de prop primaryColor (CSS kan --tp-accent niet overschrijven — deze wordt inline ingesteld).

Volledig aangepaste UI

Als CSS-overschrijvingen niet voldoende zijn, geeft de headless hook je volledige controle. Je levert alle HTML en styling, terwijl useThunderPhone de spraaksessie afhandelt. De hook biedt ook audioLevelRef voor het bouwen van audio-reactieve visualisaties, zoals golfvormen.

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

De headless hook is de juiste keuze wanneer je audio-reactieve animaties, aangepaste lay-outs of integratie met een bestaande componentbibliotheek nodig hebt. CSS-overschrijvingen en aangepaste eigenschappen zijn beter geschikt voor snelle aanpassingen aan het thema.

​Thema’s

​Aangepaste CSS-eigenschappen

​Aangepaste eigenschappen overschrijven

​CSS-klassen

​Voorbeelden

​Aangepast accent via props

​Aangepaste kleuren via CSS

​Aangepast formaat

​De tekstlabels verbergen

​Thema-specifieke overschrijvingen

​Afbakenen met className

​Volledig aangepaste UI

Thema’s

Aangepaste CSS-eigenschappen

Aangepaste eigenschappen overschrijven

CSS-klassen

Voorbeelden

Aangepast accent via props

Aangepaste kleuren via CSS

Aangepast formaat

De tekstlabels verbergen

Thema-specifieke overschrijvingen

Afbakenen met className

Volledig aangepaste UI