Ugradivi widget za glasovnog AI agenta

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 javni API ključ

   Otvorite Razvojni alati u postavkama nadzorne ploče i izradite javni ključ. Javni ključevi počinju s pk_live_ i sigurno ih je uključiti u kod na klijentskoj strani.

2. Konfigurirajte dopuštene domene

   U istim postavkama za razvojne alate dodajte domene na kojima će widget biti ugrađen. localhost je uvijek dopušten za razvoj. Podržani su zamjenski znakovi (npr. *.example.com).

3. Izradite web-widget

   Otvorite Web-widgeti na nadzornoj ploči i izradite widget. Odaberite agenta kojeg želite izložiti i javni ključ koji želite koristiti. Agent se automatski određuje iz konfiguracije vašeg javnog ključa.

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 zahtjevu za sesiju kada poziv započne:

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.

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.