--- title: "CDN / scenarijaus žyma" description: "Pridėkite ThunderPhone balso valdiklį prie bet kurios svetainės nenaudodami rinkinio kūrimo įrankio" --- CDN versija viduje komplektuoja React, todėl valdiklį galite naudoti statinėse svetainėse, WordPress, Webflow arba bet kuriame puslapyje, kuriame galite pridėti HTML. Nereikia nei npm, nei paketų rinkiklio, nei sistemos. ## CDN URL ```html Latest (recommended) ``` ```html Pinned version ``` `latest` URL naudoja skydelio įterpimo fragmentų generatorius. Jos saugomos talpykloje 5 minutes ir automatiškai gauna naujus stabilius leidimus. Fiksuoti `/widget/vX.Y.Z/` keliai yra nekintami ir ilgai saugomi talpykloje – jei fiksuojate versiją, suderinkite ją su `@thunderphone/widget` npm leidimu, pagal kurį kuriate. --- ## Pagrindinis naudojimas ```html

``` Valdiklis prijungiamas prie tikslinio elemento ir rodomas kaip **fiksuotos padėties juosta viename iš peržiūros srities kampų** (numatytoji padėtis – `bottom-right`, valdoma parinktimi `position`). Prijungimo elementas yra tik React šaknis – jo vieta puslapyje neturi įtakos tam, kur rodomas valdiklis. --- ## Prijungimo parinktys `ThunderPhone.mount()` priima tas pačias parinktis kaip React komponentas ir papildomą savybę `element`: | Parinktis | Tipas | Būtina | Numatytoji reikšmė | Aprašymas | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Taip | -- | CSS parinkiklis (pvz., `'#thunderphone'`) arba DOM elemento nuoroda. | | `publishableKey` | `string` | Taip | -- | Viešasis API raktas (`pk_live_...`). Agentas automatiškai nustatomas pagal rakto valdiklio konfigūraciją. | | `theme` | `'light' \| 'dark'` | Ne | `'light'` | Spalvų schema. | | `primaryColor` | `string` | Ne | `'#000000'` (šviesi) / `'#ffffff'` (tamsi) | CSS spalvos eilutė, naudojama kaip akcento spalva. | | `title` | `string` | Ne | `'Voice assistant'` | Valdiklio juostoje rodomas tekstas. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Ne | `'bottom-right'` | Fiksuota padėtis peržiūros srityje. | | `apiBase` | `string` | Ne | `'https://api.thunderphone.com/v1'` | API bazinio URL nepaisymo reikšmė. | | `language` | `string` | Ne | -- | Kalbos nepaisymo reikšmė vienai sesijai – kalbos kodas arba lokalė, pvz., `en`, `es` arba `fr-FR`. Nenustačius, taikoma sukonfigūruota agento kalba. | | `voice` | `string` | Ne | -- | Balso nepaisymo reikšmė vienai sesijai – balso pavadinimas, pvz., `maria`. Nenustačius, taikomas sukonfigūruotas agento balsas. | | `context` | `string` | Ne | -- | Faktinis puslapio arba svetainės kontekstas vienai sesijai, perduodamas agentui. Serverio pusėje sutrumpinamas iki 12 000 simbolių. | | `onConnect` | `() => void` | Ne | -- | Iškviečiama, kai prisijungiama prie balso sesijos. | | `onDisconnect` | `() => void` | Ne | -- | Iškviečiama, kai sesija baigiama. | | `onError` | `(error) => void` | Ne | -- | Iškviečiama įvykus klaidoms. Klaida turi laukus `error` (kodas) ir `message`. | | `ringtone` | `boolean \| string` | Ne | `false` | Prisijungiant leidžiamas skambėjimo tonas. `true` – numatytajam skambėjimo tonui, arba URL eilutė pasirinktiniam garsui. | --- ## Išvalymas `ThunderPhone.mount()` grąžina valdiklio egzempliorių su išvalymo metodais: ```html ``` Tiek `unmount()`, tiek `destroy()` atlieka tą patį veiksmą – atjungia bet kokį aktyvų balso seansą ir pašalina valdiklį iš DOM. Naudokite tą, kuris jūsų kode atrodo tinkamesnis. Visada išvalykite valdiklį pereidami iš vieno puslapio į kitą vieno puslapio programose arba pašalindami jį talpinantį elementą. Taip užtikrinama, kad aktyvūs balso seansai būtų tinkamai atjungti. --- ## Pavyzdžiai ### Tamsi tema su pasirinktine spalva ```html

``` ### Pasirinktinė padėtis ```html

``` ### Su įvykių atgaliniais iškvietimais ```html

``` ### Su skambėjimo tonu ```html

``` ### Naudojant DOM elemento nuorodą ```html

``` ### WordPress / CMS integracija Pridėkite tai prie pasirinktinio HTML bloko arba savo temos poraštės: ```html ``` `

` gali būti bet kur – tai tik prijungimo taškas. Pats valdiklis atvaizduojamas kaip fiksuotas persidengiantis elementas peržiūros srities kampe (nustatomame parinktimi `position`) ir nėra išdėstomas kartu su aplinkiniu turiniu. --- ## Trikčių šalinimas Įsitikinkite, kad įkelti ir CSS, ir JS failai. Naršyklės konsolėje patikrinkite, ar nėra tinklo klaidų. Prieš iškviesdami `ThunderPhone.mount()`, patikrinkite, ar tikslinis elementas yra DOM. Scenarijus dar neįkeltas. Įsitikinkite, kad `