Widget vocal integrabil

Adăugați un agent vocal AI pe orice site web cu câteva linii de cod

Widgetul vocal integrabil ThunderPhone le permite vizitatorilor site-ului dumneavoastră să vorbească direct din browser cu un agent vocal AI. Nu este necesar niciun apel telefonic -- utilizatorii fac clic pe un buton și încep o conversație vocală în timp real, susținută de ThunderPhone.

Widgetul este afișat ca o bară cu aspect de sticlă, care se adaptează la temele deschise și întunecate, cu culori de accent și poziționare personalizabile. Este distribuit ca pachetul npm @thunderphone/widget și este disponibil și prin CDN pentru medii fără bundler.

Cerințe preliminare#

Înainte de a integra widgetul, parcurgeți acești trei pași în Panoul ThunderPhone:

1. Creați un widget web

   Accesați Widgeturi web în tabloul de bord și creați un widget. Selectați agentul pe care doriți să îl expuneți. Fiecare widget are propria cheie publicabilă (pk_live_...), care poate fi inclusă în siguranță în codul de client; agentul este determinat din cheie.

2. Configurați domeniile permise

   În același widget, adăugați domeniile unde va fi încorporat. Sunt acceptate caracterele wildcard (de exemplu, *.example.com). Lista împiedică funcționarea widgetului atunci când cineva vă copiază cheia pe alt site; nu reprezintă autentificare, deoarece un script din afara unui browser poate trimite orice antet Origin. localhost nu este permis automat în producție: adăugați-l în listă pentru a testa local cu API-ul de producție.

3. Alegeți suprascrierile din browser

   Dacă pagina dumneavoastră setează language, voice sau context, activați fiecare opțiune în Suprascrieri din browser. Widgeturile noi nu acceptă nicio suprascriere, iar o solicitare de sesiune care include o setare dezactivată eșuează cu 400 override_not_allowed. Consultați Suprascrieri din browser.

Pornire rapidă#

Instalați pachetul:

npm install @thunderphone/widget

Adăugați widgetul în aplicația dumneavoastră:

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

Atât. Utilizatorii dumneavoastră vor vedea o bară de apel cu aspect de sticlă, care îi conectează la agentul vocal AI cu un singur clic.

Personalizare#

Widgetul are patru proprietăți de aspect:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Încă trei proprietăți personalizează sesiunea, nu aspectul — toate sunt transmise în cererea de sesiune când începe un apel. Fiecare funcționează numai dacă cheia publicabilă a widgetului o permite în Suprascrieri pentru browser; în caz contrar, cererea de sesiune eșuează cu 400 override_not_allowed:

Consultați referința componentei React pentru tabelul complet al proprietăților.

Pentru o interfață complet personalizată, utilizați hookul headless pentru a gestiona sesiunea vocală în timp ce vă construiți propria interfață. Hookul expune niveluri audio în timp real pentru crearea de vizualizări reactive la audio.

Fiecare conversație din widget este un apel. Aceasta contează pentru limita de apeluri simultane a organizației dumneavoastră (20 de apeluri în curs în mod implicit, partajate cu apelurile telefonice și alte apeluri) și pentru limita widgetului de 25 de sesiuni active (sau limita dumneavoastră de apeluri simultane, dacă este mai mare). La oricare dintre limite, o conversație nouă nu poate începe până când nu se încheie un apel.

Opțiuni de integrare#

Alegeți metoda de integrare potrivită pentru stack-ul dumneavoastră:

Stilizare#

Widgetul include teme deschise și întunecate integrate, controlate prin prop-ul theme, precum și o culoare de accent controlată prin prop-ul primaryColor. Pentru personalizare avansată, puteți suprascrie proprietățile și clasele CSS personalizate. Consultați ghidul de stilizare pentru detalii.