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

``` 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 | Standardverdi | 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 ut fra nøkkelens widgetkonfigurasjon. | | `theme` | `'light' \| 'dark'` | Nei | `'light'` | Fargeskjema. | | `primaryColor` | `string` | Nei | `'#000000'` (light) / `'#ffffff'` (dark) | 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 posisjon i visningsområdet. | | `apiBase` | `string` | Nei | `'https://api.thunderphone.com/v1'` | Overstyring av API-base-URL. | | `language` | `string` | Nei | -- | Språkoverstyring per økt -- en språkkode eller lokalinnstilling som `en`, `es` eller `fr-FR`. Når den ikke er angitt, brukes stemmeagentens konfigurerte språk. Krever `language` under nøkkelens [nettleseroverstyringer](/nb/guides/embed-web-widget). | | `voice` | `string` | Nei | -- | Stemmeoverstyring per økt -- et stemmenavn som `maria`. Når den ikke er angitt, brukes stemmeagentens konfigurerte stemme. Krever `voice` under nøkkelens [nettleseroverstyringer](/nb/guides/embed-web-widget). | | `context` | `string` | Nei | -- | Faktabasert side- eller nettstedskontekst per økt som sendes til stemmeagenten. Avkortes på serversiden til 12 000 tegn. Krever `context` under nøkkelens [nettleseroverstyringer](/nb/guides/embed-web-widget). | | `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 under tilkobling. `true` bruker standardringetonen, eller bruk en URL-streng for egendefinert lyd. | --- ## Opprydding `ThunderPhone.mount()` returnerer en widgetinstans med oppryddingsmetoder: ```html ``` 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

``` ### Egendefinert plassering ```html

``` ### Med hendelsestilbakekall ```html

``` ### Med ringetone ```html

``` ### Bruke en DOM-elementreferanse ```html

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

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