> ## 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 > Lisää ThunderPhone-puhewidget mihin tahansa verkkosivustoon ilman niputtajaa CDN-versio niputtaa Reactin sisäisesti, joten voit käyttää widgetiä staattisilla sivustoilla, WordPressissä, Webflowssa tai millä tahansa sivulla, jolle voit lisätä HTML:ää. Et tarvitse npm:ää, niputtajaa etkä kehystä. ## CDN-URL-osoitteet ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` `latest`-URL-osoitteet ovat niitä, jotka hallintapaneelin upotuskoodin luontitoiminto tuottaa. Ne tallennetaan välimuistiin 5 minuutiksi, ja ne ottavat uudet vakaat julkaisut käyttöön automaattisesti. Kiinnitetyt `/widget/vX.Y.Z/`-polut ovat muuttumattomia ja ne tallennetaan välimuistiin pitkäksi aikaa -- jos kiinnität version, varmista, että se vastaa käyttämääsi `@thunderphone/widget` npm-julkaisua. *** ## Peruskäyttö ```html theme={null}

``` Widget liitetään kohde-elementtiin ja näytetään **kiinteästi sijoitettuna palkkina näkymän kulmassa** (oletusarvo `bottom-right`, jota hallitaan `position`-asetuksella). Liitoselementti on vain React-juuri -- sen sijainti sivulla ei vaikuta siihen, missä widget näkyy. *** ## Liitosasetukset `ThunderPhone.mount()` hyväksyy samat asetukset kuin React-komponentti sekä `element`-ominaisuuden: | Asetus | Tyyppi | Pakollinen | Oletusarvo | Kuvaus | | ---------------- | -------------------------------------------------------------- | ---------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Kyllä | -- | CSS-valitsin (esim. `'#thunderphone'`) tai viittaus DOM-elementtiin. | | `publishableKey` | `string` | Kyllä | -- | Julkaistava API-avain (`pk_live_...`). Agentti määritetään automaattisesti avaimen widget-määrityksestä. | | `theme` | `'light' \| 'dark'` | Ei | `'light'` | Värimalli. | | `primaryColor` | `string` | Ei | `'#000000'` (vaalea) / `'#ffffff'` (tumma) | Korostusvärinä käytettävä CSS-värimerkkijono. | | `title` | `string` | Ei | `'Voice assistant'` | Widget-palkissa näytettävä teksti. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Ei | `'bottom-right'` | Kiinteä sijainti näkymässä. | | `apiBase` | `string` | Ei | `'https://api.thunderphone.com/v1'` | API:n perus-URL-osoitteen ohitus. | | `language` | `string` | Ei | -- | Istuntokohtainen kieliohitus -- kielikoodi tai kielialue, kuten `en`, `es` tai `fr-FR`. Jos sitä ei ole asetettu, käytetään agentin määritettyä kieltä. | | `voice` | `string` | Ei | -- | Istuntokohtainen äänen ohitus -- äänen nimi, kuten `maria`. Jos sitä ei ole asetettu, käytetään agentin määritettyä ääntä. | | `context` | `string` | Ei | -- | Istuntokohtainen sivua tai sivustoa koskeva faktakonteksti, joka välitetään agentille. Katkaistaan palvelinpuolella 12 000 merkkiin. | | `onConnect` | `() => void` | Ei | -- | Kutsutaan, kun puheistunto yhdistetään. | | `onDisconnect` | `() => void` | Ei | -- | Kutsutaan, kun istunto päättyy. | | `onError` | `(error) => void` | Ei | -- | Kutsutaan virheiden yhteydessä. Virheessä on `error`- (koodi) ja `message`-kentät. | | `ringtone` | `boolean \| string` | Ei | `false` | Toista soittoääni yhdistämisen aikana. Käytä `true` oletussoittoäänelle tai URL-merkkijonoa mukautetulle äänelle. | *** ## Siivous `ThunderPhone.mount()` palauttaa widget-instanssin, jossa on siivousmenetelmät: ```html theme={null} ``` Sekä `unmount()` että `destroy()` tekevät saman asian -- ne katkaisevat aktiivisen puheistunnon ja poistavat widgetin DOM:sta. Käytä koodissasi sitä, joka on luettavampi. Siivoa widget aina, kun siirryt pois yksisivusovelluksessa tai kun sen sisältävä elementti poistetaan. Näin varmistat, että aktiiviset puheistunnot katkaistaan oikein. *** ## Esimerkit ### Tumma teema mukautetulla värillä ```html theme={null}

``` ### Mukautettu sijainti ```html theme={null}

``` ### Tapahtumakutsuilla ```html theme={null}

``` ### Soittoäänellä ```html theme={null}

``` ### DOM-elementtiviittauksen käyttäminen ```html theme={null}

``` ### WordPress- / CMS-integraatio Lisää tämä mukautettuun HTML-lohkoon tai teemasi alatunnisteeseen: ```html theme={null} ``` `

` voi olla missä tahansa -- se on vain kiinnityskohta. Widget itse renderöityy kiinteänä peittokuvana näkymän kulmaan (`position`-asetuksen määrittämänä), eikä se mukaudu ympäröivän sisällön sijoitteluun. *** ## Vianmääritys Varmista, että sekä CSS- että JS-tiedostot on ladattu. Tarkista selaimen konsolista verkkovirheet. Varmista, että kohde-elementti on DOM:ssa ennen kuin kutsut `ThunderPhone.mount()`. Skriptiä ei ole vielä ladattu. Varmista, että `widget.js`-tiedoston `