> ## 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 > Legg til ThunderPhone-stemmewidgeten på ethvert nettsted uten en bundler CDN-byggversjonen pakker React internt, slik at du kan bruke widgeten på statiske nettsteder, WordPress, Webflow eller enhver side der du kan legge til HTML. Ingen npm, ingen bundler og ingen rammeverk kreves. ## CDN-URL-er ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` `latest`-URL-ene er det kontrollpanelets generator for innebyggingskode produserer. De mellomlagres i 5 minutter og tar automatisk i bruk nye stabile utgivelser. Fastlåste `/widget/vX.Y.Z/`-stier er uforanderlige og mellomlagres langsiktig -- hvis du låser versjonen, må den samsvare med npm-utgivelsen av `@thunderphone/widget` du utvikler mot. *** ## Grunnleggende bruk ```html theme={null}

``` Widgeten monteres i målelementet og vises som en **linje med fast plassering i et hjørne av visningsområdet** (som standard `bottom-right`, styrt av alternativet `position`). Monteringselementet er bare React-roten -- plasseringen på siden påvirker ikke hvor widgeten vises. *** ## Monteringsalternativer `ThunderPhone.mount()` godtar de samme alternativene som React-komponenten, i tillegg til egenskapen `element`: | Alternativ | Type | Påkrevd | Standard | Beskrivelse | | ---------------- | -------------------------------------------------------------- | ------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Ja | -- | CSS-velger (f.eks. `'#thunderphone'`) eller en referanse til et DOM-element. | | `publishableKey` | `string` | Ja | -- | Publiserbar API-nøkkel (`pk_live_...`). Stemmeagenten bestemmes automatisk fra nøkkelens widgetkonfigurasjon. | | `theme` | `'light' \| 'dark'` | Nei | `'light'` | Fargevalg. | | `primaryColor` | `string` | Nei | `'#000000'` (lys) / `'#ffffff'` (mørk) | CSS-fargestreng som brukes som aksentfarge. | | `title` | `string` | Nei | `'Voice assistant'` | Tekst som vises i widgetlinjen. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nei | `'bottom-right'` | Fast plassering i visningsområdet. | | `apiBase` | `string` | Nei | `'https://api.thunderphone.com/v1'` | Overstyring av API-basens URL. | | `language` | `string` | Nei | -- | Språkoverstyring per økt -- en språkkode eller lokalisering, for eksempel `en`, `es` eller `fr-FR`. Når den ikke er angitt, brukes stemmeagentens konfigurerte språk. | | `voice` | `string` | Nei | -- | Stemmeoverstyring per økt -- et stemmenavn som `maria`. Når den ikke er angitt, brukes stemmeagentens konfigurerte stemme. | | `context` | `string` | Nei | -- | Faktisk side- eller nettstedskontekst per økt som sendes til stemmeagenten. Avkortes på serversiden til 12 000 tegn. | | `onConnect` | `() => void` | Nei | -- | Kalles når stemmeøkten kobles til. | | `onDisconnect` | `() => void` | Nei | -- | Kalles når økten avsluttes. | | `onError` | `(error) => void` | Nei | -- | Kalles ved feil. Feilen har feltene `error` (kode) og `message`. | | `ringtone` | `boolean \| string` | Nei | `false` | Spill av en ringetone mens tilkoblingen opprettes. `true` for standardringetonen, eller en URL-streng for tilpasset lyd. | *** ## Opprydding `ThunderPhone.mount()` returnerer en widgetinstans med oppryddingsmetoder: ```html theme={null} ``` Både `unmount()` og `destroy()` gjør det samme – de kobler fra alle aktive stemmeøkter og fjerner widgeten fra DOM-en. Bruk den som passer best i koden din. Rydd alltid opp widgeten når du navigerer bort i enkeltsideapplikasjoner, eller når elementet den ligger i, fjernes. Dette sikrer at aktive stemmeøkter kobles fra på riktig måte. *** ## Eksempler ### Mørkt tema med egendefinert farge ```html theme={null}

``` ### Egendefinert plassering ```html theme={null}

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

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

``` ### Bruke en DOM-elementreferanse ```html theme={null}

``` ### WordPress- / CMS-integrasjon Legg dette til i en Egendefinert HTML-blokk eller i bunnteksten til temaet ditt: ```html theme={null} ``` `

`-en kan plasseres hvor som helst – den er bare monteringspunktet. Selve widgeten gjengis som et fast overlegg i et hjørne av visningsområdet (angitt med alternativet `position`) og flyter ikke sammen med innholdet rundt. *** ## Feilsøking Sørg for at både CSS- og JS-filene er lastet inn. Sjekk nettleserkonsollen for nettverksfeil. Bekreft at målelementet finnes i DOM-en før du kaller `ThunderPhone.mount()`. Skriptet er ikke lastet inn ennå. Sørg for at `