Widget

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 o cheie API publicabilă

   Accesați Dezvoltatori în setările panoului și creați o cheie publicabilă. Cheile publicabile încep cu pk_live_ și pot fi incluse în siguranță în codul din partea clientului.

2. Configurați domeniile permise

   În aceleași setări pentru Dezvoltatori, adăugați domeniile în care va fi integrat widgetul. localhost este întotdeauna permis pentru dezvoltare. Sunt acceptate caracterele wildcard (de exemplu, *.example.com).

3. Creați un widget web

   Accesați Widgeturi web în panou și creați un widget. Selectați agentul pe care doriți să îl expuneți și cheia publicabilă de utilizat. Agentul este determinat automat din configurația cheii dumneavoastră publicabile.

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 cererii de sesiune atunci când începe un apel:

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.

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.