Widget

Stilizare

Personalizați aspectul widgetului vocal ThunderPhone cu CSS

Widgetul este redat ca o bară cu efect de sticlă, cu teme deschise și întunecate integrate. Personalizarea este disponibilă la trei niveluri: proprietăți pentru opțiuni comune, proprietăți personalizate CSS pentru teme și suprascrieri de clase CSS pentru control complet.

Teme#

Proprietatea theme controlează schema de culori a widgetului. Aceasta aplică o clasă tp--light sau tp--dark rădăcinii widgetului:

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

Ambele teme folosesc designul de bară cu efect de sticlă, cu estomparea fundalului și transparență subtilă.

Proprietăți personalizate CSS#

Widgetul expune proprietăți personalizate CSS (variabile) pe care le puteți suprascrie pentru a modifica culorile fără a modifica clase individuale. Acestea sunt definite de clasa de temă (.tp--light sau .tp--dark) aplicată rădăcinii .tp-widget:

Suprascrierea proprietăților personalizate#

Setați culoarea de accent prin proprietatea primaryColor:

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

Suprascrieți celelalte proprietăți personalizate cu CSS. Utilizați un selector cu două clase (.tp-widget.tp--light / .tp-widget.tp--dark) pentru ca regula dumneavoastră să aibă prioritate față de clasa de temă care definește valorile implicite, indiferent de ordinea foilor de stil:

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

Clase CSS#

Toate clasele widgetului au prefixul tp- pentru a evita conflictele cu stilurile dumneavoastră existente.

Exemple#

Accent personalizat prin proprietăți#

Cea mai simplă modalitate de a personaliza widgetul cu identitatea de brand:

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

Culori personalizate prin CSS#

Suprascrieți proprietățile personalizate pentru control complet asupra culorilor. Rețineți că accentul provine din proprietatea primaryColor, nu din 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);
}

Dimensiune personalizată#

Măriți sau micșorați widgetul ajustând dimensiunile barei, butoanelor și textului:

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

Ascundeți etichetele text#

Tot textul widgetului se află în .tp-meta. Ascundeți-l complet pentru a păstra doar forma de undă și butoanele:

.tp-meta {
  display: none;
}

Sau ascundeți elemente individuale:

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

Suprascrieri specifice temei#

Vizați o anumită temă folosind clasa temei:

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

Limitarea domeniului cu className#

Când utilizați componenta React, transmiteți o proprietate className pentru a limita suprascrierile la o anumită instanță de widget:

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

Apoi vizați acea clasă în CSS:

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

Astfel, puteți avea mai multe instanțe de widget pe aceeași pagină, cu stiluri diferite. Oferiți fiecărei instanțe propriul accent prin proprietatea primaryColor (CSS nu poate suprascrie --tp-accent -- acesta este setat inline).

Interfață complet personalizată#

Dacă suprascrierile CSS nu sunt suficiente, hookul headless vă oferă control complet. Furnizați tot HTML-ul și stilizarea, în timp ce useThunderPhone gestionează sesiunea vocală. Hookul oferă și audioLevelRef pentru crearea de vizualizări reactive la sunet, cum ar fi formele de undă.

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