Einbettbares Sprach-Widget

Fügen Sie mit wenigen Codezeilen einen Sprach-KI-Agenten zu jeder Website hinzu

Das einbettbare Sprach-Widget von ThunderPhone ermöglicht Ihren Website-Besuchern, direkt im Browser mit einem KI-Agenten zu sprechen. Kein Telefonanruf erforderlich – Nutzer klicken auf eine Schaltfläche und starten eine Echtzeit-Sprachunterhaltung mit ThunderPhone.

Das Widget wird als Leiste in Glasoptik dargestellt, die sich an helle und dunkle Designs anpasst, mit anpassbaren Akzentfarben und Positionierung. Es wird als npm-Paket @thunderphone/widget bereitgestellt und ist auch über CDN für Umgebungen ohne Bundler verfügbar.

Voraussetzungen#

Bevor Sie das Widget einbetten, führen Sie diese drei Schritte im ThunderPhone Dashboard aus:

1. Web-Widget erstellen

   Navigieren Sie im Dashboard zu Web Widgets und erstellen Sie ein Widget. Wählen Sie den Sprachagenten aus, den Sie bereitstellen möchten. Jedes Widget hat einen eigenen veröffentlichbaren Schlüssel (pk_live_...), der sicher in clientseitigem Code verwendet werden kann; der Sprachagent wird über den Schlüssel aufgelöst.

2. Zulässige Domains konfigurieren

   Fügen Sie im selben Widget die Domains hinzu, auf denen es eingebettet wird. Platzhalter werden unterstützt (z. B. *.example.com). Die Liste verhindert, dass das Widget funktioniert, wenn jemand Ihren Schlüssel auf eine andere Website kopiert; sie ist keine Authentifizierung, da ein Skript außerhalb eines Browsers jeden beliebigen Origin-Header senden kann. localhost ist in der Produktion nicht automatisch zulässig: Fügen Sie es zur Liste hinzu, um lokal gegen die Produktions-API zu testen.

3. Browser-Überschreibungen auswählen

   Wenn Ihre Seite language, voice oder context festlegt, aktivieren Sie jede Option unter Browser overrides. Neue Widgets akzeptieren keine, und eine Sitzungsanfrage mit einer deaktivierten Einstellung schlägt mit 400 override_not_allowed fehl. Siehe Browser-Überschreibungen.

Schnellstart#

Installieren Sie das Paket:

npm install @thunderphone/widget

Fügen Sie das Widget in Ihre App ein:

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

Das ist alles. Ihre Nutzer sehen eine Anrufleiste in Glasoptik, die sie mit einem einzigen Klick mit Ihrem KI-Agenten verbindet.

Anpassung#

Das Widget verfügt über vier Props für das Erscheinungsbild:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Drei weitere Props passen die Sitzung statt des Erscheinungsbilds an -- sie werden alle beim Start eines Anrufs an die Sitzungsanfrage weitergeleitet. Jede funktioniert nur, wenn der veröffentlichbare Schlüssel des Widgets sie unter Browser-Überschreibungen erlaubt; andernfalls schlägt die Sitzungsanfrage mit 400 override_not_allowed fehl:

In der React-Komponentenreferenz finden Sie die vollständige Props-Tabelle.

Für eine vollständig angepasste Benutzeroberfläche verwenden Sie den Headless-Hook, um die Sprachsitzung zu verwalten, während Sie Ihre eigene Oberfläche erstellen. Der Hook stellt Audiopegel in Echtzeit bereit, um audioreaktive Visualisierungen zu erstellen.

Jede Widget-Unterhaltung ist ein Anruf. Sie wird auf das Limit für gleichzeitige Anrufe Ihrer Organisation angerechnet (standardmäßig 20 laufende Anrufe, geteilt mit Telefon- und anderen Anrufen) sowie auf ein Widget-Limit von 25 aktiven Sitzungen (oder Ihr Limit für gleichzeitige Anrufe, falls dieses höher ist). Bei Erreichen eines der beiden Limits kann keine neue Unterhaltung starten, bis ein Anruf endet.

Integrationsoptionen#

Wählen Sie die Integrationsmethode, die zu Ihrem Stack passt:

Styling#

Das Widget verfügt über integrierte helle und dunkle Designs, die über die Prop theme gesteuert werden, sowie über eine Akzentfarbe, die über die Prop primaryColor gesteuert wird. Für umfassendere Anpassungen können Sie CSS-Custom-Properties und Klassen überschreiben. Details finden Sie im Styling-Leitfaden.