Stilsättning - ThunderPhone

Widgeten renderas som en glassmorfisk stapel med inbyggda ljusa och mörka teman. Anpassning är möjlig på tre nivåer: props för vanliga alternativ, anpassade CSS-egenskaper för teman och åsidosättningar av CSS-klasser för full kontroll.

Dessa stilalternativ gäller den förbyggda widgeten som renderas av React-komponenten ThunderPhoneWidget och CDN-metoden ThunderPhone.mount(). Om du behöver ett helt anpassat användargränssnitt använder du i stället headless-hooken.

Teman

Propen theme styr widgetens färgschema. Den tillämpar klassen tp--light eller tp--dark på widgetens rotelement:

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

Tema	Klass	Beskrivning
`'light'`	`tp--light`	Ljus bakgrund med mörk text. Standard.
`'dark'`	`tp--dark`	Mörk bakgrund med ljus text.

Båda teman använder den glassmorfiska stapeldesignen med oskärpa i bakgrunden och diskret transparens.

Anpassade CSS-egenskaper

Widgeten exponerar anpassade CSS-egenskaper (variabler) som du kan åsidosätta för att ändra färger utan att röra enskilda klasser. De definieras av temaklassen (.tp--light eller .tp--dark) som tillämpas på roten .tp-widget:

Egenskap	Standard (ljust)	Standard (mörkt)	Beskrivning
`--tp-accent`	`#000`	`#fff`	Accentfärg: startknapp, vågformsstaplar, anslutningspunkt, text för ansluten status. Anges inline från propen `primaryColor`.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Bakgrund för fältet (halvgenomskinlig; suddas ut av `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Bakgrund för avstängningsknappen.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Bakgrund för avstängningsknappen vid hovring.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Kanter för fält och knappar.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Kantfärg vid hovring.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Primär text (titel, agentnamn).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Sekundär text (undertitel, statusrad, samtalstimer).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter` som skapar glaseffekten på fältet.
`--tp-shadow`	skuggstapel i tre lager	skuggstapel i tre lager	Fältets `box-shadow` (ring + nära + avlägsna lager).
`--tp-shadow-hover`	skuggstapel i tre lager	skuggstapel i tre lager	Deklarerad för upphöjning vid hovring; tillämpas för närvarande inte av någon 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)`	Inre högdagrar upptill som läggs ovanpå fältets skugga.
`--tp-connected`	`#059669`	`#34d399`	Färg för indikator vid anslutet läge (statuspunkt).
`--tp-error`	`#dc2626`	`#fb7185`	Textfärg för felstatus.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Bakgrund för knappen för att avsluta samtal.
`--tp-end-color`	`#ef4444`	`#fb7185`	Ikonfärg för knappen för att avsluta samtal.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Kant för knappen för att avsluta samtal.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Bakgrund för knappen för att avsluta samtal vid hovring.
`--tp-idle-opacity`	`0.4`	`0.3`	Deklarerad för nedtoning i viloläge; tillämpas för närvarande inte av någon regel.

Åsidosätta anpassade egenskaper

Ange accentfärgen via propen primaryColor:

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

--tp-accent anges som en inline-stil från propen primaryColor, så åsidosättningar av --tp-accent i formatmallar har ingen effekt. Ändra accentfärgen med propen. Alla andra anpassade egenskaper kan åsidosättas i CSS.

Åsidosätt de andra anpassade egenskaperna med CSS. Använd en väljare med två klasser (.tp-widget.tp--light / .tp-widget.tp--dark) så att din regel har högre prioritet än temaklassen som definierar standardvärdena, oavsett ordningen i formatmallen:

.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

Alla widgetklasser har prefixet tp- för att undvika konflikter med dina befintliga stilar.

Klass	Element	Beskrivning
`.tp-widget`	Rotomslag	Behållare med fast position (`position: fixed`, hörn anges av propen `position`, `z-index: 9999`). Har temaklassen och grundläggande teckensnittsinställningar; ingen egen visuell inramning.
`.tp--light` / `.tp--dark`	Temamodifierare	Tillämpas på `.tp-widget` tillsammans med temat; definierar alla anpassade egenskaper `--tp-*`.
`.tp-bar`	Fältet	Själva den glasliknande pillformen: bakgrund, bakgrundsoskärpa, kantlinje, radie på `99px`, skugga. `300px` bred.
`.tp-meta`	Textblock	Behållare för all text — titel och undertitel i viloläge, agentnamn och status under ett samtal.
`.tp-name`	Primär etikett	Visar propen `title` i viloläge och den anslutna agentens namn (med `title` som reserv) under ett samtal.
`.tp-sub`	Undertitel	Raden “Tillgänglig nu” som visas i viloläge.
`.tp-start`	Samtalsknapp i viloläge	Den cirkulära startknappen med accentfärg (42px). Använder `--tp-accent` som bakgrund.
`.tp-dot`	Anslutningspunkt	Pulserande punkt i accentfärg som visas till vänster i fältet medan anslutning sker.
`.tp-wave` / `.tp-wave--idle`	Vågmönster	Vågmönstret med fem staplar. `--idle` lägger till den långsamma andningsanimationen; under ett samtal reagerar staplarna på ljud.
`.tp-button`	Knappar under samtal	Grundstil för kontrollerna under samtal (42px, rundade 12px).
`.tp-button-group`	Knapp rad	Omsluter knapparna för avstängning av mikrofon och avslut under ett samtal.
`.tp-button--start`	Variant för anslutningsknapp	Variant med accentfärg som visas medan ett samtal startar.
`.tp-button--mute`	Växla mikrofonavstängning	Stänger av eller slår på mikrofonen under ett samtal. Använder `--tp-surface`.
`.tp-button--end`	Knapp för att avsluta samtal	Lägger på. Använder paletten `--tp-end-*`.
`.tp-button--loading`	Laddningsmodifierare	Tonar ned knappen medan anslutning sker.
`.tp-icon` / `.tp-spin`	Ikoner	Storlek på knappikoner; `tp-spin` animerar anslutningssnurran.
`.tp-status`	Statusblock under samtal	Omsluter statusraden under anslutnings-, anslutet- och feltillstånd.
`.tp-status__text`	Statusrad	Text för anslutningsstatus (t.ex. “Ansluter…”) eller samtalstimern. Får `.tp-status--connected` (accentfärg) eller `.tp-status--error` (färg för fel) beroende på tillstånd.
`.tp-status__name`	Plats för agentnamn	Del av statusblocket, men renderas inte i den aktuella fältlayouten — agentnamnet visas i `.tp-name` i stället.
`.tp-status__dot`	Statuspunkt	Stil för pulserande punkt i anslutet läge (använder `--tp-connected`).

Exempel

Anpassad accentfärg via props

Det enklaste sättet att varumärkesanpassa widgeten:

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

Anpassade färger via CSS

Åsidosätt de anpassade egenskaperna för full kontroll över färgerna. Kom ihåg att accentfärgen kommer från propen primaryColor, inte från 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);
}

Anpassad storlek

Gör widgeten större eller mindre genom att justera måtten för fältet, knapparna och texten:

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

Dölj textetiketterna

All text i widgeten finns i .tp-meta. Dölj den helt om du bara vill behålla vågformen och knapparna:

.tp-meta {
  display: none;
}

Eller dölj enskilda delar:

/* 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 viloläge finns i .tp-name/.tp-sub, inte i .tp-status — om du bara döljer .tp-status visas titeln fortfarande när widgeten är i viloläge.

Åsidosättningar för specifika teman

Rikta in dig på ett specifikt 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);
}

Avgränsning med className

När du använder React-komponenten skickar du en className-prop för att begränsa dina åsidosättningar till en specifik widgetinstans:

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

Rikta sedan in dig på den klassen i din CSS:

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

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

Detta gör att du kan ha flera widgetinstanser på samma sida med olika stilar. Ge varje instans en egen accentfärg via dess primaryColor-prop (CSS kan inte åsidosätta --tp-accent — den anges inline).

Helt anpassat gränssnitt

Om CSS-åsidosättningar inte räcker ger den headless-hooken dig full kontroll. Du tillhandahåller all HTML och styling medan useThunderPhone hanterar röstsessionen. Hooken tillhandahåller även audioLevelRef för att bygga ljudreaktiva visualiseringar som vågformer.

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 är rätt val när du behöver ljudreaktiva animationer, anpassade layouter eller integrering i ett befintligt komponentbibliotek. CSS-åsidosättningar och anpassade egenskaper är bättre för snabba temaändringar.

​Teman

​Anpassade CSS-egenskaper

​Åsidosätta anpassade egenskaper

​CSS-klasser

​Exempel

​Anpassad accentfärg via props

​Anpassade färger via CSS

​Anpassad storlek

​Dölj textetiketterna

​Åsidosättningar för specifika teman

​Avgränsning med className

​Helt anpassat gränssnitt

Teman

Anpassade CSS-egenskaper

Åsidosätta anpassade egenskaper

CSS-klasser

Exempel

Anpassad accentfärg via props

Anpassade färger via CSS

Anpassad storlek

Dölj textetiketterna

Åsidosättningar för specifika teman

Avgränsning med className

Helt anpassat gränssnitt