Widget

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 publicerbar API-nyckel

   Gå till Utvecklare i instrumentpanelens inställningar och skapa en publicerbar nyckel. Publicerbara nycklar börjar med pk_live_ och kan säkert inkluderas i kod på klientsidan.

2. Konfigurera tillåtna domäner

   Lägg till de domäner där widgeten ska bäddas in i samma inställningar för Utvecklare. localhost är alltid tillåtet för utveckling. Jokertecken stöds (t.ex. *.example.com).

3. Skapa en webbwidget

   Gå till Webbwidgetar i instrumentpanelen och skapa en widget. Välj den agent du vill exponera och den publicerbara nyckel som ska användas. Agenten identifieras automatiskt utifrån konfigurationen för din publicerbara nyckel.

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

Tre ytterligare props anpassar sessionen i stället för utseendet -- alla vidarebefordras till sessionsbegäran när ett samtal startar:

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.

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.