Widget

Tyylittely

Mukauta ThunderPhone-puhewidgetin ulkoasua CSS:llä

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.

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"
/>

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

Mukautettujen ominaisuuksien korvaaminen#

Aseta korostusväri primaryColor-propilla:

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

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.

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

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