Erstellen Sie ein Web-Widget im Dashboard

Richten Sie auf der Seite „Web-Widgets“ ein Click-to-Talk-Widget für Ihre Website ein – keine API-Aufrufe erforderlich.

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 „New widget“ und wählen Sie einen Modus
   • Agent mode — das Widget führt immer einen Agenten aus, den Sie in der Dropdown-Liste auswählen. Die einfachste Einrichtung.
   • Webhook mode — bei jeder Widget-Sitzung ruft ThunderPhone Ihre Webhook-URL auf, und Ihr Server gibt die Agentenkonfiguration für diesen Besucher zurück (seitenbasiertes Routing, 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. Führen Sie die erlaubten Domains auf

   Mindestens eine Domain ist erforderlich, und Browser können Sitzungen nur von den von Ihnen aufgeführten Hostnamen starten. Platzhalter für Subdomains wie *.example.com sind erlaubt (sie stimmen mit Subdomains überein, nicht mit der Stamm-Domain); allgemeine Platzhalter wie * werden abgelehnt. Die Liste verhindert die gelegentliche Wiederverwendung Ihres Schlüssels auf anderen Websites, ist jedoch keine Authentifizierung: Ein Skript außerhalb eines Browsers kann jeden Origin-Header senden. localhost ist in der Produktion nicht automatisch erlaubt; fügen Sie es zur Liste hinzu, um lokal mit der Produktions-API zu testen.

3. Wählen Sie die Browser-Überschreibungen

   Aktivieren Sie jede Sitzungseinstellung, die Ihre Seite sendet: Seitenkontext, Variablen, Stimme, Sprache. Neue Widgets akzeptieren keine davon, und eine Sitzungsanfrage mit einer deaktivierten Einstellung schlägt mit 400 fehl. Ihr Schlüssel ist öffentlich, erlauben Sie daher nur, was Sie verwenden. Siehe Browser-Überschreibungen.

4. Benennen, aktivieren und erstellen Sie es

   Der Schalter Widget aktivieren steuert, ob der Schlüssel Sitzungen akzeptiert — Sie können ein Widget deaktiviert erstellen und es zum Start 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.

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#