Widget vocal integrabil

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.

ThunderPhone widget in light and dark themes with various accent colors

Cerințe preliminare

Înainte de a integra widgetul, parcurgeți acești trei pași în Panoul ThunderPhone:

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.

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).

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.

Cheile publicabile (pk_live_...) nu sunt identice cu tokenurile API secrete. Cheile publicabile sunt concepute pentru utilizare în partea clientului și sunt limitate la sesiunile widgetului de pe domeniile dumneavoastră permise. Nu utilizați niciodată tokenul API secret în codul din partea clientului.

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:

Proprietate	Valoare implicită	Descriere
`theme`	`'light'`	`'light'` pentru sticlă albă, `'dark'` pentru sticlă întunecată
`primaryColor`	`'#000000'` (deschis) / `'#ffffff'` (întunecat)	Culoare de accent pentru butonul de pornire, forma de undă și indicatorul de conectare
`title`	`'Voice assistant'`	Textul afișat în widget
`position`	`'bottom-right'`	Colțul ferestrei de afișare: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<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:

Proprietate	Descriere
`language`	Suprascrierea limbii pentru fiecare sesiune — un cod sau o configurație regională precum `en`, `es` sau `fr-FR`
`voice`	Suprascrierea vocii pentru fiecare sesiune — un nume de voce precum `maria`
`context`	Context factual despre pagină sau site transmis agentului (trunchiat pe server la 12.000 de caractere)

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ă:

Componentă React

Componentă UI preconfigurată, cu controale de apel și afișare a stării integrate. Importați, transmiteți props, gata.

Hook headless

Control complet asupra interfeței UI. Hook-ul useThunderPhone gestionează sesiunea vocală, în timp ce dumneavoastră construiți propria interfață.

CDN / etichetă script

Nu este necesar un bundler. Încărcați widgetul printr-o etichetă script pentru site-uri statice, WordPress și alte medii non-React.

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.

Aveți nevoie de ajutor? Contactați-ne la support@thunderphone.com

​Cerințe preliminare

​Pornire rapidă

​Personalizare

​Opțiuni de integrare

Componentă React

Hook headless

CDN / etichetă script

​Stilizare

Cerințe preliminare

Pornire rapidă

Personalizare

Opțiuni de integrare

Stilizare