Widget

Стилізація

Налаштуйте вигляд голосового віджета ThunderPhone за допомогою CSS

Віджет відображається як скляна панель із вбудованими світлою та темною темами. Налаштування доступне на трьох рівнях: пропси для поширених параметрів, користувацькі властивості CSS для темізації та перевизначення класів CSS для повного контролю.

Теми#

Пропс 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-, щоб уникнути конфліктів із вашими наявними стилями.

Приклади#

Власний акцент через props#

Найпростіший спосіб брендувати віджет:

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

Власні кольори через CSS#

Перевизначте користувацькі властивості для повного контролю над кольорами. Пам’ятайте, що акцент задається через prop 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-компонента передайте prop 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;
}

Це дає змогу мати кілька екземплярів віджета на одній сторінці з різними стилями. Надайте кожному екземпляру власний акцент через prop primaryColor (CSS не може перевизначити --tp-accent -- його задано inline).

Повністю власний UI#

Якщо перевизначень 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>
  )
}