Beágyazható hangalapú widget

Adjon hozzá hangalapú AI-ügynököt bármely webhelyhez néhány sor kóddal

A ThunderPhone beágyazható hangwidgetje lehetővé teszi, hogy webhelye látogatói közvetlenül a böngészőből beszéljenek egy AI-ügynökkel. Nincs szükség telefonhívásra -- a felhasználók egy gombra kattintanak, és valós idejű, ThunderPhone által működtetett hangbeszélgetést indítanak.

A widget üvegszerű sávként jelenik meg, amely alkalmazkodik a világos és sötét témákhoz, testreszabható kiemelőszínekkel és pozicionálással. Az @thunderphone/widget npm-csomagként érhető el, valamint CDN-en keresztül is használható nem bundlert használó környezetekben.

Előfeltételek#

A widget beágyazása előtt végezze el ezt a három lépést a ThunderPhone Dashboardban:

1. Webes widget létrehozása

   Az irányítópulton lépjen a Webes widgetek menübe, és hozzon létre egy widgetet. Válassza ki a közzétenni kívánt ügynököt. Minden widget saját közzétehető kulccsal (pk_live_...) rendelkezik, amely biztonságosan szerepeltethető kliensoldali kódban; az ügynök a kulcs alapján kerül meghatározásra.

2. Engedélyezett domainek konfigurálása

   Ugyanazon a widgeten adja hozzá azokat a domaineket, ahol be lesz ágyazva. Helyettesítő karakterek is támogatottak (például: *.example.com). A lista megakadályozza, hogy a widget működjön, ha valaki átmásolja a kulcsát egy másik webhelyre; ez nem hitelesítés, mivel egy böngészőn kívüli szkript bármilyen Origin fejlécet küldhet. A localhost éles környezetben nincs automatikusan engedélyezve: adja hozzá a listához, hogy helyileg tesztelhessen az éles API-val.

3. Böngészőbeli felülbírálások kiválasztása

   Ha oldala beállítja a language, voice vagy context értékét, kapcsolja be mindegyiket a Böngészőbeli felülbírálások alatt. Az új widgetek egyiket sem fogadják el, és a kikapcsolt beállítást tartalmazó munkamenet-kérelem 400 override_not_allowed hibával meghiúsul. Lásd: Böngészőbeli felülbírálások.

Gyors kezdés#

Telepítse a csomagot:

npm install @thunderphone/widget

Illessze be a widgetet az alkalmazásába:

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

Ennyi az egész. Felhasználói egy üvegszerű hívássávot látnak, amely egyetlen kattintással összeköti őket az AI-ügynökével.

Testreszabás#

A widget négy megjelenési proppal rendelkezik:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Három további prop a munkamenetet szabja testre, nem a megjelenést -- hívás indításakor mindegyik továbbításra kerül a munkamenet-kérelemhez. Mindegyik csak akkor működik, ha a widget publikálható kulcsa ezt engedélyezi a Böngésző-felülbírálások alatt; ellenkező esetben a munkamenet-kérelem 400 override_not_allowed hibával meghiúsul:

A teljes proptáblázatért tekintse meg a React-komponens referenciáját.

Teljesen egyedi felülethez használja a headless hookot a hangmunkamenet kezeléséhez, miközben saját felületet épít. A hook valós idejű hangszinteket biztosít hangra reagáló vizualizációk készítéséhez.

Minden widgetes beszélgetés egy hívás. Ez beleszámít a szervezet egyidejű hívásokra vonatkozó korlátjába (alapértelmezés szerint 20 folyamatban lévő hívás, amely a telefonos és más hívásokkal közös), valamint a widget 25 aktív munkamenetre vonatkozó korlátjába (vagy az egyidejű hívások korlátjába, ha az magasabb). Bármelyik korlát elérésekor új beszélgetés csak egy hívás befejezése után indítható.

Integrációs lehetőségek#

Válassza ki a technológiai környezetéhez illő integrációs módszert:

Stílus#

A widget beépített világos és sötét témákat tartalmaz, amelyeket a theme prop vezérel, valamint egy kiemelőszínt, amelyet a primaryColor prop szabályoz. Mélyebb testreszabáshoz felülírhatja a CSS egyéni tulajdonságait és osztályait. Részletekért tekintse meg a stílusútmutatót.