Inbäddningsbar röstwidget

Lägg till en AI-röstagent på valfri webbplats med några rader kod

ThunderPhones inbäddningsbara röstwidget låter besökarna på din webbplats prata med en röstagent direkt i webbläsaren. Inget telefonsamtal krävs -- användarna klickar på en knapp och startar en röstkonversation i realtid med ThunderPhone.

Widgeten visas som ett glasliknande fält som anpassar sig till ljusa och mörka teman, med anpassningsbara accentfärger och positionering. Den distribueras som npm-paketet @thunderphone/widget och finns även tillgänglig via CDN för miljöer utan bundlare.

Förutsättningar#

Slutför dessa tre steg i ThunderPhone Dashboard innan du bäddar in widgeten:

1. Skapa en webbwidget

   Gå till Webbwidgetar i dashboarden och skapa en widget. Välj röstagenten du vill göra tillgänglig. Varje widget har en egen publicerbar nyckel (pk_live_...), som är säker att inkludera i kod på klientsidan; röstagenten fastställs utifrån nyckeln.

2. Konfigurera tillåtna domäner

   Lägg till de domäner där widgeten ska bäddas in på samma widget. Jokertecken stöds (t.ex. *.example.com). Listan hindrar widgeten från att fungera om någon kopierar din nyckel till en annan webbplats; den är inte autentisering, eftersom ett skript utanför en webbläsare kan skicka valfritt Origin-huvud. localhost tillåts inte automatiskt i produktion: lägg till den i listan för att testa lokalt mot produktions-API:t.

3. Välj åsidosättningar i webbläsaren

   Om din sida anger language, voice eller context aktiverar du var och en under Åsidosättningar i webbläsaren. Nya widgetar tillåter inga, och en sessionsbegäran som innehåller en inställning som är avstängd misslyckas med 400 override_not_allowed. Se Åsidosättningar i webbläsaren.

Snabbstart#

Installera paketet:

npm install @thunderphone/widget

Lägg till widgeten i din app:

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

Klart. Dina användare ser ett glasliknande samtalsfält som ansluter dem till din röstagent med ett enda klick.

Anpassning#

Widgeten har fyra props för utseendet:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Ytterligare tre parametrar anpassar sessionen snarare än utseendet -- alla vidarebefordras till sessionsbegäran när ett samtal startar. Var och en fungerar endast när widgetens publicerbara nyckel tillåter den under Webbläsaråsidosättningar; annars misslyckas sessionsbegäran med 400 override_not_allowed:

Se referensen för React-komponenten för den fullständiga propstabellen.

Använd headless-hooken för att hantera röstsessionen medan du bygger ett eget gränssnitt om du vill ha ett helt anpassat UI. Hooken exponerar ljudnivåer i realtid för att bygga ljudreaktiva visualiseringar.

Varje widgetkonversation är ett samtal. Den räknas mot organisationens gräns för samtidiga samtal (20 pågående samtal som standard, delat med telefon- och andra samtal) och widgetens gräns på 25 aktiva sessioner (eller din gräns för samtidiga samtal, om den är högre). Vid någon av gränserna kan en ny konversation inte starta förrän ett samtal har avslutats.

Integrationsalternativ#

Välj den integrationsmetod som passar din stack:

Stil#

Widgeten levereras med inbyggda ljusa och mörka teman som styrs av propen theme, samt en accentfärg som styrs av propen primaryColor. För mer avancerad anpassning kan du åsidosätta CSS-anpassade egenskaper och klasser. Läs stilguiden för mer information.