Widget

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. Veröffentlichbaren API-Schlüssel erstellen

   Gehen Sie in den Dashboard-Einstellungen zu Entwickler und erstellen Sie einen veröffentlichbaren Schlüssel. Veröffentlichbare Schlüssel beginnen mit pk_live_ und können sicher in clientseitigem Code verwendet werden.

2. Zulässige Domains konfigurieren

   Fügen Sie in denselben Entwickler-Einstellungen die Domains hinzu, auf denen das Widget eingebettet wird. localhost ist für die Entwicklung immer zulässig. Platzhalter werden unterstützt, z. B. *.example.com.

3. Web-Widget erstellen

   Gehen Sie im Dashboard zu Web-Widgets und erstellen Sie ein Widget. Wählen Sie den Agenten aus, den Sie verfügbar machen möchten, sowie den zu verwendenden veröffentlichbaren Schlüssel. Der Agent wird automatisch anhand Ihrer Konfiguration des veröffentlichbaren Schlüssels aufgelöst.

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 – alle werden beim Start eines Anrufs an die Sitzungsanfrage weitergeleitet:

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.

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.