Ugradivi widget za glasovnog AI agenta

Dodajte glasovnog AI agenta na bilo koju web-stranicu s nekoliko redaka koda

Ugradivi glasovni widget ThunderPhone omogućuje posjetiteljima vaše web-stranice da razgovaraju s AI agentom izravno iz preglednika. Nije potreban telefonski poziv -- korisnici kliknu gumb i započinju glasovni razgovor u stvarnom vremenu koji pokreće ThunderPhone.

Widget se prikazuje kao staklasta traka koja se prilagođava svijetlim i tamnim temama, uz prilagodljive naglasne boje i položaj. Distribuira se kao npm paket @thunderphone/widget, a dostupan je i putem CDN-a za okruženja bez bundlera.

Preduvjeti#

Prije ugradnje widgeta dovršite ova tri koraka u nadzornoj ploči ThunderPhone:

1. Izradite web-widget

   U nadzornoj ploči otvorite Web Widgets i izradite widget. Odaberite agenta kojeg želite izložiti. Svaki widget ima vlastiti javni ključ (pk_live_...), koji je sigurno uključiti u kôd na strani klijenta; agent se određuje prema ključu.

2. Konfigurirajte dopuštene domene

   Na istom widgetu dodajte domene na koje će biti ugrađen. Zamjenski znakovi podržani su (npr. *.example.com). Popis sprječava rad widgeta kada netko kopira vaš ključ na drugu web-lokaciju; nije autentikacija jer skripta izvan preglednika može poslati bilo koje zaglavlje Origin. localhost nije automatski dopušten u produkciji: dodajte ga na popis za lokalno testiranje prema produkcijskom API-ju.

3. Odaberite nadjačavanja preglednika

   Ako vaša stranica postavlja language, voice ili context, uključite svaku opciju u odjeljku Nadjačavanja preglednika. Novi widgeti ne prihvaćaju nijednu opciju, a zahtjev za sesiju koji sadrži isključenu postavku neće uspjeti i vratit će 400 override_not_allowed. Pogledajte Nadjačavanja preglednika.

Brzi početak#

Instalirajte paket:

npm install @thunderphone/widget

Dodajte widget u svoju aplikaciju:

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

To je sve. Vaši će korisnici vidjeti staklastu traku za pozive koja ih jednim klikom povezuje s vašim AI agentom.

Prilagodba#

Widget ima četiri svojstva izgleda:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Još tri svojstva prilagođavaju sesiju, a ne izgled — sva se prosljeđuju u zahtjev za sesiju kada poziv započne. Svako funkcionira samo ako javni ključ widgeta to dopušta u odjeljku Nadjačavanja preglednika; u suprotnom zahtjev za sesiju ne uspijeva s 400 override_not_allowed:

Pogledajte referencu React komponente za potpunu tablicu svojstava.

Za potpuno prilagođeno korisničko sučelje upotrijebite hook bez sučelja za upravljanje glasovnom sesijom dok izrađujete vlastito sučelje. Hook izlaže razine zvuka u stvarnom vremenu za izradu vizualizacija koje reagiraju na zvuk.

Svaki razgovor u widgetu jest poziv. Ubraja se u ograničenje istodobnih poziva vaše organizacije (prema zadanim postavkama 20 poziva u tijeku, dijeljeno s telefonskim i drugim pozivima) te u ograničenje widgeta od 25 aktivnih sesija (ili vaše ograničenje istodobnih poziva, ako je veće). Pri bilo kojem od tih ograničenja novi razgovor ne može započeti dok poziv ne završi.

Mogućnosti integracije#

Odaberite način integracije koji odgovara vašem razvojnom okruženju:

Stiliziranje#

Widget dolazi s ugrađenim svijetlom i tamnom temom kojima upravlja prop theme te bojom naglaska kojom upravlja prop primaryColor. Za detaljniju prilagodbu možete nadjačati CSS prilagođena svojstva i klase. Pojedinosti potražite u vodiču za stiliziranje.