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

``` 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-selektor (f.eks. `'#thunderphone'`) eller en reference til et DOM-element. | | `publishableKey` | `string` | Ja | -- | Udgivelsesbar API-nøgle (`pk_live_...`). Agenten bestemmes automatisk ud fra nøglens widgetkonfiguration. | | `theme` | `'light' \| 'dark'` | Nej | `'light'` | Farveskema. | | `primaryColor` | `string` | Nej | `'#000000'` (light) / `'#ffffff'` (dark) | 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 placering i visningsområdet. | | `apiBase` | `string` | Nej | `'https://api.thunderphone.com/v1'` | Tilsidesættelse af API-basis-URL. | | `language` | `string` | Nej | -- | Tilsidesættelse af sprog pr. session -- en sprogkode eller landestandard som `en`, `es` eller `fr-FR`. Når den ikke er angivet, bruges agentens konfigurerede sprog. Kræver `language` under nøglens [browsertilsidesættelser](/da/guides/embed-web-widget). | | `voice` | `string` | Nej | -- | Tilsidesættelse af stemme pr. session -- et stemmenavn som `maria`. Når den ikke er angivet, bruges agentens konfigurerede stemme. Kræver `voice` under nøglens [browsertilsidesættelser](/da/guides/embed-web-widget). | | `context` | `string` | Nej | -- | Faktuel side- eller webstedskontekst pr. session, som sendes til agenten. Afkortes på serversiden til 12.000 tegn. Kræver `context` under nøglens [browsertilsidesættelser](/da/guides/embed-web-widget). | | `onConnect` | `() => void` | Nej | -- | Kaldes, når stemmesessionen opretter forbindelse. | | `onDisconnect` | `() => void` | Nej | -- | Kaldes, når sessionen slutter. | | `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 til brugerdefineret lyd. | --- ## Oprydning `ThunderPhone.mount()` returnerer en widgetinstans med oprydningsmetoder: ```html ``` 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

``` ### Brugerdefineret placering ```html

``` ### Med hændelses-callbacks ```html

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

``` ### Brug af en DOM-elementreference ```html

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

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