Stilsetting - ThunderPhone

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.

Disse stilalternativene gjelder den forhåndsbygde widgeten som vises av React-komponenten ThunderPhoneWidget og CDN-metoden ThunderPhone.mount(). Hvis du trenger et helt tilpasset brukergrensesnitt, bruker du headless-hooken i stedet.

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

Tema	Klasse	Beskrivelse
`'light'`	`tp--light`	Lys bakgrunn med mørk tekst. Standard.
`'dark'`	`tp--dark`	Mørk bakgrunn med lys tekst.

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:

Egenskap	Standard (lys)	Standard (mørk)	Beskrivelse
`--tp-accent`	`#000`	`#fff`	Aksentfarge: startknapp, bølgeformstolper, tilkoblingspunkt, statustekst for tilkoblet. Angis inline fra propen `primaryColor`.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Bakgrunn for linjen (halvtransparent; uskarp med `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Bakgrunn for dempeknappen.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Bakgrunn for dempeknappen ved hover.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Kantlinjer for linje og knapper.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Kantlinjefarge ved hover.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Primærtekst (tittel, agentnavn).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Sekundærtekst (undertittel, statuslinje, samtaletidtaker).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter` som skaper glasseffekten på linjen.
`--tp-shadow`	skygge med tre lag	skygge med tre lag	Linjens `box-shadow` (ring + nære + fjerne lag).
`--tp-shadow-hover`	skygge med tre lag	skygge med tre lag	Definert for heving ved hover; brukes ikke av noen regel for øyeblikket.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Indre utheving øverst som legges over linjens skygge.
`--tp-connected`	`#059669`	`#34d399`	Indikatorfarge for tilkoblet tilstand (statuspunkt).
`--tp-error`	`#dc2626`	`#fb7185`	Farge på statustekst ved feil.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Bakgrunn for avslutt samtale-knappen.
`--tp-end-color`	`#ef4444`	`#fb7185`	Ikonfarge for avslutt samtale-knappen.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Kantlinje for avslutt samtale-knappen.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Bakgrunn for avslutt samtale-knappen ved hover.
`--tp-idle-opacity`	`0.4`	`0.3`	Definert for nedtoning i inaktiv tilstand; brukes ikke av noen regel for øyeblikket.

Overstyre egendefinerte egenskaper

Angi aksentfargen via propen primaryColor:

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

--tp-accent angis som en inline-stil fra propen primaryColor, så overstyringer av --tp-accent i stilark har ingen effekt. Endre aksentfargen med propen. Alle andre egendefinerte egenskaper kan overstyres i CSS.

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.

Klasse	Element	Beskrivelse
`.tp-widget`	Rotomslag	Beholder med fast posisjon (`position: fixed`, hjørne angitt av `position`-propen, `z-index: 9999`). Har temaklassen og grunnleggende skriftinnstillinger, uten egen visuell utforming.
`.tp--light` / `.tp--dark`	Temamodifikatorer	Brukes på `.tp-widget` sammen med temaet; definerer alle egendefinerte egenskaper for `--tp-*`.
`.tp-bar`	Linjen	Selve den glassmorfiske pillen: bakgrunn, uskarp bakgrunn, kantlinje, `99px` radius og skygge. `300px` bred.
`.tp-meta`	Tekstblokk	Beholder for all tekst — tittel og undertittel når den er inaktiv, agentnavn og status under en samtale.
`.tp-name`	Primæretikett	Viser `title`-propen når den er inaktiv, og navnet på den tilkoblede agenten (med `title` som reserve) under en samtale.
`.tp-sub`	Undertittel	Linjen «Tilgjengelig nå» som vises når den er inaktiv.
`.tp-start`	Samtaleknapp i inaktiv tilstand	Den sirkulære startknappen med aksentfarge (42px). Bruker `--tp-accent` som bakgrunn.
`.tp-dot`	Tilkoblingsprikk	Pulserende prikk med aksentfarge som vises til venstre i linjen under tilkobling.
`.tp-wave` / `.tp-wave--idle`	Bølgeform	Bølgeformen med fem stolper. `--idle` legger til den langsomme pustende animasjonen; under en samtale reagerer stolpene på lyd.
`.tp-button`	Knapper under samtale	Grunnstil for kontrollene under samtaler (42px, avrundet 12px).
`.tp-button-group`	Knappelinje	Omslutter dempe- og avsluttknappene under en samtale.
`.tp-button--start`	Variant for tilkoblingsknapp	Variant med aksentfarge som vises mens en samtale starter.
`.tp-button--mute`	Dempebryter	Demper/opphever demping av mikrofonen under en samtale. Bruker `--tp-surface`.
`.tp-button--end`	Knapp for å avslutte samtale	Legger på. Bruker paletten `--tp-end-*`.
`.tp-button--loading`	Lastemodifikator	Toner ned knappen under tilkobling.
`.tp-icon` / `.tp-spin`	Ikoner	Størrelse på knappikoner; `tp-spin` animerer tilkoblingsspinneren.
`.tp-status`	Statusblokk under samtale	Omslutter statuslinjen under tilstander for tilkobling/tilkoblet/feil.
`.tp-status__text`	Statuslinje	Tekst for tilkoblingsstatus (for eksempel «Kobler til …») eller samtaletidtakeren. Får `.tp-status--connected` (aksentfarge) eller `.tp-status--error` (feilfarge) per tilstand.
`.tp-status__name`	Plass for agentnavn	Del av statusblokken, men gjengis ikke i det nåværende linjeoppsettet — agentnavnet vises i `.tp-name` i stedet.
`.tp-status__dot`	Statusprikk	Stil for pulserende prikk i tilkoblet tilstand (bruker `--tp-connected`).

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

Etiketten når widgeten er inaktiv ligger i .tp-name/.tp-sub, ikke .tp-status — hvis du bare skjuler .tp-status, vises tittelen fortsatt når widgeten er inaktiv.

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

Headless-hooken er riktig valg når du trenger lydreaktive animasjoner, egendefinerte oppsett eller integrasjon med et eksisterende komponentbibliotek. CSS-overstyringer og egendefinerte egenskaper er bedre for raske temajusteringer.

​Temaer

​Egendefinerte CSS-egenskaper

​Overstyre egendefinerte egenskaper

​CSS-klasser

​Eksempler

​Egendefinert aksent via props

​Egendefinerte farger via CSS

​Egendefinert størrelse

​Skjul tekstetikettene

​Temaspesifikke overstyringer

​Avgrensing med className

​Fullstendig egendefinert UI

Temaer

Egendefinerte CSS-egenskaper

Overstyre egendefinerte egenskaper

CSS-klasser

Eksempler

Egendefinert aksent via props

Egendefinerte farger via CSS

Egendefinert størrelse

Skjul tekstetikettene

Temaspesifikke overstyringer

Avgrensing med className

Fullstendig egendefinert UI