Widget

Estilos

Personaliza la apariencia del widget de voz de ThunderPhone con CSS

El widget se muestra como una barra con efecto vidrio, con temas claro y oscuro integrados. La personalización está disponible en tres niveles: props para opciones comunes, propiedades personalizadas de CSS para los temas y anulaciones de clases CSS para un control total.

Temas#

La prop theme controla el esquema de colores del widget. Aplica una clase tp--light o tp--dark a la raíz del widget:

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

Ambos temas usan el diseño de barra con efecto vidrio, desenfoque de fondo y transparencia sutil.

Propiedades personalizadas de CSS#

El widget expone propiedades personalizadas de CSS (variables) que puedes sobrescribir para cambiar colores sin modificar clases individuales. Se definen mediante la clase de tema (.tp--light o .tp--dark) aplicada a la raíz .tp-widget:

Sobrescribir propiedades personalizadas#

Establece el color de acento mediante la prop primaryColor:

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

Sobrescribe las demás propiedades personalizadas con CSS. Usa un selector de dos clases (.tp-widget.tp--light / .tp-widget.tp--dark) para que tu regla tenga prioridad sobre la clase de tema que define los valores predeterminados, independientemente del orden de las hojas 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);
}

Clases de CSS#

Todas las clases del widget tienen el prefijo tp- para evitar conflictos con tus estilos existentes.

Ejemplos#

Color de acento personalizado mediante props#

La forma más sencilla de aplicar tu marca al widget:

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

Colores personalizados mediante CSS#

Sobrescribe las propiedades personalizadas para tener control total sobre los colores. Recuerda que el acento proviene de la prop primaryColor, no de 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);
}

Tamaño personalizado#

Haz que el widget sea más grande o más pequeño ajustando las dimensiones de la barra, los botones y el 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 las etiquetas de texto#

Todo el texto del widget está en .tp-meta. Ocúltalo por completo para conservar solo la forma de onda y los botones:

.tp-meta {
  display: none;
}

O bien, oculta elementos individuales:

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

Sobrescrituras específicas del tema#

Aplica estilos a un tema específico mediante la clase del 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);
}

Alcance con className#

Al usar el componente React, pasa una prop className para limitar tus sobrescrituras a una instancia específica del widget:

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

Luego aplica estilos a esa clase en tu CSS:

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

Esto te permite tener varias instancias del widget en la misma página con estilos distintos. Asigna a cada instancia su propio acento mediante su prop primaryColor (CSS no puede sobrescribir --tp-accent -- se establece en línea).

Interfaz de usuario totalmente personalizada#

Si las sobrescrituras de CSS no son suficientes, el hook sin interfaz te brinda control total. Tú proporcionas todo el HTML y los estilos, mientras que useThunderPhone gestiona la sesión de voz. El hook también proporciona audioLevelRef para crear visualizaciones reactivas al audio, 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>
  )
}