--- title: "CDN / skriptisilt" description: "Lisa ThunderPhone'i häälvidin mis tahes veebisaidile ilma bundlerita" --- CDN-i build sisaldab Reacti sisemiselt, seega saad vidinat kasutada staatilistel saitidel, WordPressis, Webflow's või mis tahes lehel, kuhu saad lisada HTML-i. npm-i, bundlerit ega raamistikku pole vaja. ## CDN-i URL-id ```html Latest (recommended) ``` ```html Pinned version ``` `latest`-i URL-id loob juhtpaneeli manustuskoodi generaator. Neid vahemällu salvestatakse 5 minutiks ning need võtavad uued stabiilsed väljalasked automaatselt kasutusele. Kinnitatud `/widget/vX.Y.Z/` teed on muutumatud ja pikaajalise vahemäluga -- kui kinnitad versiooni, vii see vastavusse `@thunderphone/widget` npm-i väljalaskega, mille vastu arendad. --- ## Põhikasutus ```html

``` Vidina paigaldatakse sihtelementi ja see kuvatakse **fikseeritud asukohaga ribana vaateala nurgas** (vaikimisi `bottom-right`, mida juhib suvand `position`). Paigalduselement on ainult Reacti juurelement -- selle asukoht lehel ei mõjuta vidina kuvamiskohta. --- ## Paigaldussuvandid `ThunderPhone.mount()` aktsepteerib samu suvandeid nagu Reacti komponent ning lisaks omadust `element`: | Suvand | Tüüp | Kohustuslik | Vaikimisi | Kirjeldus | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Jah | -- | CSS-i selektor (nt `'#thunderphone'`) või DOM-i elemendi viide. | | `publishableKey` | `string` | Jah | -- | Avalik API-võti (`pk_live_...`). Häälagent määratakse võtme vidina konfiguratsiooni põhjal automaatselt. | | `theme` | `'light' \| 'dark'` | Ei | `'light'` | Värviskeem. | | `primaryColor` | `string` | Ei | `'#000000'` (hele) / `'#ffffff'` (tume) | Aktsentvärvina kasutatav CSS-i värvistring. | | `title` | `string` | Ei | `'Voice assistant'` | Vidinaribal kuvatav tekst. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Ei | `'bottom-right'` | Fikseeritud asukoht vaatealas. | | `apiBase` | `string` | Ei | `'https://api.thunderphone.com/v1'` | API baas-URL-i ülekirjutus. | | `language` | `string` | Ei | -- | Seansipõhine keele ülekirjutus -- keelekood või lokaat, näiteks `en`, `es` või `fr-FR`. Kui see pole määratud, kasutatakse häälagendi seadistatud keelt. | | `voice` | `string` | Ei | -- | Seansipõhine hääle ülekirjutus -- hääle nimi, näiteks `maria`. Kui see pole määratud, kasutatakse häälagendi seadistatud häält. | | `context` | `string` | Ei | -- | Häälagendile edastatav seansipõhine faktiline lehe või saidi kontekst. Serveris kärbitakse see 12 000 tähemärgini. | | `onConnect` | `() => void` | Ei | -- | Kutsutakse välja, kui hääleseanss ühendub. | | `onDisconnect` | `() => void` | Ei | -- | Kutsutakse välja, kui seanss lõpeb. | | `onError` | `(error) => void` | Ei | -- | Kutsutakse välja vigade korral. Vead sisaldavad välju `error` (kood) ja `message`. | | `ringtone` | `boolean \| string` | Ei | `false` | Esita ühenduse loomise ajal helinat. Vaikimisi helina jaoks kasuta `true` või kohandatud heli jaoks URL-stringi. | --- ## Puhastamine `ThunderPhone.mount()` tagastab vidina eksemplari puhastusmeetoditega: ```html ``` Nii `unmount()` kui ka `destroy()` teevad sama asja -- katkestavad aktiivse häälseansi ja eemaldavad vidina DOM-ist. Kasuta oma koodis seda, mis loetavam tundub. Puhasta vidin alati ühe lehe rakendustes teisele lehele liikudes või siis, kui seda sisaldav element eemaldatakse. See tagab, et aktiivsed häälseansid katkestatakse nõuetekohaselt. --- ## Näited ### Tume teema kohandatud värviga ```html

``` ### Kohandatud asukoht ```html

``` ### Sündmuste tagasihelistustega ```html

``` ### Helinaga ```html

``` ### DOM-elemendi viite kasutamine ```html

``` ### WordPressi / CMS-i integreerimine Lisa see kohandatud HTML-i plokki või oma teema jalusesse: ```html ``` `

` võib asuda ükskõik kus -- see on ainult ühenduspunkt. Vidin ise renderdatakse fikseeritud ülekattena vaateala nurgas (määratud suvandiga `position`) ega paigutu koos ümbritseva sisuga. --- ## Tõrkeotsing Veendu, et nii CSS- kui ka JS-failid on laaditud. Kontrolli brauseri konsoolist võrguvigu. Enne `ThunderPhone.mount()` käivitamist veendu, et sihtelement on DOM-is olemas. Skript pole veel laaditud. Veendu, et `widget.js`-i `