Tyylittely - ThunderPhone

Widget renderöidään lasimorfisena palkkina, jossa on sisäänrakennetut vaalea ja tumma teema. Mukautuksia on saatavilla kolmella tasolla: propit yleisille asetuksille, CSS-mukautetut ominaisuudet teemoitukseen ja CSS-luokkien ohitukset täydelliseen hallintaan.

Nämä tyylivaihtoehdot koskevat valmiiksi rakennettua widgetiä, jonka renderöivät React-komponentti ThunderPhoneWidget ja CDN-metodi ThunderPhone.mount(). Jos tarvitset täysin mukautetun käyttöliittymän, käytä sen sijaan headless-hookia.

Teemat

theme-proppi määrittää widgetin värimaailman. Se lisää tp--light- tai tp--dark-luokan widgetin juurielementtiin:

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

Teema	Luokka	Kuvaus
`'light'`	`tp--light`	Vaalea tausta ja tumma teksti. Oletus.
`'dark'`	`tp--dark`	Tumma tausta ja vaalea teksti.

Molemmissa teemoissa käytetään lasimorfista palkkimuotoilua, jossa on taustan sumentaminen ja hienovarainen läpinäkyvyys.

CSS-mukautetut ominaisuudet

Widget tarjoaa CSS-mukautettuja ominaisuuksia (muuttujia), joita voit korvata muuttaaksesi värejä koskematta yksittäisiin luokkiin. Ne määritetään .tp-widget-juurielementtiin lisättävällä teemaluokalla (.tp--light tai .tp--dark):

Ominaisuus	Oletus (vaalea)	Oletus (tumma)	Kuvaus
`--tp-accent`	`#000`	`#fff`	Korostusväri: aloituspainike, aaltomuotopalkit, yhdistämispiste, yhdistetyn tilan teksti. Asetetaan sisäisenä tyylinä `primaryColor`-propista.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Palkin tausta (läpikuultava; sumentuu `--tp-glass`-ominaisuudella).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Mykistyspainikkeen tausta.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Mykistyspainikkeen tausta osoitettaessa.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Palkin ja painikkeen reunat.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Reunan väri osoitettaessa.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Ensisijainen teksti (otsikko, agentin nimi).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Toissijainen teksti (alaotsikko, tilarivi, puhelun ajastin).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	Palkin lasiefektin luova `backdrop-filter`.
`--tp-shadow`	kolmikerroksinen varjopino	kolmikerroksinen varjopino	Palkin `box-shadow` (rengas + lähi- ja kaukokerrokset).
`--tp-shadow-hover`	kolmikerroksinen varjopino	kolmikerroksinen varjopino	Määritetty osoituksesta aiheutuvaa korostusta varten; ei ole tällä hetkellä käytössä missään säännössä.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Palkin varjon päälle kerrostettu sisäinen yläreunan korostus.
`--tp-connected`	`#059669`	`#34d399`	Yhdistetyn tilan ilmaisimen väri (tilapiste).
`--tp-error`	`#dc2626`	`#fb7185`	Virhetilan tilatekstin väri.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Puhelun lopetuspainikkeen tausta.
`--tp-end-color`	`#ef4444`	`#fb7185`	Puhelun lopetuspainikkeen kuvakkeen väri.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Puhelun lopetuspainikkeen reuna.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Puhelun lopetuspainikkeen tausta osoitettaessa.
`--tp-idle-opacity`	`0.4`	`0.3`	Määritetty käyttämättömän tilan himmennystä varten; ei ole tällä hetkellä käytössä missään säännössä.

Mukautettujen ominaisuuksien korvaaminen

Aseta korostusväri primaryColor-propilla:

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

--tp-accent asetetaan sisäisenä tyylinä primaryColor-propista, joten tyylitiedoston --tp-accent-korvauksilla ei ole vaikutusta. Muuta korostusväri propilla. Kaikki muut mukautetut ominaisuudet voidaan korvata CSS:ssä.

Korvaa muut mukautetut ominaisuudet CSS:llä. Käytä kahden luokan valitsinta (.tp-widget.tp--light / .tp-widget.tp--dark), jotta sääntösi on oletukset määrittävää teemaluokkaa painavampi tyylitiedostojen järjestyksestä riippumatta:

.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-luokat

Kaikilla widgetin luokilla on etuliite tp-, jotta ne eivät ole ristiriidassa nykyisten tyyliesi kanssa.

Luokka	Elementti	Kuvaus
`.tp-widget`	Juurikääre	Kiinteästi sijoitettu säilö (`position: fixed`, kulma määritetään `position`-propilla, `z-index: 9999`). Sisältää teemaluokan ja fontin perusasetukset; ei omaa visuaalista kehystä.
`.tp--light` / `.tp--dark`	Teeman muokkaajat	Käytetään `.tp-widget`-luokan yhteydessä teeman mukaan; määrittävät kaikki `--tp-*`-mukautetut ominaisuudet.
`.tp-bar`	Palkki	Itse lasimainen pillerielementti: tausta, taustan sumennus, reunus, `99px` säde, varjo. Leveys `300px`.
`.tp-meta`	Tekstilohko	Säilö kaikelle tekstille — otsikolle ja alaotsikolle lepotilassa sekä agentin nimelle ja tilalle puhelun aikana.
`.tp-name`	Ensisijainen tunniste	Näyttää `title`-propin lepotilassa ja yhdistetyn agentin nimen (varavaihtoehtona `title`) puhelun aikana.
`.tp-sub`	Alaotsikko	Lepotilassa näkyvä “Saatavilla nyt” -rivi.
`.tp-start`	Lepotilan soittonappi	Pyöreä korostusvärinen aloituspainike (42px). Käyttää taustana `--tp-accent`-arvoa.
`.tp-dot`	Yhdistämispiste	Sykkivä korostusvärinen piste, joka näkyy palkin vasemmalla puolella yhdistämisen aikana.
`.tp-wave` / `.tp-wave--idle`	Aaltomuoto	Viisipalkkinen aaltomuoto. `--idle` lisää hitaan hengitysanimaation; puhelun aikana palkit reagoivat ääneen.
`.tp-button`	Puhelunaikaiset painikkeet	Puhelunaikaisten ohjainten perustyyli (42px, pyöristetty 12px).
`.tp-button-group`	Painikerivi	Sisältää mykistys- ja lopetuspainikkeet puhelun aikana.
`.tp-button--start`	Yhdistämispainikkeen muunnelma	Korostusvärinen muunnelma, joka näytetään puhelun käynnistyessä.
`.tp-button--mute`	Mykistyksen kytkin	Mykistää tai poistaa mikrofonin mykistyksen puhelun aikana. Käyttää `--tp-surface`-arvoa.
`.tp-button--end`	Puhelun lopetuspainike	Lopettaa puhelun. Käyttää `--tp-end-*`-palettia.
`.tp-button--loading`	Latauksen muokkaaja	Himmentää painiketta yhdistämisen aikana.
`.tp-icon` / `.tp-spin`	Kuvakkeet	Painikekuvakkeiden mitoitus; `tp-spin` animoi yhdistämisen latauskuvaketta.
`.tp-status`	Puhelunaikainen tilalohko	Sisältää tilarivin yhdistämis-, yhdistetty- ja virhetiloissa.
`.tp-status__text`	Tilarivi	Yhteyden tilateksti (esim. “Yhdistetään…”) tai puhelun ajastin. Saa tilan mukaan `.tp-status--connected`-luokan (korostusväri) tai `.tp-status--error`-luokan (virheväri).
`.tp-status__name`	Agentin nimipaikka	Osa tilalohkoa, mutta sitä ei renderöidä nykyisessä palkkiasettelussa — agentin nimi näkyy sen sijaan `.tp-name`-elementissä.
`.tp-status__dot`	Tilapiste	Sykkivä yhdistetyn tilan pisteen tyyli (käyttää `--tp-connected`-arvoa).

Esimerkit

Mukautettu korostusväri propseilla

Helpoin tapa brändätä widget:

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

Mukautetut värit CSS:llä

Ohita mukautetut ominaisuudet, jotta saat värien täyden hallinnan. Muista, että korostusväri tulee primaryColor-propista, ei CSS:stä:

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

Mukautettu koko

Tee widgetistä suurempi tai pienempi säätämällä palkin, painikkeiden ja tekstin mittoja:

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

Piilota tekstiselitteet

Kaikki widgetin teksti on .tp-meta-elementissä. Piilota se kokonaan, jos haluat säilyttää vain aaltomuodon ja painikkeet:

.tp-meta {
  display: none;
}

Voit myös piilottaa yksittäisiä osia:

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

Lepotilan selite on .tp-name/.tp-sub-elementeissä, ei .tp-status-elementissä — pelkän .tp-status-elementin piilottaminen näyttää otsikon edelleen, kun widget on lepotilassa.

Teemakohtaiset ohitukset

Kohdista tiettyyn teemaan teemaluokan avulla:

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

Rajaus className-propilla

Kun käytät React-komponenttia, välitä className-proppi rajataksesi ohitukset tiettyyn widget-instanssiin:

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

Kohdista sitten kyseiseen luokkaan CSS:ssä:

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

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

Näin samalla sivulla voi olla useita eri tyylisiä widget-instansseja. Anna jokaiselle instanssille oma korostusvärinsä primaryColor-propin kautta (CSS ei voi ohittaa --tp-accent-arvoa — se asetetaan inline-tyylinä).

Täysin mukautettu käyttöliittymä

Jos CSS-ohitukset eivät riitä, headless-hook antaa sinulle täyden hallinnan. Tarjoat kaiken HTML:n ja tyylittelyn, kun taas useThunderPhone hallitsee puheistuntoa. Hook tarjoaa myös audioLevelRef-viitteen audioreaktiivisten visualisointien, kuten aaltomuotojen, rakentamiseen.

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-hook on oikea valinta, kun tarvitset audioreaktiivisia animaatioita, mukautettuja asetteluja tai integraation olemassa olevaan komponenttikirjastoon. CSS-ohitukset ja mukautetut ominaisuudet sopivat paremmin nopeisiin teeman säätöihin.

​Teemat

​CSS-mukautetut ominaisuudet

​Mukautettujen ominaisuuksien korvaaminen

​CSS-luokat

​Esimerkit

​Mukautettu korostusväri propseilla

​Mukautetut värit CSS:llä

​Mukautettu koko

​Piilota tekstiselitteet

​Teemakohtaiset ohitukset

​Rajaus className-propilla

​Täysin mukautettu käyttöliittymä

Teemat

CSS-mukautetut ominaisuudet

Mukautettujen ominaisuuksien korvaaminen

CSS-luokat

Esimerkit

Mukautettu korostusväri propseilla

Mukautetut värit CSS:llä

Mukautettu koko

Piilota tekstiselitteet

Teemakohtaiset ohitukset

Rajaus className-propilla

Täysin mukautettu käyttöliittymä