> ## 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 > Tilføj ThunderPhone-stemmewidgetten på ethvert website uden en bundler CDN-buildet inkluderer React internt, så du kan bruge widgetten på statiske websites, WordPress, Webflow eller enhver side, hvor du kan tilføje HTML. Ingen npm, bundler eller framework kræves. ## CDN-URL'er ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` `latest`-URL'erne er dem, dashboardets generator til indlejringskodestumper opretter. De caches i 5 minutter og henter automatisk nye stabile udgivelser. Fastlåste `/widget/vX.Y.Z/`-stier er uforanderlige og caches på lang sigt -- hvis du fastlåser, skal versionen matche den `@thunderphone/widget` npm-udgivelse, du udvikler imod. *** ## Grundlæggende brug ```html theme={null}

``` Widgetten monteres i målelementet og vises som en **bjælke med fast position i et hjørne af viewporten** (som standard `bottom-right`, styret af indstillingen `position`). Monteringselementet er kun React-roden -- dets placering på siden påvirker ikke, hvor widgetten vises. *** ## Monteringsindstillinger `ThunderPhone.mount()` accepterer de samme indstillinger som React-komponenten samt egenskaben `element`: | Indstilling | Type | Påkrævet | Standard | Beskrivelse | | ---------------- | -------------------------------------------------------------- | -------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Ja | -- | CSS-selector (f.eks. `'#thunderphone'`) eller en reference til et DOM-element. | | `publishableKey` | `string` | Ja | -- | Publicerbar API-nøgle (`pk_live_...`). Agenten bestemmes automatisk ud fra nøglens widgetkonfiguration. | | `theme` | `'light' \| 'dark'` | Nej | `'light'` | Farveskema. | | `primaryColor` | `string` | Nej | `'#000000'` (lys) / `'#ffffff'` (mørk) | CSS-farvestreng, der bruges som accentfarve. | | `title` | `string` | Nej | `'Voice assistant'` | Tekst, der vises i widgetbjælken. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nej | `'bottom-right'` | Fast position i viewporten. | | `apiBase` | `string` | Nej | `'https://api.thunderphone.com/v1'` | Tilsidesættelse af API-basens URL. | | `language` | `string` | Nej | -- | Tilsidesættelse af sprog pr. session -- en sprogkode eller landestandard som `en`, `es` eller `fr-FR`. Hvis den ikke er angivet, bruges agentens konfigurerede sprog. | | `voice` | `string` | Nej | -- | Tilsidesættelse af stemme pr. session -- et stemmenavn som `maria`. Hvis den ikke er angivet, bruges agentens konfigurerede stemme. | | `context` | `string` | Nej | -- | Faktuel side- eller website-kontekst pr. session, der sendes til agenten. Afkortes på serveren til 12.000 tegn. | | `onConnect` | `() => void` | Nej | -- | Kaldes, når stemmesessionen opretter forbindelse. | | `onDisconnect` | `() => void` | Nej | -- | Kaldes, når sessionen afsluttes. | | `onError` | `(error) => void` | Nej | -- | Kaldes ved fejl. Fejlen har felterne `error` (kode) og `message`. | | `ringtone` | `boolean \| string` | Nej | `false` | Afspil en ringetone under forbindelsen. `true` bruger standardringetonen, eller angiv en URL-streng for brugerdefineret lyd. | *** ## Oprydning `ThunderPhone.mount()` returnerer en widgetinstans med oprydningsmetoder: ```html theme={null} ``` Både `unmount()` og `destroy()` gør det samme -- de afbryder alle aktive stemmesessioner og fjerner widgetten fra DOM'en. Brug den, der passer bedst i din kode. Ryd altid op i widgetten, når du navigerer væk i single-page-applikationer, eller når det indeholdende element fjernes. Det sikrer, at aktive stemmesessioner afbrydes korrekt. *** ## Eksempler ### Mørkt tema med brugerdefineret farve ```html theme={null}

``` ### Brugerdefineret placering ```html theme={null}

``` ### Med hændelses-callbacks ```html theme={null}

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

``` ### Brug af en DOM-elementreference ```html theme={null}

``` ### WordPress / CMS-integration Tilføj dette i en Brugerdefineret HTML-blok eller i dit temas sidefod: ```html theme={null} ``` `

` kan placeres hvor som helst -- det er kun monteringspunktet. Selve widgetten gengives som en fast overlejring i et hjørne af visningsområdet (angivet med indstillingen `position`) og indgår ikke i layoutflowet med det omgivende indhold. *** ## Fejlfinding Sørg for, at både CSS- og JS-filerne er indlæst. Kontrollér browserkonsollen for netværksfejl. Bekræft, at målelementet findes i DOM'en, før du kalder `ThunderPhone.mount()`. Scriptet er endnu ikke indlæst. Sørg for, at `