Vdeljiv glasovni pripomoček

Dodajte glasovnega agenta z umetno inteligenco na katero koli spletno mesto z nekaj vrsticami kode

Vdeljivi glasovni pripomoček ThunderPhone obiskovalcem vašega spletnega mesta omogoča, da se z agentom UI pogovarjajo neposredno iz brskalnika. Telefonski klic ni potreben -- uporabniki kliknejo gumb in začnejo glasovni pogovor v realnem času, ki ga omogoča ThunderPhone.

Pripomoček se prikaže kot steklena vrstica, ki se prilagaja svetlim in temnim temam ter omogoča prilagodljive poudarjene barve in položaj. Distribuira se kot paket npm @thunderphone/widget, za okolja brez združevalnika pa je na voljo tudi prek CDN-ja.

Predpogoji#

Pred vdelavo pripomočka v nadzorni plošči ThunderPhone dokončajte te tri korake:

1. Ustvarite spletni gradnik

   Na nadzorni plošči odprite Spletni gradniki in ustvarite gradnik. Izberite agenta, ki ga želite izpostaviti. Vsak gradnik ima svoj ključ za objavo (pk_live_...), ki ga je varno vključiti v odjemalsko kodo; agent se določi na podlagi ključa.

2. Konfigurirajte dovoljene domene

   V istem gradniku dodajte domene, na katerih bo vdelan. Nadomestni znaki so podprti (npr. *.example.com). Seznam preprečuje delovanje gradnika, če nekdo vaš ključ kopira na drugo spletno mesto; ne gre za preverjanje pristnosti, saj lahko skript zunaj brskalnika pošlje katero koli glavo Origin. localhost v produkciji ni samodejno dovoljen: dodajte ga na seznam za lokalno preskušanje s produkcijskim API-jem.

3. Izberite preglasitve brskalnika

   Če vaša stran nastavlja language, voice ali context, vsako možnost vklopite v razdelku Preglasitve brskalnika. Novi gradniki ne sprejemajo nobene možnosti, zahteva seje z izklopljeno nastavitvijo pa ne uspe z napako 400 override_not_allowed. Glejte Preglasitve brskalnika.

Hiter začetek#

Namestite paket:

npm install @thunderphone/widget

Dodajte pripomoček v svojo aplikacijo:

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 vse. Vaši uporabniki bodo videli stekleno vrstico za klic, ki jih z enim klikom poveže z vašim agentom UI.

Prilagajanje#

Pripomoček ima štiri lastnosti videza:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Tri dodatne lastnosti prilagodijo sejo namesto videza – ob začetku klica se vse posredujejo zahtevi za sejo. Vsaka deluje le, če javni ključ gradnika to dovoljuje v razdelku Preglasitve brskalnika; sicer zahteva za sejo ne uspe z 400 override_not_allowed:

Za celotno tabelo lastnosti glejte referenco komponente React.

Za popolnoma prilagojen uporabniški vmesnik uporabite headless hook za upravljanje glasovne seje, medtem ko izdelujete svoj vmesnik. Hook omogoča dostop do ravni zvoka v realnem času za izdelavo vizualizacij, odzivnih na zvok.

Vsak pogovor v gradniku je klic. Šteje se v omejitev sočasnih klicev vaše organizacije (privzeto 20 klicev v teku, skupno s telefonskimi in drugimi klici) ter omejitev gradnika na 25 aktivnih sej (ali vašo omejitev sočasnih klicev, če je ta višja). Ob dosegu katere koli omejitve novega pogovora ni mogoče začeti, dokler se klic ne konča.

Možnosti integracije#

Izberite način integracije, ki ustreza vašemu okolju:

Slog#

Gradnik vključuje vgrajeni svetlo in temno temo, ki ju nadzoruje lastnost theme, ter poudarno barvo, ki jo nadzoruje lastnost primaryColor. Za podrobnejšo prilagoditev lahko preglasite lastnosti CSS po meri in razrede. Za podrobnosti si oglejte vodnik za oblikovanje.