Widget

Stilizēšana

Pielāgojiet ThunderPhone balss logrīka izskatu, izmantojot CSS

Logrīks tiek renderēts kā stikla efekta josla ar iebūvētām gaišo un tumšo motīvu versijām. Pielāgošana ir pieejama trīs līmeņos: rekvizīti bieži lietotām opcijām, CSS pielāgotās īpašības motīvu veidošanai un CSS klašu pārrakstīšana pilnīgai kontrolei.

Motīvi#

Rekvizīts theme nosaka logrīka krāsu shēmu. Tas logrīka saknes elementam piešķir klasi tp--light vai tp--dark:

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

Abi motīvi izmanto stikla efekta joslas dizainu ar fona izpludināšanu un smalku caurspīdīgumu.

CSS pielāgotie rekvizīti#

Logrīks nodrošina CSS pielāgotos rekvizītus (mainīgos), kurus varat pārrakstīt, lai mainītu krāsas, nemainot atsevišķas klases. Tos nosaka motīva klase (.tp--light vai .tp--dark), kas tiek lietota .tp-widget saknes elementam:

Pielāgoto rekvizītu pārrakstīšana#

Iestatiet akcenta krāsu, izmantojot primaryColor rekvizītu:

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

Pārrakstiet pārējos pielāgotos rekvizītus ar CSS. Izmantojiet divu klašu selektoru (.tp-widget.tp--light / .tp-widget.tp--dark), lai jūsu noteikumam būtu augstāka prioritāte nekā motīva klasei, kas nosaka noklusējuma vērtības, neatkarīgi no stila lapu secības:

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

Visām logrīka klasēm ir prefikss tp-, lai izvairītos no konfliktiem ar jūsu esošajiem stiliem.

Piemēri#

Pielāgots akcents, izmantojot props#

Vienkāršākais veids, kā pielāgot logrīku savam zīmolam:

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

Pielāgotas krāsas, izmantojot CSS#

Pārrakstiet pielāgotās īpašības, lai pilnībā kontrolētu krāsas. Ņemiet vērā, ka akcents tiek noteikts ar primaryColor prop, nevis 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);
}

Pielāgots izmērs#

Palieliniet vai samaziniet logrīku, pielāgojot joslas, pogu un teksta izmērus:

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

Paslēpt teksta etiķetes#

Viss logrīka teksts atrodas .tp-meta. Paslēpiet to pilnībā, lai atstātu tikai viļņu formu un pogas:

.tp-meta {
  display: none;
}

Vai paslēpiet atsevišķus elementus:

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

Konkrētai tēmai paredzētas pārrakstīšanas#

Atlasiet konkrētu tēmu, izmantojot tēmas klasi:

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

Tvēruma noteikšana ar className#

Izmantojot React komponentu, nododiet className prop, lai attiecinātu pārrakstīšanas uz konkrētu logrīka instanci:

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

Pēc tam atlasiet šo klasi savā CSS:

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

Tas ļauj vienā lapā izmantot vairākas logrīka instances ar dažādiem stiliem. Piešķiriet katrai instancei savu akcentu, izmantojot tās primaryColor prop (CSS nevar pārrakstīt --tp-accent — tas tiek iestatīts rindā).

Pilnībā pielāgota lietotāja saskarne#

Ja ar CSS pārrakstīšanām nepietiek, headless hook sniedz jums pilnīgu kontroli. Jūs nodrošināt visu HTML un noformējumu, kamēr useThunderPhone pārvalda balss sesiju. Hook nodrošina arī audioLevelRef, lai veidotu uz audio reaģējošas vizualizācijas, piemēram, viļņu formas.

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