Widget

Tilpasning af udseende

Tilpas udseendet af ThunderPhones stemmewidget med CSS

Widgetten gengives som en glassmorfisk bjælke med indbyggede lyse og mørke temaer. Tilpasning er tilgængelig på tre niveauer: props til almindelige indstillinger, brugerdefinerede CSS-egenskaber til tematisering og CSS-klasseoverstyringer til fuld kontrol.

Temaer#

Proppen theme styrer widgettens farveskema. Den anvender en klasse, enten tp--light eller tp--dark, på widgettens rod:

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

Begge temaer bruger det glassmorfiske bjælkedesign med sløring af baggrunden og diskret gennemsigtighed.

Brugerdefinerede CSS-egenskaber#

Widgetten eksponerer brugerdefinerede CSS-egenskaber (variabler), som du kan tilsidesætte for at ændre farver uden at ændre individuelle klasser. De defineres af temaklassen (.tp--light eller .tp--dark), der anvendes på roden .tp-widget:

Tilsidesættelse af brugerdefinerede egenskaber#

Angiv fremhævningsfarven via propen primaryColor:

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

Tilsidesæt de øvrige brugerdefinerede egenskaber med CSS. Brug en selector med to klasser (.tp-widget.tp--light / .tp-widget.tp--dark), så din regel vejer tungere end temaklassen, der definerer standardværdierne, uanset rækkefølgen i stylesheets:

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

Alle widgetklasser er præfikset med tp- for at undgå konflikter med dine eksisterende typografier.

Eksempler#

Tilpasset accent via props#

Den nemmeste måde at tilpasse widgetten til dit brand:

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

Tilpassede farver via CSS#

Overskriv de brugerdefinerede egenskaber for fuld kontrol over farverne. Husk, at accentfarven kommer fra proppen primaryColor, ikke 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);
}

Tilpasset størrelse#

Gør widgetten større eller mindre ved at justere dimensionerne for bjælken, knapperne og teksten:

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

Skjul tekstetiketterne#

Al widgettens tekst findes i .tp-meta. Skjul den helt for kun at beholde bølgeformen og knapperne:

.tp-meta {
  display: none;
}

Eller skjul enkelte dele:

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

Tema-specifikke overskrivninger#

Vælg et bestemt tema med temaklassen:

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

Afgrænsning med className#

Når du bruger React-komponenten, skal du angive en className-prop for at afgrænse dine overskrivninger til en bestemt widgetinstans:

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

Målret derefter denne klasse i din CSS:

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

Det gør det muligt at have flere widgetinstanser på samme side med forskellige stilarter. Giv hver instans sin egen accentfarve via dens primaryColor-prop (CSS kan ikke overskrive --tp-accent -- den angives inline).

Fuldt tilpasset brugergrænseflade#

Hvis CSS-overskrivninger ikke er nok, giver den headless hook dig fuld kontrol. Du leverer al HTML og styling, mens useThunderPhone håndterer stemmesessionen. Hooken giver også audioLevelRef til at bygge lydreaktive visualiseringer som bølgeformer.

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