> ## 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 > Lägg till ThunderPhone-röstwidgeten på valfri webbplats utan en bundler CDN-versionen paketerar React internt, så du kan använda widgeten på statiska webbplatser, WordPress, Webflow eller vilken sida som helst där du kan lägga till HTML. Ingen npm, ingen bundlare och inget ramverk krävs. ## CDN-URL:er ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` URL:erna för `latest` är de som instrumentpanelens generator för inbäddningskod skapar. De cachelagras i 5 minuter och hämtar automatiskt nya stabila versioner. Fästa sökvägar för `/widget/vX.Y.Z/` är oföränderliga och cachelagras långsiktigt -- om du fäster en version ska den matcha den npm-version av `@thunderphone/widget` som du utvecklar mot. *** ## Grundläggande användning ```html theme={null}

``` Widgeten monteras i målelementet och renderas som en **fält med fast position i ett hörn av visningsområdet** (standardvärdet är `bottom-right`, styrt av alternativet `position`). Monteringslementet är endast React-roten -- dess placering på sidan påverkar inte var widgeten visas. *** ## Monteringsalternativ `ThunderPhone.mount()` accepterar samma alternativ som React-komponenten, plus egenskapen `element`: | Alternativ | Typ | Krävs | Standard | Beskrivning | | ---------------- | -------------------------------------------------------------- | ----- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `element` | `string \| HTMLElement` | Ja | -- | CSS-väljare (t.ex. `'#thunderphone'`) eller en referens till ett DOM-element. | | `publishableKey` | `string` | Ja | -- | Publicerbar API-nyckel (`pk_live_...`). Röstagenten fastställs automatiskt från nyckelns widgetkonfiguration. | | `theme` | `'light' \| 'dark'` | Nej | `'light'` | Färgschema. | | `primaryColor` | `string` | Nej | `'#000000'` (light) / `'#ffffff'` (dark) | CSS-färgsträng som används som accentfärg. | | `title` | `string` | Nej | `'Voice assistant'` | Text som visas i widgetfältet. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nej | `'bottom-right'` | Fast position i visningsområdet. | | `apiBase` | `string` | Nej | `'https://api.thunderphone.com/v1'` | Åsidosättning av API-bas-URL. | | `language` | `string` | Nej | -- | Åsidosättning av språk per session -- en språkkod eller språkinställning som `en`, `es` eller `fr-FR`. Om det inte anges används röstagentens konfigurerade språk. | | `voice` | `string` | Nej | -- | Åsidosättning av röst per session -- ett röstnamn som `maria`. Om det inte anges används röstagentens konfigurerade röst. | | `context` | `string` | Nej | -- | Faktabaserad sid- eller webbplatskontext per session som skickas till röstagenten. Avkortas på serversidan till 12 000 tecken. | | `onConnect` | `() => void` | Nej | -- | Anropas när röstsessionen ansluts. | | `onDisconnect` | `() => void` | Nej | -- | Anropas när sessionen avslutas. | | `onError` | `(error) => void` | Nej | -- | Anropas vid fel. Felet har fälten `error` (kod) och `message`. | | `ringtone` | `boolean \| string` | Nej | `false` | Spela en ringsignal under anslutning. `true` för standardringsignalen eller en URL-sträng för anpassat ljud. | *** ## Rensning `ThunderPhone.mount()` returnerar en widgetinstans med metoder för rensning: ```html theme={null} ``` Både `unmount()` och `destroy()` gör samma sak -- de kopplar från alla aktiva röstsamtal och tar bort widgeten från DOM:en. Använd det alternativ som passar bäst i din kod. Rensa alltid upp widgeten när du navigerar bort i ensidiga applikationer eller när det innehållande elementet tas bort. Detta säkerställer att aktiva röstsamtal kopplas från korrekt. *** ## Exempel ### Mörkt tema med anpassad färg ```html theme={null}

``` ### Anpassad position ```html theme={null}

``` ### Med händelseåteranrop ```html theme={null}

``` ### Med ringsignal ```html theme={null}

``` ### Använda en referens till ett DOM-element ```html theme={null}

``` ### WordPress-/CMS-integration Lägg till detta i ett anpassat HTML-block eller i sidfoten för ditt tema: ```html theme={null} ``` `

`-elementet kan placeras var som helst -- det är bara monteringspunkten. Själva widgeten renderas som ett fast överlägg i ett hörn av visningsytan (anges med alternativet `position`) och följer inte omgivande innehåll. *** ## Felsökning Kontrollera att både CSS- och JS-filerna har lästs in. Kontrollera webbläsarkonsolen efter nätverksfel. Verifiera att målelementet finns i DOM:en innan du anropar `ThunderPhone.mount()`. Skriptet har inte lästs in ännu. Kontrollera att `