> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/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 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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </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>