Skip to main content
Widgetul web le oferă vizitatorilor site-ului dumneavoastră o conversație prin clic pentru a vorbi cu un agent vocal AI, folosind microfonul browserului. Este un SDK JavaScript / React separat, cu propria referință SDK — acest ghid se concentrează pe configurarea din ThunderPhone de care are nevoie widgetul.
Puteți face toate acestea fără cURL: pagina din tabloul de bord Widgeturi web (/dashboard/web-widgets) creează widgetul, îi setează modul și agentul, gestionează domeniile permise și vă oferă fragmentul de încorporare.

​
Cerințe preliminare

1

Creați un agent

Agentul al cărui prompt și voce vor rula sesiunea widgetului. Setați widget_enabled: true (valoarea implicită).
2

Decideți modul de rutare

  • mode="agent" — un agent static pentru fiecare cheie. Cel mai simplu.
  • mode="webhook" — serverul dumneavoastră alege agentul pentru fiecare vizitator printr-un webhook web.incoming. Utilizați această opțiune pentru utilizatori autentificați, teste A/B sau rutare per pagină.
3

Listați domeniile permise

Cheile publicabile sunt blocate la origine. Trebuie să specificați fiecare nume de gazdă care va încorpora widgetul. localhost / 127.0.0.1 sunt întotdeauna permise în timpul dezvoltării locale.

​
Creați o cheie publicabilă

Răspunsul include o key care începe cu pk_live_.... Cheile publicabile sunt publice prin concepție — pot fi incluse în siguranță în pachetul front-end. Consultați referința pentru chei publicabile pentru toate câmpurile.
allowed_domains trebuie să conțină cel puțin o intrare. *.example.com corespunde subdomeniilor (de exemplu, api.example.com), dar nu domeniului principal. Caracterele wildcard simple precum * sau *.* sunt respinse.

​
Adăugați widgetul pe site-ul dumneavoastră

Trei opțiuni de integrare sunt prezentate în documentația SDK pentru widget:

Componentă React

<ThunderPhoneWidget publishableKey="pk_live_..." />.

Hook fără interfață

useThunderPhone() pentru interfețe personalizate.

Etichetă script CDN

ThunderPhone.mount({...}) pentru site-uri fără bundler.
Toate trei acceptă aceeași publishableKey și redau butonul de microfon, precum și elementul audio din apel. context al widgetului este trunchiat la 12.000 de caractere (aproximativ 3.400 de tokenuri din text englezesc obișnuit) și este luat în calcul pentru suprataxa pentru dimensiunea promptului.

​
Webhookuri în modul widget

Când mode="webhook", ThunderPhone apelează webhook_url la fiecare început de sesiune cu o sarcină utilă web.incoming. Returnați configurația agentului pe care doriți să o rulați pentru acel vizitator — aceasta urmează aceeași schemă de răspuns ca apelurile telefonice:
Puteți include în prompt context din propria sesiune (ce client navighează, pe ce pagină se află) și puteți schimba agenții pentru fiecare lansare.

​
Monitorizați sesiunile

Sesiunile widget apar în GET /v1/calls cu direction="widget" — aceeași transcriere, înregistrare, evaluare și facturare ca apelurile telefonice. Filtrați după direction pentru a crea un tablou de bord doar pentru widget.

​
Pașii următori

Referință SDK pentru widget

Detalii de integrare React / hook / CDN.

Configurație dinamică pentru fiecare apel

Implementați fluxul mode="webhook" de la un capăt la altul.

Referință pentru cheile publicabile

Fiecare câmp al resursei cheie.

API pentru sesiuni de microfon

Omiteți widgetul; controlați LiveKit direct pentru interfețe personalizate.