Widget vocale incorporabile

Aggiungi un agente vocale AI a qualsiasi sito web con poche righe di codice

Il widget vocale incorporabile di ThunderPhone consente ai visitatori del tuo sito web di parlare con un agente AI direttamente dal browser. Non è necessaria alcuna telefonata: gli utenti fanno clic su un pulsante e avviano una conversazione vocale in tempo reale basata su ThunderPhone.

Il widget viene visualizzato come una barra con effetto vetro che si adatta ai temi chiari e scuri, con colori di accento e posizionamento personalizzabili. È distribuito come pacchetto npm @thunderphone/widget ed è disponibile anche tramite CDN per ambienti senza bundler.

Prerequisiti#

Prima di incorporare il widget, completa questi tre passaggi nella Dashboard ThunderPhone:

1. Crea un widget web

   Vai a Widget web nella dashboard e crea un widget. Seleziona l'agente che desideri esporre. Ogni widget dispone della propria chiave pubblicabile (pk_live_...), che può essere inclusa in sicurezza nel codice lato client; l'agente viene risolto dalla chiave.

2. Configura i domini consentiti

   Nello stesso widget, aggiungi i domini in cui verrà incorporato. Sono supportati i caratteri jolly, ad esempio *.example.com. L'elenco impedisce il funzionamento del widget quando qualcuno copia la tua chiave su un altro sito; non è un sistema di autenticazione, poiché uno script esterno a un browser può inviare qualsiasi intestazione Origin. In produzione, localhost non è consentito automaticamente: aggiungilo all'elenco per eseguire test locali con l'API di produzione.

3. Scegli le sostituzioni del browser

   Se la tua pagina imposta language, voice o context, abilita ciascuna opzione in Sostituzioni del browser. I nuovi widget non ne accettano alcuna e una richiesta di sessione che include un'impostazione disabilitata non riesce con 400 override_not_allowed. Consulta Sostituzioni del browser.

Avvio rapido#

Installa il pacchetto:

npm install @thunderphone/widget

Inserisci il widget nella tua app:

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

Fatto. I tuoi utenti vedranno una barra di chiamata con effetto vetro che li collega al tuo agente AI con un solo clic.

Personalizzazione#

Il widget dispone di quattro prop per l'aspetto:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Altre tre proprietà personalizzano la sessione anziché l'aspetto -- tutte vengono inoltrate alla richiesta di sessione quando inizia una chiamata. Ciascuna funziona solo quando la chiave pubblicabile del widget la consente in Override del browser; in caso contrario, la richiesta di sessione non riesce con 400 override_not_allowed:

Consulta il riferimento del componente React per la tabella completa delle prop.

Per un'interfaccia utente completamente personalizzata, usa l'hook headless per gestire la sessione vocale mentre crei la tua interfaccia. L'hook espone livelli audio in tempo reale per creare visualizzazioni reattive all'audio.

Ogni conversazione del widget è una chiamata. Conta ai fini del limite di chiamate simultanee della tua organizzazione (20 chiamate in corso per impostazione predefinita, condivise con le chiamate telefoniche e altre chiamate) e di un limite del widget di 25 sessioni attive (o del tuo limite di chiamate simultanee, se superiore). Raggiunto uno dei due limiti, una nuova conversazione non può iniziare finché una chiamata non termina.

Opzioni di integrazione#

Scegli il metodo di integrazione più adatto al tuo stack:

Stile#

Il widget include temi chiaro e scuro integrati, controllati dalla prop theme, e un colore di accento controllato dalla prop primaryColor. Per una personalizzazione più approfondita, puoi sovrascrivere le proprietà e le classi personalizzate CSS. Consulta la guida allo stile per i dettagli.