Tilpasning af udseende - ThunderPhone

Widgetten gengives som en glassmorfisk bjælke med indbyggede lyse og mørke temaer. Tilpasning er tilgængelig på tre niveauer: props til almindelige indstillinger, brugerdefinerede CSS-egenskaber til tematisering og CSS-klasseoverstyringer til fuld kontrol.

Disse stylingmuligheder gælder for den færdigbyggede widget, der gengives af React-komponenten ThunderPhoneWidget og CDN-metoden ThunderPhone.mount(). Hvis du har brug for en helt tilpasset brugerflade, skal du i stedet bruge headless-hooken.

Temaer

Proppen theme styrer widgettens farveskema. Den anvender en klasse, enten tp--light eller tp--dark, på widgettens rod:

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

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

Begge temaer bruger det glassmorfiske bjælkedesign med sløring af baggrunden og diskret gennemsigtighed.

Brugerdefinerede CSS-egenskaber

Widgetten eksponerer brugerdefinerede CSS-egenskaber (variabler), som du kan tilsidesætte for at ændre farver uden at ændre individuelle klasser. De defineres af temaklassen (.tp--light eller .tp--dark), der anvendes på roden .tp-widget:

Egenskab	Standard (lys)	Standard (mørk)	Beskrivelse
`--tp-accent`	`#000`	`#fff`	Fremhævningsfarve: startknap, bølgeformsbjælker, forbindelsesprik, statustekst for forbindelse. Angives inline fra propen `primaryColor`.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Bjælkens baggrund (halvgennemsigtig; sløret af `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Baggrund for slå-lyd-fra-knappen.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Hoverbaggrund for slå-lyd-fra-knappen.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Kanter for bjælke og knapper.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Kantfarve ved hover.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Primær tekst (titel, agentnavn).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Sekundær tekst (undertitel, statuslinje, opkaldstimer).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter`, der skaber glaseffekten på bjælken.
`--tp-shadow`	skygger i tre lag	skygger i tre lag	Bjælkens `box-shadow` (ring + nære + fjerne lag).
`--tp-shadow-hover`	skygger i tre lag	skygger i tre lag	Deklareret til løft ved hover; anvendes i øjeblikket ikke af nogen 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)`	Indvendig fremhævning øverst, lagt oven på bjælkens skygge.
`--tp-connected`	`#059669`	`#34d399`	Farve for indikator i forbundet tilstand (statusprik).
`--tp-error`	`#dc2626`	`#fb7185`	Farve for statustekst i fejltilstand.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Baggrund for afslut-opkald-knappen.
`--tp-end-color`	`#ef4444`	`#fb7185`	Ikonfarve for afslut-opkald-knappen.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Kant for afslut-opkald-knappen.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Hoverbaggrund for afslut-opkald-knappen.
`--tp-idle-opacity`	`0.4`	`0.3`	Deklareret til nedtoning i inaktiv tilstand; anvendes i øjeblikket ikke af nogen regel.

Tilsidesættelse af brugerdefinerede egenskaber

Angiv fremhævningsfarven via propen primaryColor:

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

--tp-accent angives som en inline-stil fra propen primaryColor, så tilsidesættelser af --tp-accent i stylesheets ikke har nogen effekt. Skift fremhævningsfarven med propen. Alle andre brugerdefinerede egenskaber kan tilsidesættes i CSS.

Tilsidesæt de øvrige brugerdefinerede egenskaber med CSS. Brug en selector med to klasser (.tp-widget.tp--light / .tp-widget.tp--dark), så din regel vejer tungere end temaklassen, der definerer standardværdierne, uanset rækkefølgen i stylesheets:

.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 er præfikset med tp- for at undgå konflikter med dine eksisterende typografier.

Klasse	Element	Beskrivelse
`.tp-widget`	Rodwrapper	Container med fast position (`position: fixed`, hjørne angivet af propen `position`, `z-index: 9999`). Indeholder temaklassen og grundlæggende skrifttypeindstillinger; har ingen egen visuel udformning.
`.tp--light` / `.tp--dark`	Temamodifikatorer	Anvendes på `.tp-widget` sammen med temaet; definerer alle brugerdefinerede egenskaber for `--tp-*`.
`.tp-bar`	Bjælken	Selve den glasagtige pille: baggrund, baggrundssløring, kant, radius på `99px`, skygge. `300px` bred.
`.tp-meta`	Tekstblok	Container til al tekst — titel og undertitel i inaktiv tilstand, agentnavn og status under et opkald.
`.tp-name`	Primær etiket	Viser propen `title` i inaktiv tilstand og den tilsluttede agents navn (falder tilbage til `title`) under et opkald.
`.tp-sub`	Undertitel	Linjen “Tilgængelig nu”, der vises i inaktiv tilstand.
`.tp-start`	Opkaldsknap i inaktiv tilstand	Den cirkulære startknap med accentfarve (42px). Bruger `--tp-accent` som baggrund.
`.tp-dot`	Tilslutningsprik	Pulserende prik med accentfarve, der vises til venstre på bjælken under tilslutning.
`.tp-wave` / `.tp-wave--idle`	Bølgeform	Bølgeformen med fem bjælker. `--idle` tilføjer den langsomme åndedrætsanimation; under et opkald reagerer bjælkerne på lyd.
`.tp-button`	Knapper under opkald	Grundstil for kontrolelementerne under opkald (42px, afrundet 12px).
`.tp-button-group`	Knaprække	Omslutter knapperne til slå lyd fra og afslut under et opkald.
`.tp-button--start`	Variant af tilslutningsknap	Variant med accentfarve, der vises, mens et opkald starter.
`.tp-button--mute`	Skift lyd fra	Slår mikrofonen fra eller til under et opkald. Bruger `--tp-surface`.
`.tp-button--end`	Knap til afslut opkald	Lægger på. Bruger paletten `--tp-end-*`.
`.tp-button--loading`	Indlæsningsmodifikator	Nedtoner knappen under tilslutning.
`.tp-icon` / `.tp-spin`	Ikoner	Størrelse på knapikoner; `tp-spin` animerer tilslutningsspinneren.
`.tp-status`	Statusblok under opkald	Omslutter statuslinjen under tilstandene tilslutter/tilsluttet/fejl.
`.tp-status__text`	Statuslinje	Tekst for forbindelsestilstand (f.eks. “Forbinder…”) eller opkaldstimeren. Får `.tp-status--connected` (accentfarve) eller `.tp-status--error` (fejlfarve) afhængigt af tilstanden.
`.tp-status__name`	Plads til agentnavn	Del af statusblokken, men gengives ikke i det aktuelle bjælkelayout — agentnavnet vises i stedet i `.tp-name`.
`.tp-status__dot`	Statusprik	Stil for pulserende prik i tilsluttet tilstand (bruger `--tp-connected`).

Eksempler

Tilpasset accent via props

Den nemmeste måde at tilpasse widgetten til dit brand:

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

Tilpassede farver via CSS

Overskriv de brugerdefinerede egenskaber for fuld kontrol over farverne. Husk, at accentfarven kommer fra proppen 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);
}

Tilpasset størrelse

Gør widgetten større eller mindre ved at justere dimensionerne for bjælken, knapperne 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 tekstetiketterne

Al widgettens tekst findes i .tp-meta. Skjul den helt for kun at beholde bølgeformen og knapperne:

.tp-meta {
  display: none;
}

Eller skjul enkelte dele:

/* 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 i inaktiv tilstand findes i .tp-name/.tp-sub, ikke .tp-status — hvis du kun skjuler .tp-status, vises titlen stadig, når widgetten er inaktiv.

Tema-specifikke overskrivninger

Vælg 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);
}

Afgrænsning med className

Når du bruger React-komponenten, skal du angive en className-prop for at afgrænse dine overskrivninger til en bestemt widgetinstans:

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

Målret derefter denne klasse i din CSS:

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

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

Det gør det muligt at have flere widgetinstanser på samme side med forskellige stilarter. Giv hver instans sin egen accentfarve via dens primaryColor-prop (CSS kan ikke overskrive --tp-accent — den angives inline).

Fuldt tilpasset brugergrænseflade

Hvis CSS-overskrivninger ikke er nok, giver den headless hook dig fuld kontrol. Du leverer al HTML og styling, mens useThunderPhone håndterer stemmesessionen. Hooken giver også audioLevelRef til at 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>
  )
}

Den headless hook er det rigtige valg, når du har brug for lydreaktive animationer, tilpassede layouts eller integration i et eksisterende komponentbibliotek. CSS-overskrivninger og brugerdefinerede egenskaber er bedre til hurtige temaændringer.

​Temaer

​Brugerdefinerede CSS-egenskaber

​Tilsidesættelse af brugerdefinerede egenskaber

​CSS-klasser

​Eksempler

​Tilpasset accent via props

​Tilpassede farver via CSS

​Tilpasset størrelse

​Skjul tekstetiketterne

​Tema-specifikke overskrivninger

​Afgrænsning med className

​Fuldt tilpasset brugergrænseflade

Temaer

Brugerdefinerede CSS-egenskaber

Tilsidesættelse af brugerdefinerede egenskaber

CSS-klasser

Eksempler

Tilpasset accent via props

Tilpassede farver via CSS

Tilpasset størrelse

Skjul tekstetiketterne

Tema-specifikke overskrivninger

Afgrænsning med className

Fuldt tilpasset brugergrænseflade