Widget

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. Hozzon létre egy közzétehető API-kulcsot

   Lépjen a vezérlőpult beállításaiban a Fejlesztők részhez, és hozzon létre egy közzétehető kulcsot. A közzétehető kulcsok pk_live_ előtaggal kezdődnek, és biztonságosan elhelyezhetők kliensoldali kódban.

2. Állítsa be az engedélyezett domaineket

   Ugyanazon Fejlesztők beállításokban adja hozzá azokat a domaineket, ahol a widgetet beágyazza. Fejlesztéshez a localhost mindig engedélyezett. Helyettesítő karakterek is támogatottak (például: *.example.com).

3. Hozzon létre egy webes widgetet

   Lépjen a vezérlőpult Webes widgetek részéhez, és hozzon létre egy widgetet. Válassza ki a közzétenni kívánt ügynököt és a használni kívánt közzétehető kulcsot. Az ügynök automatikusan feloldásra kerül a közzétehető kulcs konfigurációja alapján.

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"
/>

További három prop a megjelenés helyett a munkamenetet szabja testre -- mindegyik továbbításra kerül a munkamenet-kérelemhez a hívás indításakor:

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.

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.