Inbäddningsbar röstwidget

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.

ThunderPhone widget in light and dark themes with various accent colors

Förutsättningar

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

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.

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

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.

Publicerbara nycklar (pk_live_...) är inte samma sak som dina hemliga API-token. Publicerbara nycklar är utformade för användning på klientsidan och är begränsade till widgetsessioner på dina tillåtna domäner. Använd aldrig din hemliga API-token i kod på klientsidan.

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:

Prop	Standard	Beskrivning
`theme`	`'light'`	`'light'` för vitt glas, `'dark'` för mörkt glas
`primaryColor`	`'#000000'` (ljus) / `'#ffffff'` (mörk)	Accentfärg för startknappen, vågformen och anslutningsindikatorn
`title`	`'Voice assistant'`	Text som visas i widgeten
`position`	`'bottom-right'`	Hörn i visningsområdet: `'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"
/>

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

Prop	Beskrivning
`language`	Språkåsidosättning per session — en kod eller lokal, exempelvis `en`, `es` eller `fr-FR`
`voice`	Röståsidosättning per session — ett röstnamn, exempelvis `maria`
`context`	Faktabaserad sid- eller webbplatskontext som skickas till agenten (trunkeras på serversidan till 12 000 tecken)

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:

React-komponent

Färdigbyggd UI-komponent med inbyggda samtalskontroller och statusvisning. Importera, skicka in props, klart.

Headless-hook

Full kontroll över användargränssnittet. Hooken useThunderPhone hanterar röstsessionen medan du bygger ditt eget gränssnitt.

CDN / script-tagg

Ingen bundlare krävs. Ladda widgeten via en script-tagg för statiska webbplatser, WordPress och andra miljöer som inte använder React.

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.

Behöver du hjälp? Kontakta oss på support@thunderphone.com

​Förutsättningar

​Snabbstart

​Anpassning

​Integrationsalternativ

React-komponent

Headless-hook

CDN / script-tagg

​Stil

Förutsättningar

Snabbstart

Anpassning

Integrationsalternativ

Stil