Widget

Stilsetting

Tilpass utseendet til ThunderPhone-stemmewidgeten med CSS

Widgeten vises som en glassmorfisk linje med innebygde lyse og mørke temaer. Tilpasning er tilgjengelig på tre nivåer: props for vanlige alternativer, egendefinerte CSS-egenskaper for temastyring og overstyringer av CSS-klasser for full kontroll.

Temaer#

Propen theme styrer widgetens fargeskjema. Den legger til klassen tp--light eller tp--dark på widgetens rotelement:

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

Begge temaene bruker den glassmorfiske linjedesignen med bakgrunnsuskarphet og diskret gjennomsiktighet.

Egendefinerte CSS-egenskaper#

Widgeten eksponerer egendefinerte CSS-egenskaper (variabler) som du kan overstyre for å endre farger uten å endre enkeltklasser. De defineres av temaklassen (.tp--light eller .tp--dark) som brukes på roten .tp-widget:

Overstyre egendefinerte egenskaper#

Angi aksentfargen via propen primaryColor:

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

Overstyr de andre egendefinerte egenskapene med CSS. Bruk en selektor med to klasser (.tp-widget.tp--light / .tp-widget.tp--dark) slik at regelen din veier tyngre enn temaklassen som definerer standardverdiene, uavhengig av rekkefølgen i stilarket:

.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-klasser#

Alle widgetklasser har prefikset tp- for å unngå konflikter med de eksisterende stilene dine.

Eksempler#

Egendefinert aksent via props#

Den enkleste måten å tilpasse widgeten til merkevaren din på:

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

Egendefinerte farger via CSS#

Overstyr de egendefinerte egenskapene for full kontroll over fargene. Husk at aksentfargen kommer fra prop-en primaryColor, ikke 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);
}

Egendefinert størrelse#

Gjør widgeten større eller mindre ved å justere dimensjonene for linjen, knappene og teksten:

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

Skjul tekstetikettene#

All teksten i widgeten ligger i .tp-meta. Skjul den helt for å beholde bare bølgeformen og knappene:

.tp-meta {
  display: none;
}

Eller skjul enkeltområder:

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

Temaspesifikke overstyringer#

Målrett et bestemt tema med temaklassen:

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

Avgrensing med className#

Når du bruker React-komponenten, kan du sende inn en className-prop for å avgrense overstyringene dine til en bestemt widgetinstans:

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

Målrett deretter denne klassen i CSS-en din:

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

Dette lar deg ha flere widgetinstanser på samme side med ulike stiler. Gi hver instans sin egen aksentfarge via primaryColor-prop-en (CSS kan ikke overstyre --tp-accent -- den angis inline).

Fullstendig egendefinert UI#

Hvis CSS-overstyringer ikke er nok, gir headless-hooken deg full kontroll. Du angir all HTML og styling, mens useThunderPhone håndterer stemmeøkten. Hooken gir også audioLevelRef for å bygge lydreaktive visualiseringer som bølgeformer.

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