--- title: "CDN / Script Tag" description: "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) ``` ```html Pinned version ``` 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

``` 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-selektor (t.ex. `'#thunderphone'`) eller en referens till ett DOM-element. | | `publishableKey` | `string` | Ja | -- | Publicerbar API-nyckel (`pk_live_...`). Agenten bestäms automatiskt utifrån nyckelns widgetkonfiguration. | | `theme` | `'light' \| 'dark'` | Nej | `'light'` | Färgschema. | | `primaryColor` | `string` | Nej | `'#000000'` (ljust) / `'#ffffff'` (mörkt) | 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 | -- | Språköverskrivning per session -- en språkkod eller språkinställning som `en`, `es` eller `fr-FR`. När den inte anges används agentens konfigurerade språk. Kräver `language` under nyckelns [webbläsaröverskrivningar](/sv/guides/embed-web-widget). | | `voice` | `string` | Nej | -- | Röstöverskrivning per session -- ett röstnamn som `maria`. När den inte anges används agentens konfigurerade röst. Kräver `voice` under nyckelns [webbläsaröverskrivningar](/sv/guides/embed-web-widget). | | `context` | `string` | Nej | -- | Faktabaserad sid- eller webbplatskontext per session som skickas till agenten. Kortas ned på serversidan till 12 000 tecken. Kräver `context` under nyckelns [webbläsaröverskrivningar](/sv/guides/embed-web-widget). | | `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 ``` 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

``` ### Anpassad position ```html

``` ### Med händelseåteranrop ```html

``` ### Med ringsignal ```html

``` ### Använda en referens till ett DOM-element ```html

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

`-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 `