Стилизация

Уиджетът се визуализира като стъкломорфна лента с вградени светла и тъмна тема. Персонализирането е достъпно на три нива: props за често срещани опции, персонализирани CSS свойства за теми и заместване на CSS класове за пълен контрол.

Теми

Prop-ът theme управлява цветовата схема на уиджета. Той прилага клас tp--light или tp--dark към корена на уиджета:

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

И двете теми използват дизайн на стъкломорфна лента със замъгляване на фона и деликатна прозрачност.

Персонализирани CSS свойства

Уиджетът предоставя персонализирани CSS свойства (променливи), които можете да презапишете, за да промените цветовете, без да променяте отделни класове. Те се дефинират от класа на темата (.tp--light или .tp--dark), приложен към корена .tp-widget:

Презаписване на персонализирани свойства

Задайте акцентния цвят чрез пропа primaryColor:

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

Презапишете останалите персонализирани свойства с CSS. Използвайте селектор с два класа (.tp-widget.tp--light / .tp-widget.tp--dark), така че вашето правило да има предимство пред класа на темата, който дефинира стойностите по подразбиране, независимо от реда в стиловата таблица:

.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 класове

Всички класове на уиджета са с префикс tp-, за да се избегнат конфликти със съществуващите ви стилове.

Примери

Персонализиран акцент чрез пропсове

Най-лесният начин да брандирате уиджета:

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

Персонализирани цветове чрез CSS

Заменете персонализираните свойства за пълен контрол върху цветовете. Имайте предвид, че акцентът идва от пропса primaryColor, а не от 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);
}

Персонализиран размер

Направете уиджета по-голям или по-малък, като коригирате размерите на лентата, бутоните и текста:

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

Скриване на текстовите етикети

Целият текст на уиджета се намира в .tp-meta. Скрийте го изцяло, за да запазите само формата на вълната и бутоните:

.tp-meta {
  display: none;
}

Или скрийте отделни части:

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

Замени за конкретна тема

Насочете се към конкретна тема чрез класа на темата:

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

Обхват чрез className

Когато използвате React компонента, подайте пропс className, за да ограничите замените си до конкретен екземпляр на уиджета:

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

След това насочете този клас във вашия CSS:

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

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

Това ви позволява да имате няколко екземпляра на уиджета на една и съща страница с различни стилове. Задайте на всеки екземпляр собствен акцент чрез неговия пропс primaryColor (CSS не може да замени --tp-accent -- той се задава вградeно).

Напълно персонализиран интерфейс

Ако CSS замените не са достатъчни, headless hook ви дава пълен контрол. Вие предоставяте целия HTML и стилизиране, докато useThunderPhone управлява гласовата сесия. Hook-ът предоставя и audioLevelRef за изграждане на аудиореактивни визуализации, като форми на вълната.

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