Widget

Estilização

Personalize a aparência do widget de voz do ThunderPhone com CSS

O widget é renderizado como uma barra glassmórfica com temas claro e escuro integrados. A personalização está disponível em três níveis: props para opções comuns, propriedades personalizadas de CSS para temas e substituições de classes CSS para controle total.

Temas#

A prop theme controla o esquema de cores do widget. Ela aplica uma classe tp--light ou tp--dark à raiz do widget:

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

Ambos os temas usam o design de barra glassmórfica com desfoque de fundo e transparência sutil.

Propriedades CSS Personalizadas#

O widget expõe propriedades CSS personalizadas (variáveis) que você pode substituir para alterar as cores sem modificar classes individuais. Elas são definidas pela classe de tema (.tp--light ou .tp--dark) aplicada à raiz .tp-widget:

Substituindo propriedades personalizadas#

Defina a cor de destaque pela prop primaryColor:

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

Substitua as outras propriedades personalizadas com CSS. Use um seletor de duas classes (.tp-widget.tp--light / .tp-widget.tp--dark) para que sua regra tenha prioridade sobre a classe de tema que define os padrões, independentemente da ordem da folha de estilos:

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

Classes CSS#

Todas as classes do widget têm o prefixo tp- para evitar conflitos com seus estilos existentes.

Exemplos#

Cor de destaque personalizada via props#

A maneira mais simples de aplicar a marca ao widget:

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

Cores personalizadas via CSS#

Substitua as propriedades personalizadas para ter controle total das cores. Lembre-se de que a cor de destaque vem da prop primaryColor, não do 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);
}

Tamanho personalizado#

Aumente ou diminua o widget ajustando as dimensões da barra, dos botões e do texto:

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

Ocultar os rótulos de texto#

Todo o texto do widget fica em .tp-meta. Oculte-o completamente para manter apenas a forma de onda e os botões:

.tp-meta {
  display: none;
}

Ou oculte partes individuais:

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

Substituições específicas por tema#

Direcione um tema específico com a classe do tema:

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

Escopo com className#

Ao usar o componente React, passe uma prop className para limitar suas substituições a uma instância específica do widget:

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

Em seguida, direcione essa classe no seu CSS:

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

Isso permite ter várias instâncias do widget na mesma página com estilos diferentes. Dê a cada instância sua própria cor de destaque por meio da prop primaryColor (o CSS não pode substituir --tp-accent -- ela é definida inline).

UI totalmente personalizada#

Se as substituições de CSS não forem suficientes, o hook headless oferece controle total. Você fornece todo o HTML e a estilização, enquanto useThunderPhone gerencia a sessão de voz. O hook também fornece audioLevelRef para criar visualizações reativas ao áudio, como formas de onda.

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