Estilos - ThunderPhone

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.

Estas opciones de estilo se aplican al widget prediseñado que renderizan el componente React ThunderPhoneWidget y el método CDN ThunderPhone.mount(). Si necesitas una interfaz completamente personalizada, usa el hook headless.

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"
/>

Tema	Clase	Descripción
`'light'`	`tp--light`	Fondo claro con texto oscuro. Predeterminado.
`'dark'`	`tp--dark`	Fondo oscuro con texto claro.

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:

Propiedad	Predeterminado (claro)	Predeterminado (oscuro)	Descripción
`--tp-accent`	`#000`	`#fff`	Color de acento: botón de inicio, barras de forma de onda, punto de conexión y texto de estado conectado. Se establece en línea desde la prop `primaryColor`.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Fondo de la barra (translúcido; difuminado por `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Fondo del botón de silenciar.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Fondo del botón de silenciar al pasar el cursor.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Bordes de la barra y los botones.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Color del borde al pasar el cursor.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Texto principal (título, nombre del agente).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Texto secundario (subtítulo, línea de estado, temporizador de llamada).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter` que crea el efecto de vidrio en la barra.
`--tp-shadow`	sombra de tres capas	sombra de tres capas	El `box-shadow` de la barra (capas de anillo + cercana + lejana).
`--tp-shadow-hover`	sombra de tres capas	sombra de tres capas	Declarada para la elevación al pasar el cursor; actualmente no la aplica ninguna regla.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Resalte superior interno superpuesto a la sombra de la barra.
`--tp-connected`	`#059669`	`#34d399`	Color del indicador de estado conectado (punto de estado).
`--tp-error`	`#dc2626`	`#fb7185`	Color del texto de estado de error.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Fondo del botón para finalizar llamada.
`--tp-end-color`	`#ef4444`	`#fb7185`	Color del ícono del botón para finalizar llamada.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Borde del botón para finalizar llamada.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Fondo del botón para finalizar llamada al pasar el cursor.
`--tp-idle-opacity`	`0.4`	`0.3`	Declarada para atenuar el estado inactivo; actualmente no la aplica ninguna regla.

Sobrescribir propiedades personalizadas

Establece el color de acento mediante la prop primaryColor:

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

--tp-accent se establece como un estilo en línea desde la prop primaryColor, por lo que las sobrescrituras de --tp-accent en la hoja de estilos no tienen efecto. Cambia el acento con la prop. Todas las demás propiedades personalizadas se pueden sobrescribir en CSS.

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.

Clase	Elemento	Descripción
`.tp-widget`	Contenedor raíz	Contenedor de posición fija (`position: fixed`, esquina definida por la prop `position`, `z-index: 9999`). Incluye la clase de tema y la configuración base de fuente; no tiene elementos visuales propios.
`.tp--light` / `.tp--dark`	Modificadores de tema	Se aplican a `.tp-widget` junto con el tema; definen todas las propiedades personalizadas `--tp-*`.
`.tp-bar`	La barra	La píldora con efecto de vidrio: fondo, desenfoque de fondo, borde, radio de `99px`, sombra. Ancho de `300px`.
`.tp-meta`	Bloque de texto	Contenedor para todo el texto: título y subtítulo en espera, nombre y estado del agente durante una llamada.
`.tp-name`	Etiqueta principal	Muestra la prop `title` en espera y el nombre del agente conectado (usa `title` como alternativa) durante una llamada.
`.tp-sub`	Subtítulo	La línea “Disponible ahora” que se muestra en espera.
`.tp-start`	Botón de llamada en espera	El botón circular de inicio con color de acento (42px). Usa `--tp-accent` como fondo.
`.tp-dot`	Punto de conexión	Punto de acento pulsante que se muestra a la izquierda de la barra mientras se conecta.
`.tp-wave` / `.tp-wave--idle`	Forma de onda	La forma de onda de cinco barras. `--idle` agrega la animación lenta de respiración; durante una llamada, las barras reaccionan al audio.
`.tp-button`	Botones durante la llamada	Estilo base para los controles durante la llamada (42px, esquinas redondeadas de 12px).
`.tp-button-group`	Fila de botones	Agrupa los botones de silenciar y finalizar durante una llamada.
`.tp-button--start`	Variante de botón de conexión	Variante con color de acento que se muestra mientras se inicia una llamada.
`.tp-button--mute`	Alternador de silenciar	Silencia o activa el micrófono durante una llamada. Usa `--tp-surface`.
`.tp-button--end`	Botón para finalizar llamada	Cuelga la llamada. Usa la paleta `--tp-end-*`.
`.tp-button--loading`	Modificador de carga	Atenúa el botón mientras se conecta.
`.tp-icon` / `.tp-spin`	Iconos	Tamaño de iconos de botones; `tp-spin` anima el indicador giratorio de conexión.
`.tp-status`	Bloque de estado durante la llamada	Agrupa la línea de estado durante los estados de conexión, conectado o error.
`.tp-status__text`	Línea de estado	Texto del estado de conexión (por ejemplo, “Conectando…”) o el temporizador de llamada. Recibe `.tp-status--connected` (color de acento) o `.tp-status--error` (color de error) según el estado.
`.tp-status__name`	Espacio para el nombre del agente	Forma parte del bloque de estado, pero no se renderiza en el diseño actual de la barra: el nombre del agente aparece en `.tp-name`.
`.tp-status__dot`	Punto de estado	Estilo de punto pulsante para el estado conectado (usa `--tp-connected`).

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

La etiqueta inactiva está en .tp-name/.tp-sub, no en .tp-status — ocultar solo .tp-status sigue mostrando el título cuando el widget está inactivo.

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

El hook sin interfaz es la opción adecuada cuando necesitas animaciones reactivas al audio, diseños personalizados o integración con una biblioteca de componentes existente. Las sobrescrituras de CSS y las propiedades personalizadas son mejores para ajustes rápidos de temas.

​Temas

​Propiedades personalizadas de CSS

​Sobrescribir propiedades personalizadas

​Clases de CSS

​Ejemplos

​Color de acento personalizado mediante props

​Colores personalizados mediante CSS

​Tamaño personalizado

​Ocultar las etiquetas de texto

​Sobrescrituras específicas del tema

​Alcance con className

​Interfaz de usuario totalmente personalizada

Temas

Propiedades personalizadas de CSS

Sobrescribir propiedades personalizadas

Clases de CSS

Ejemplos

Color de acento personalizado mediante props

Colores personalizados mediante CSS

Tamaño personalizado

Ocultar las etiquetas de texto

Sobrescrituras específicas del tema

Alcance con className

Interfaz de usuario totalmente personalizada