Stiliziranje

Widget se prikazuje kao staklasta traka s ugrađenim svijetlom i tamnom temom. Prilagodba je dostupna na tri razine: svojstva za uobičajene opcije, prilagođena CSS svojstva za teme i nadjačavanja CSS klasa za potpunu kontrolu.

Teme

Svojstvo theme kontrolira shemu boja widgeta. Primjenjuje klasu tp--light ili tp--dark na korijenski element widgeta:

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

Obje teme koriste dizajn staklaste trake sa zamućenjem pozadine i suptilnom prozirnošću.

Prilagođena CSS svojstva

Widget izlaže prilagođena CSS svojstva (varijable) koja možete nadjačati za promjenu boja bez mijenjanja pojedinačnih klasa. Definirana su klasom teme (.tp--light ili .tp--dark) primijenjenom na korijen .tp-widget:

Nadjačavanje prilagođenih svojstava

Postavite boju naglaska putem propa primaryColor:

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

Nadjačajte ostala prilagođena svojstva pomoću CSS-a. Upotrijebite selektor s dvjema klasama (.tp-widget.tp--light / .tp-widget.tp--dark) kako bi vaše pravilo imalo prednost nad klasom teme koja definira zadane vrijednosti, neovisno o redoslijedu tablice stilova:

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

Sve klase widgeta imaju prefiks tp- kako bi se izbjegli sukobi s vašim postojećim stilovima.

Primjeri

Prilagođena akcentna boja putem propova

Najjednostavniji način brendiranja widgeta:

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

Prilagođene boje putem CSS-a

Nadjačajte prilagođena svojstva za potpunu kontrolu nad bojama. Imajte na umu da akcentna boja dolazi iz propa primaryColor, a ne iz CSS-a:

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

Prilagođena veličina

Povećajte ili smanjite widget prilagodbom dimenzija trake, gumba i teksta:

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

Sakrijte tekstne oznake

Sav tekst widgeta nalazi se u .tp-meta. U potpunosti ga sakrijte kako bi ostali samo valni oblik i gumbi:

.tp-meta {
  display: none;
}

Ili sakrijte pojedinačne dijelove:

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

Nadjačavanja specifična za temu

Ciljajte određenu temu pomoću klase teme:

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

Ograničavanje opsega pomoću className

Kada koristite React komponentu, proslijedite prop className kako biste ograničili nadjačavanja na određenu instancu widgeta:

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

Zatim ciljajte tu klasu u CSS-u:

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

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

To vam omogućuje da na istoj stranici imate više instanci widgeta s različitim stilovima. Svakoj instanci dodijelite vlastitu akcentnu boju putem njezina propa primaryColor (CSS ne može nadjačati --tp-accent -- postavljen je ugrađeno).

Potpuno prilagođeno sučelje

Ako nadjačavanja CSS-a nisu dovoljna, headless hook pruža vam potpunu kontrolu. Vi pružate sav HTML i stiliziranje, dok useThunderPhone upravlja glasovnom sesijom. Hook također pruža audioLevelRef za izradu vizualizacija koje reagiraju na zvuk, poput valnih oblika.

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