Widget

Stijlen

Pas het uiterlijk van de ThunderPhone-spraakwidget aan met CSS

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.

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

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:

Aangepaste eigenschappen overschrijven#

Stel de accentkleur in via de primaryColor-prop:

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

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.

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

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