Beágyazható hangalapú widget

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.

ThunderPhone widget világos és sötét témákban, különböző kiemelőszínekkel

Előfeltételek

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

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.

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

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.

A közzétehető kulcsok (pk_live_...) nem azonosak a titkos API-tokenjeivel. A közzétehető kulcsok kliensoldali használatra készültek, és az engedélyezett domaineken futó widgetmunkamenetekre vannak korlátozva. Soha ne használja a titkos API-tokenjét kliensoldali kódban.

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:

Prop	Alapértelmezett	Leírás
`theme`	`'light'`	`'light'` fehér üveghez, `'dark'` sötét üveghez
`primaryColor`	`'#000000'` (világos) / `'#ffffff'` (sötét)	Kiemelőszín az indítógombhoz, a hullámformához és a kapcsolódási jelzőhöz
`title`	`'Voice assistant'`	A widgetben megjelenített szöveg
`position`	`'bottom-right'`	A nézetablak sarka: `'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"
/>

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:

Prop	Leírás
`language`	Munkamenetenkénti nyelvi felülbírálás — például `en`, `es` vagy `fr-FR` kód vagy területi beállítás
`voice`	Munkamenetenkénti hangfelülbírálás — például `maria` hangnév
`context`	Az ügynöknek átadott tényszerű oldal- vagy webhelykontextus (a szerveroldalon 12 000 karakterre csonkítva)

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:

React-komponens

Előre elkészített felhasználói felületi komponens beépített hívásvezérlőkkel és állapotkijelzéssel. Importálja, adja át a propokat, és kész.

Headless hook

Teljes kontroll a felhasználói felület felett. A useThunderPhone hook kezeli a hangmunkamenetet, miközben Ön saját felületet épít.

CDN / Script tag

Nincs szükség bundlerre. Töltse be a widgetet script taggel statikus webhelyekhez, WordPresshez és más, nem React-alapú környezetekhez.

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.

Segítségre van szüksége? Lépjen kapcsolatba velünk a support@thunderphone.com címen.

​Előfeltételek

​Gyors kezdés

​Testreszabás

​Integrációs lehetőségek

React-komponens

Headless hook

CDN / Script tag

​Stílus

Előfeltételek

Gyors kezdés

Testreszabás

Integrációs lehetőségek

Stílus