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

``` 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: | Vaihtoehto | 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'` | Widgetin 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-perusosoitteen ohitus. | | `language` | `string` | Ei | -- | Istuntokohtainen kieliohitus -- kielikoodi tai maa-asetus, kuten `en`, `es` tai `fr-FR`. Jos sitä ei aseteta, käytetään agentin määritettyä kieltä. Edellyttää `language`-asetusta avaimen [selainohituksissa](/fi/guides/embed-web-widget). | | `voice` | `string` | Ei | -- | Istuntokohtainen äänen ohitus -- äänen nimi, kuten `maria`. Jos sitä ei aseteta, käytetään agentin määritettyä ääntä. Edellyttää `voice`-asetusta avaimen [selainohituksissa](/fi/guides/embed-web-widget). | | `context` | `string` | Ei | -- | Agentille välitettävä istuntokohtainen sivun tai sivuston faktapohjainen konteksti. Katkaistaan palvelinpuolella 12 000 merkkiin. Edellyttää `context`-asetusta avaimen [selainohituksissa](/fi/guides/embed-web-widget). | | `onConnect` | `() => void` | Ei | -- | Kutsutaan, kun puheistunto yhdistyy. | | `onDisconnect` | `() => void` | Ei | -- | Kutsutaan, kun istunto päättyy. | | `onError` | `(error) => void` | Ei | -- | Kutsutaan virheissä. Virheellä on `error`- (koodi) ja `message`-kentät. | | `ringtone` | `boolean \| string` | Ei | `false` | Toista soittoääni yhdistämisen aikana. `true` käyttää oletussoittoääntä, tai anna mukautettua ääntä varten URL-merkkijono. | --- ## Siivous `ThunderPhone.mount()` palauttaa widget-instanssin, jossa on siivousmenetelmät: ```html ``` 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

``` ### Mukautettu sijainti ```html

``` ### Tapahtumakutsuilla ```html

``` ### Soittoäänellä ```html

``` ### DOM-elementtiviittauksen käyttäminen ```html

``` ### WordPress- / CMS-integraatio Lisää tämä mukautettuun HTML-lohkoon tai teemasi alatunnisteeseen: ```html ``` `

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