---
title: "Erstellen Sie ein Web-Widget im Dashboard"
description: "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](/de/guides/embed-web-widget)
mit cURL erledigt, erledigt diese Seite mit einem Formular — zusätzlich wird der
Einbettungscode für Sie generiert.

## Widget erstellen

<Steps>
  <Step title="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.
  </Step>
  <Step title="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.
  </Step>
  <Step title="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](/de/guides/embed-web-widget).
  </Step>
  <Step title="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.
  </Step>
</Steps>

## 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](/de/widget/overview).

<Note>
  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.
</Note>

## 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](/de/guides/review-calls) mit demselben
Transkript, derselben Aufzeichnung und derselben Bewertung wie Telefonanrufe angezeigt.

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Widget-SDK-Referenz" icon="window-maximize" href="/de/widget/overview">
    Details zur React-Komponente, zum Headless-Hook und zum CDN-Skript.
  </Card>
  <Card title="Routing im Webhook-Modus" icon="bolt" href="/de/guides/dynamic-call-config">
    Geben Sie die Agentenkonfiguration pro Besucher von Ihrem Server zurück.
  </Card>
</CardGroup>