Skip to main content
Web-widget tarjoaa sivustosi kävijöille klikkaa ja puhu -keskustelun tekoälyagentin kanssa selaimen mikrofonia käyttäen. Se on erillinen JavaScript- / React SDK, jolla on oma SDK-viite — tämä opas keskittyy widgetin tarvitsemiin ThunderPhone-puolen asetuksiin.
Voit tehdä kaiken tämän ilman cURL:ia: hallintapaneelin Web-widgetit-sivu (/dashboard/web-widgets) luo widgetin, määrittää sen tilan ja agentin, hallitsee sallittuja verkkotunnuksia ja antaa sinulle upotuskoodin.

​
Vaatimukset

1

Luo agentti

Agentti, jonka kehote ja ääni suorittavat widget-istunnon. Määritä widget_enabled: true (oletusarvo).
2

Valitse reititystapa

  • mode="agent" — yksi staattinen agentti avainta kohden. Yksinkertaisin vaihtoehto.
  • mode="webhook" — palvelimesi valitsee agentin kävijäkohtaisesti web.incoming-webhookin kautta. Käytä tätä kirjautuneille käyttäjille, A/B-testeihin tai sivukohtaiseen reititykseen.
3

Luettele sallitut verkkotunnukset

Julkaistavat avaimet on sidottu alkuperään. Sinun on nimettävä jokainen isäntänimi, johon widget upotetaan. localhost / 127.0.0.1 ovat aina sallittuja paikallisen kehityksen aikana.

​
Luo julkaistava avain

Vastaus sisältää key-arvon, joka alkaa merkkijonolla pk_live_.... Julkaistavat avaimet ovat tarkoituksella julkisia — ne on turvallista sisällyttää käyttöliittymäpakettiisi. Katso kaikki kentät julkaistavien avainten viitteestä.
allowed_domains-kentässä on oltava vähintään yksi merkintä. *.example.com vastaa aliverkkotunnuksia (esim. api.example.com), mutta ei pelkkää verkkotunnusta. Paljaat jokerimerkit, kuten * tai *.*, hylätään.

​
Lisää widget sivustollesi

Kolme integrointivaihtoehtoa käsitellään widgetin SDK-dokumentaatiossa:

React-komponentti

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

Headless-hook

useThunderPhone() mukautettuja käyttöliittymiä varten.

CDN-skriptitagi

ThunderPhone.mount({...}) sivustoille ilman paketoijaa.
Kaikki kolme hyväksyvät saman publishableKey-arvon ja renderöivät mikrofonipainikkeen sekä puhelun aikaisen äänielementin. Widgetin context katkaistaan 12 000 merkkiin (noin 3 400 tokenia tyypillisessä englanninkielisessä tekstissä), ja se otetaan huomioon kehotekoon lisämaksussa.

​
Widget-tilan webhookit

Kun mode="webhook", ThunderPhone kutsuu webhook_url-osoitettasi jokaisen istunnon alkaessa web.incoming-payloadilla. Palauta agenttimääritys, jota haluat käyttää kyseiselle kävijälle — se noudattaa samaa vastausskeemaa kuin puhelut:
Voit lisätä kehotteeseen oman istuntosi kontekstia (mitä asiakasta käyttäjä selaa, millä sivulla hän on) ja vaihtaa agentteja käyttöönoton mukaan.

​
Tarkastele istuntoja

Widget-istunnot näkyvät kohteessa GET /v1/calls arvolla direction="widget" — niissä ovat samat litteroinnit, tallenteet, arvioinnit ja laskutus kuin puheluissa. Suodata direction-kentän mukaan rakentaaksesi vain widgetejä koskevan hallintapaneelin.

​
Seuraavat vaiheet

Widget SDK -viite

React-, hook- ja CDN-integraation tiedot.

Dynaaminen puhelukohtainen määritys

Toteuta mode="webhook"-työnkulku alusta loppuun.

Julkaistavien avainten viite

Kaikki avainresurssin kentät.

Mikrofonistuntojen API

Ohita widget; ohjaa LiveKit-palvelua suoraan mukautettuja käyttöliittymiä varten.