Widget

Widget de voz integrable

Agrega un agente de voz con IA a cualquier sitio web con unas pocas líneas de código

El widget de voz integrable de ThunderPhone permite que quienes visitan tu sitio web hablen con un agente de IA directamente desde el navegador. No se requiere una llamada telefónica: los usuarios hacen clic en un botón e inician una conversación de voz en tiempo real impulsada por ThunderPhone.

El widget se muestra como una barra de cristal esmerilado que se adapta a temas claros y oscuros, con colores de acento y posicionamiento personalizables. Se distribuye como el paquete npm @thunderphone/widget y también está disponible mediante CDN para entornos sin empaquetador.

Requisitos previos#

Antes de integrar el widget, completa estos tres pasos en el Panel de ThunderPhone:

1. Crea una clave de API publicable

   Ve a Desarrolladores en la configuración del panel y crea una clave publicable. Las claves publicables comienzan con pk_live_ y es seguro incluirlas en código del lado del cliente.

2. Configura los dominios permitidos

   En la misma configuración de Desarrolladores, agrega los dominios donde se integrará el widget. localhost siempre está permitido para desarrollo. Se admiten comodines (por ejemplo, *.example.com).

3. Crea un widget web

   Ve a Widgets web en el panel y crea un widget. Selecciona el agente que quieres exponer y la clave publicable que quieres usar. El agente se resuelve automáticamente a partir de la configuración de tu clave publicable.

Inicio rápido#

Instala el paquete:

npm install @thunderphone/widget

Agrega el widget a tu aplicación:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

Eso es todo. Tus usuarios verán una barra de llamada de cristal esmerilado que los conecta con tu agente de IA con un solo clic.

Personalización#

El widget tiene cuatro props de apariencia:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Otras tres props personalizan la sesión en lugar de la apariencia; todas se reenvían a la solicitud de sesión cuando inicia una llamada:

Consulta la referencia del componente React para ver la tabla completa de props.

Para una interfaz de usuario completamente personalizada, usa el hook sin interfaz para administrar la sesión de voz mientras creas tu propia interfaz. El hook expone niveles de audio en tiempo real para crear visualizaciones que reaccionan al audio.

Opciones de integración#

Elige el método de integración que se adapte a tu plataforma:

Estilos#

El widget incluye temas claros y oscuros integrados controlados por la prop theme, y un color de acento controlado por la prop primaryColor. Para una personalización más profunda, puedes sobrescribir propiedades y clases personalizadas de CSS. Consulta la guía de estilos para obtener más detalles.