Vzhľad

Widget sa vykresľuje ako glassmorfická lišta so vstavanými svetlými a tmavými témami. Prispôsobenie je dostupné na troch úrovniach: props pre bežné možnosti, vlastné vlastnosti CSS pre témy a prepísania tried CSS pre úplné ovládanie.

Témy

Prop theme riadi farebnú schému widgetu. Na koreň widgetu použije triedu tp--light alebo tp--dark:

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

Obe témy používajú dizajn glassmorfickej lišty s rozmazaním pozadia a jemnou priehľadnosťou.

Vlastné vlastnosti CSS

Widget poskytuje vlastné vlastnosti CSS (premenné), ktoré môžete prepísať na zmenu farieb bez zásahu do jednotlivých tried. Definuje ich trieda témy (.tp--light alebo .tp--dark) použitá na koreňovom prvku .tp-widget:

Prepísanie vlastných vlastností

Nastavte farbu zvýraznenia pomocou parametra primaryColor:

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

Ostatné vlastné vlastnosti prepíšte pomocou CSS. Použite selektor s dvoma triedami (.tp-widget.tp--light / .tp-widget.tp--dark), aby malo vaše pravidlo vyššiu prioritu než trieda témy, ktorá definuje predvolené hodnoty, bez ohľadu na poradie štýlov:

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

Triedy CSS

Všetky triedy widgetu majú predponu tp-, aby sa predišlo konfliktom s vašimi existujúcimi štýlmi.

Príklady

Vlastná farba akcentu cez props

Najjednoduchší spôsob, ako prispôsobiť widget vašej značke:

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

Vlastné farby cez CSS

Prepíšte vlastné vlastnosti a získajte úplnú kontrolu nad farbami. Nezabudnite, že akcent sa nastavuje pomocou props primaryColor, nie cez 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);
}

Vlastná veľkosť

Zväčšite alebo zmenšite widget úpravou rozmerov panela, tlačidiel a textu:

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

Skrytie textových štítkov

Všetok text widgetu sa nachádza v .tp-meta. Ak chcete ponechať iba priebeh zvuku a tlačidlá, úplne ho skryte:

.tp-meta {
  display: none;
}

Môžete tiež skryť jednotlivé časti:

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

Prepísania pre konkrétnu tému

Konkrétnu tému zacielite pomocou jej triedy:

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

Obmedzenie rozsahu pomocou className

Pri používaní komponentu React odovzdajte props className, aby ste obmedzili prepísania na konkrétnu inštanciu widgetu:

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

Potom túto triedu zacielite v CSS:

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

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

Vďaka tomu môžete mať na rovnakej stránke viacero inštancií widgetu s rôznymi štýlmi. Každej inštancii nastavte vlastný akcent pomocou props primaryColor (CSS nemôže prepísať --tp-accent -- nastavuje sa priamo v riadku).

Úplne vlastné používateľské rozhranie

Ak prepísania CSS nestačia, headless hook vám poskytne úplnú kontrolu. Dodáte všetko HTML a štýly, zatiaľ čo useThunderPhone spracuje hlasovú reláciu. Hook poskytuje aj audioLevelRef na vytváranie vizualizácií reagujúcich na zvuk, napríklad priebehov zvuku.

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