> ## 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 > Voeg de ThunderPhone-spraakwidget toe aan elke website zonder bundler De CDN-build bundelt React intern, zodat je de widget kunt gebruiken op statische sites, WordPress, Webflow of elke pagina waarop je HTML kunt toevoegen. Geen npm, bundler of framework vereist. ## CDN-URL's ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` De `latest`-URL's worden gegenereerd door de insluitcodegenerator van het dashboard. Ze worden 5 minuten gecachet en nemen automatisch nieuwe stabiele releases over. Vastgezette `/widget/vX.Y.Z/`-paden zijn onveranderlijk en worden langdurig gecachet -- als je een versie vastzet, laat deze dan overeenkomen met de npm-release van `@thunderphone/widget` waarvoor je ontwikkelt. *** ## Basisgebruik ```html theme={null}

``` De widget wordt in het doelelement gemount en weergegeven als een **balk met vaste positie in een hoek van de viewport** (standaard `bottom-right`, aangestuurd door de optie `position`). Het mountelement is alleen de React-root -- de locatie ervan op de pagina heeft geen invloed op waar de widget verschijnt. *** ## Mountopties `ThunderPhone.mount()` accepteert dezelfde opties als de React-component, plus de eigenschap `element`: | Optie | Type | Vereist | Standaard | Beschrijving | | ---------------- | -------------------------------------------------------------- | ------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `element` | `string \| HTMLElement` | Ja | -- | CSS-selector (bijv. `'#thunderphone'`) of een DOM-elementverwijzing. | | `publishableKey` | `string` | Ja | -- | Publiceerbare API-sleutel (`pk_live_...`). De agent wordt automatisch bepaald op basis van de widgetconfiguratie van de sleutel. | | `theme` | `'light' \| 'dark'` | Nee | `'light'` | Kleurenschema. | | `primaryColor` | `string` | Nee | `'#000000'` (light) / `'#ffffff'` (dark) | CSS-kleurreeks die als accentkleur wordt gebruikt. | | `title` | `string` | Nee | `'Voice assistant'` | Tekst die in de widgetbalk wordt weergegeven. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nee | `'bottom-right'` | Vaste positie in de viewport. | | `apiBase` | `string` | Nee | `'https://api.thunderphone.com/v1'` | Overschrijving van de API-basis-URL. | | `language` | `string` | Nee | -- | Taaloverschrijving per sessie -- een taalcode of landinstelling zoals `en`, `es` of `fr-FR`. Indien niet ingesteld, wordt de geconfigureerde taal van de agent gebruikt. | | `voice` | `string` | Nee | -- | Stemoverschrijving per sessie -- een stemnaam zoals `maria`. Indien niet ingesteld, wordt de geconfigureerde stem van de agent gebruikt. | | `context` | `string` | Nee | -- | Feitelijke pagina- of sitecontext per sessie die aan de agent wordt doorgegeven. Aan serverzijde afgekapt tot 12.000 tekens. | | `onConnect` | `() => void` | Nee | -- | Wordt aangeroepen wanneer de spraaksessie verbinding maakt. | | `onDisconnect` | `() => void` | Nee | -- | Wordt aangeroepen wanneer de sessie eindigt. | | `onError` | `(error) => void` | Nee | -- | Wordt aangeroepen bij fouten. Error bevat de velden `error` (code) en `message`. | | `ringtone` | `boolean \| string` | Nee | `false` | Speel een beltoon af tijdens het verbinden. `true` voor de standaardbeltoon, of een URL-reeks voor aangepaste audio. | *** ## Opschonen `ThunderPhone.mount()` retourneert een widgetinstantie met opschoonmethoden: ```html theme={null} ``` Zowel `unmount()` als `destroy()` doen hetzelfde -- ze verbreken actieve spraaksessies en verwijderen de widget uit de DOM. Gebruik wat het best leesbaar is in je code. Ruim de widget altijd op wanneer je weg navigeert in single-page applications of wanneer het bevattende element wordt verwijderd. Zo worden actieve spraaksessies correct verbroken. *** ## Voorbeelden ### Donker thema met aangepaste kleur ```html theme={null}

``` ### Aangepaste positie ```html theme={null}

``` ### Met eventcallbacks ```html theme={null}

``` ### Met beltoon ```html theme={null}

``` ### Een DOM-elementverwijzing gebruiken ```html theme={null}

``` ### WordPress- / CMS-integratie Voeg dit toe aan een blok met aangepaste HTML of aan de footer van je thema: ```html theme={null} ``` De `

` kan overal staan -- dit is alleen het aankoppelpunt. De widget zelf wordt weergegeven als een vaste overlay in een hoek van het venster (ingesteld met de optie `position`) en loopt niet mee met de omringende inhoud. *** ## Problemen oplossen Zorg dat zowel de CSS- als de JS-bestanden zijn geladen. Controleer de browserconsole op netwerkfouten. Verifieer dat het doelelement in de DOM bestaat voordat je `ThunderPhone.mount()` aanroept. Het script is nog niet geladen. Zorg dat de `