Skip to main content
Die Seite Web Widgets (/dashboard/web-widgets) erstellt und verwaltet die veröffentlichbaren Schlüssel, die ThunderPhones einbettbares Sprach-Widget betreiben. Alles, was die API-Version dieses Leitfadens mit cURL erledigt, erledigt diese Seite mit einem Formular — zusätzlich wird der Einbettungscode für Sie generiert.

Widget erstellen

1

Klicken Sie auf Neues Widget und wählen Sie einen Modus

  • Agentenmodus — das Widget führt immer einen Agenten aus, den Sie im Dropdown auswählen. Die einfachste Einrichtung.
  • Webhook-Modus — bei jeder Widget-Sitzung ruft ThunderPhone Ihre Webhook-URL auf, und Ihr Server gibt die Agentenkonfiguration für diesen Besucher zurück (Routing pro Seite, angemeldete Benutzer, Rollouts). Lassen Sie die URL leer, um den Standard-Webhook Ihrer Organisation zu verwenden; wenn Sie eine neue URL eingeben, können Sie sie auch als Organisationsstandard festlegen.
2

Geben Sie die zulässigen Domains an

Veröffentlichbare Schlüssel sind an Origins gebunden: Mindestens eine Domain ist erforderlich, und das Widget funktioniert nur auf den von Ihnen aufgeführten Hostnamen. Platzhalter für Subdomains wie *.example.com sind zulässig (sie stimmen mit Subdomains überein, nicht mit der Root-Domain); Platzhalter ohne Domain wie * werden abgelehnt. localhost und 127.0.0.1 sind immer zulässig, sodass die lokale Entwicklung ohne ihre Angabe funktioniert.
3

Benennen, aktivieren und erstellen Sie es

Der Umschalter Widget aktivieren steuert, ob der Schlüssel Sitzungen akzeptiert — Sie können ein deaktiviertes Widget erstellen und es zur Veröffentlichung aktivieren.

Einbettungscode abrufen

Direkt nach der Erstellung (oder über die Schaltfläche Einbetten in jeder Zeile) generiert ein Einbettungsdialog einfügbaren Code mit Ihrem bereits eingetragenen veröffentlichbaren Schlüssel:
  • React — ein <ThunderPhoneWidget />-Snippet für Apps mit Bundler.
  • Script-Tag — ein CDN-Paar aus <script> und Stylesheet für jede Website.
Der Dialog zeigt außerdem grundlegende Darstellungsoptionen in der Vorschau — Titel, Primärfarbe, Eckenposition und helles/dunkles Design — und übernimmt Ihre Auswahl in das Snippet. Die vollständige Prop-Referenz, Styling-Hooks und die Headless-Option finden Sie in der Widget-SDK-Dokumentation.
Veröffentlichbare Schlüssel (pk_live_…) sind absichtlich öffentlich — sie können sicher im Frontend-Code bereitgestellt werden. Kopieren Sie jederzeit einen über die Kopierschaltfläche in seiner Zeile.

Widgets in der Liste verwalten

Jede Zeile kann direkt bearbeitet werden:
  • Modus / Agent — wechseln Sie zwischen Agenten- und Webhook-Modus oder weisen Sie den Agenten über Dropdowns direkt in der Zeile neu zu.
  • Domains — fügen Sie zulässige Domains als Chips hinzu oder entfernen Sie sie.
  • Aktivieren/deaktivieren — ein Umschalter pro Widget; deaktivierte Widgets akzeptieren sofort keine Sitzungen mehr.
  • In Organisation übertragen — kopieren oder verschieben Sie das Widget in eine andere Organisation, der Sie angehören (beim Verschieben wird es hier entfernt).
  • Löschen — widerruft den veröffentlichbaren Schlüssel; das Widget funktioniert sofort auf allen Domains nicht mehr. Dies kann nicht rückgängig gemacht werden.
Widget-Sitzungen werden im Anrufverlauf mit demselben Transkript, derselben Aufzeichnung und derselben Bewertung wie Telefonanrufe angezeigt.

Nächste Schritte

Widget-SDK-Referenz

Details zur React-Komponente, zum Headless-Hook und zum CDN-Skript.

Routing im Webhook-Modus

Geben Sie die Agentenkonfiguration pro Besucher von Ihrem Server zurück.