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#

Переопределите пользовательские свойства для полного контроля над цветами. Помните, что акцентный цвет задаётся свойством 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 — он задаётся встроенно).

Полностью пользовательский интерфейс#

Если переопределений CSS недостаточно, headless-хук предоставляет полный контроль. Вы предоставляете весь HTML и стили, а useThunderPhone управляет голосовой сессией. Хук также предоставляет 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>
  )
}