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 un widget web

   Ve a Widgets web en el panel y crea un widget. Selecciona el agente que quieres poner a disposición. Cada widget tiene su propia clave publicable (pk_live_...), que es segura para incluir en código del lado del cliente; el agente se determina a partir de la clave.

2. Configura los dominios permitidos

   En el mismo widget, agrega los dominios donde se incorporará. Se admiten comodines (por ejemplo, *.example.com). La lista evita que el widget funcione si alguien copia tu clave en otro sitio; no es autenticación, ya que un script fuera de un navegador puede enviar cualquier encabezado Origin. localhost no se permite automáticamente en producción: agrégalo a la lista para realizar pruebas locales con la API de producción.

3. Elige las sobrescrituras del navegador

   Si tu página establece language, voice o context, activa cada una en Sobrescrituras del navegador. Los widgets nuevos no aceptan ninguna, y una solicitud de sesión que incluya una configuración desactivada falla con 400 override_not_allowed. Consulta Sobrescrituras del navegador.

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 propiedades personalizan la sesión en lugar de la apariencia -- todas se envían a la solicitud de sesión cuando inicia una llamada. Cada una funciona solo cuando la clave publicable del widget lo permite en Anulaciones del navegador; de lo contrario, la solicitud de sesión falla con 400 override_not_allowed:

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.

Cada conversación del widget es una llamada. Cuenta para el límite de llamadas simultáneas de tu organización (20 llamadas en curso de forma predeterminada, compartidas con llamadas telefónicas y de otros tipos) y para un límite del widget de 25 sesiones activas (o tu límite de llamadas simultáneas, si es mayor). Al alcanzar cualquiera de los dos límites, no se puede iniciar una nueva conversación hasta que termine una llamada.

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.