> ## 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. # CDN / Script-Tag > Fügen Sie das ThunderPhone-Sprach-Widget ohne Bundler zu jeder Website hinzu Der CDN-Build bündelt React intern, sodass Sie das Widget auf statischen Websites, WordPress, Webflow oder jeder Seite verwenden können, auf der Sie HTML hinzufügen können. Kein npm, kein Bundler und kein Framework erforderlich. ## CDN-URLs ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` Die `latest`-URLs werden vom Generator für Embed-Snippets im Dashboard erzeugt. Sie werden 5 Minuten zwischengespeichert und übernehmen neue stabile Releases automatisch. Angeheftete `/widget/vX.Y.Z/`-Pfade sind unveränderlich und werden langfristig zwischengespeichert -- wenn Sie eine Version anheften, muss sie dem `@thunderphone/widget`-npm-Release entsprechen, gegen das Sie entwickeln. *** ## Grundlegende Verwendung ```html theme={null}

``` Das Widget wird im Zielelement eingebunden und als **Leiste mit fester Position in einer Ecke des Viewports** dargestellt (standardmäßig `bottom-right`, gesteuert durch die Option `position`). Das Einbindungselement ist lediglich die React-Root -- seine Position auf der Seite beeinflusst nicht, wo das Widget erscheint. *** ## Einbindungsoptionen `ThunderPhone.mount()` akzeptiert dieselben Optionen wie die React-Komponente sowie die Eigenschaft `element`: | Option | Typ | Erforderlich | Standard | Beschreibung | | ---------------- | -------------------------------------------------------------- | ------------ | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Ja | -- | CSS-Selektor (z. B. `'#thunderphone'`) oder eine DOM-Elementreferenz. | | `publishableKey` | `string` | Ja | -- | Veröffentlichbarer API-Schlüssel (`pk_live_...`). Der Agent wird automatisch anhand der Widget-Konfiguration des Schlüssels bestimmt. | | `theme` | `'light' \| 'dark'` | Nein | `'light'` | Farbschema. | | `primaryColor` | `string` | Nein | `'#000000'` (hell) / `'#ffffff'` (dunkel) | CSS-Farbzeichenfolge, die als Akzentfarbe verwendet wird. | | `title` | `string` | Nein | `'Voice assistant'` | In der Widget-Leiste angezeigter Text. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nein | `'bottom-right'` | Feste Viewport-Position. | | `apiBase` | `string` | Nein | `'https://api.thunderphone.com/v1'` | Überschreibung der API-Basis-URL. | | `language` | `string` | Nein | -- | Sprachüberschreibung pro Sitzung -- ein Sprachcode oder Gebietsschema wie `en`, `es` oder `fr-FR`. Wenn nicht festgelegt, gilt die konfigurierte Sprache des Agenten. | | `voice` | `string` | Nein | -- | Stimmenüberschreibung pro Sitzung -- ein Stimmenname wie `maria`. Wenn nicht festgelegt, gilt die konfigurierte Stimme des Agenten. | | `context` | `string` | Nein | -- | Faktischer Seiten- oder Website-Kontext pro Sitzung, der an den Agenten übergeben wird. Serverseitig auf 12.000 Zeichen gekürzt. | | `onConnect` | `() => void` | Nein | -- | Wird aufgerufen, wenn die Sprachsitzung verbunden wird. | | `onDisconnect` | `() => void` | Nein | -- | Wird aufgerufen, wenn die Sitzung endet. | | `onError` | `(error) => void` | Nein | -- | Wird bei Fehlern aufgerufen. Error enthält die Felder `error` (Code) und `message`. | | `ringtone` | `boolean \| string` | Nein | `false` | Spielt während des Verbindungsaufbaus einen Klingelton ab. `true` für den Standardklingelton oder eine URL-Zeichenfolge für benutzerdefiniertes Audio. | *** ## Bereinigung `ThunderPhone.mount()` gibt eine Widget-Instanz mit Bereinigungsmethoden zurück: ```html theme={null} ``` Sowohl `unmount()` als auch `destroy()` bewirken dasselbe – sie trennen alle aktiven Sprachsitzungen und entfernen das Widget aus dem DOM. Verwenden Sie die Variante, die sich in Ihrem Code besser liest. Bereinigen Sie das Widget immer, wenn Sie in Single-Page-Anwendungen weg navigieren oder das enthaltende Element entfernt wird. Dadurch wird sichergestellt, dass aktive Sprachsitzungen ordnungsgemäß getrennt werden. *** ## Beispiele ### Dunkles Theme mit benutzerdefinierter Farbe ```html theme={null}

``` ### Benutzerdefinierte Position ```html theme={null}

``` ### Mit Ereignis-Callbacks ```html theme={null}

``` ### Mit Klingelton ```html theme={null}

``` ### Mit einer DOM-Elementreferenz ```html theme={null}

``` ### WordPress-/CMS-Integration Fügen Sie dies zu einem benutzerdefinierten HTML-Block oder zum Footer Ihres Themes hinzu: ```html theme={null} ``` Das `

` kann überall platziert werden – es dient nur als Einbindungspunkt. Das Widget selbst wird als fest positioniertes Overlay in einer Ecke des Viewports gerendert (festgelegt durch die Option `position`) und fließt nicht mit dem umgebenden Inhalt. *** ## Fehlerbehebung Stellen Sie sicher, dass sowohl die CSS- als auch die JS-Dateien geladen sind. Prüfen Sie die Browserkonsole auf Netzwerkfehler. Vergewissern Sie sich, dass das Zielelement im DOM vorhanden ist, bevor Sie `ThunderPhone.mount()` aufrufen. Das Skript wurde noch nicht geladen. Stellen Sie sicher, dass das `