--- title: "CDN / Značka scriptu" description: "Pridajte hlasový widget ThunderPhone na ľubovoľnú webovú stránku bez bundlera" --- Verzia CDN interne obsahuje React, takže widget môžete použiť na statických stránkach, vo WordPress, Webflow alebo na akejkoľvek stránke, na ktorú môžete pridať HTML. Nevyžaduje sa npm, bundler ani framework. ## Adresy URL CDN ```html Latest (recommended) ``` ```html Pinned version ``` Adresy URL `latest` vytvára generátor úryvkov na vloženie na ovládacom paneli. Sú ukladané do vyrovnávacej pamäte na 5 minút a automaticky preberajú nové stabilné vydania. Pripnuté cesty `/widget/vX.Y.Z/` sú nemenné a ukladajú sa do vyrovnávacej pamäte dlhodobo -- ak používate pripnutú verziu, zosúlaďte ju s vydaním npm `@thunderphone/widget`, pre ktoré vyvíjate. --- ## Základné použitie ```html

``` Widget sa pripojí do cieľového prvku a vykreslí sa ako **panel s pevnou pozíciou v rohu zobrazovacej oblasti** (predvolene `bottom-right`, ovládané voľbou `position`). Prvok pripojenia je iba koreň Reactu -- jeho umiestnenie na stránke nemá vplyv na to, kde sa widget zobrazí. --- ## Možnosti pripojenia `ThunderPhone.mount()` prijíma rovnaké možnosti ako komponent Reactu a navyše vlastnosť `element`: | Možnosť | Typ | Povinné | Predvolené | Popis | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Áno | -- | Selektor CSS (napr. `'#thunderphone'`) alebo referencia na prvok DOM. | | `publishableKey` | `string` | Áno | -- | Verejný kľúč API (`pk_live_...`). Agent sa automaticky určí z konfigurácie widgetu kľúča. | | `theme` | `'light' \| 'dark'` | Nie | `'light'` | Farebná schéma. | | `primaryColor` | `string` | Nie | `'#000000'` (svetlá) / `'#ffffff'` (tmavá) | Reťazec farby CSS použitý ako farba akcentu. | | `title` | `string` | Nie | `'Voice assistant'` | Text zobrazený na paneli widgetu. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nie | `'bottom-right'` | Pevná pozícia v zobrazovacej oblasti. | | `apiBase` | `string` | Nie | `'https://api.thunderphone.com/v1'` | Prepísanie základnej adresy URL API. | | `language` | `string` | Nie | -- | Prepísanie jazyka pre reláciu -- kód jazyka alebo lokálne nastavenie, napríklad `en`, `es` alebo `fr-FR`. Keď nie je nastavené, použije sa nakonfigurovaný jazyk agenta. | | `voice` | `string` | Nie | -- | Prepísanie hlasu pre reláciu -- názov hlasu, napríklad `maria`. Keď nie je nastavené, použije sa nakonfigurovaný hlas agenta. | | `context` | `string` | Nie | -- | Kontext faktických informácií o stránke alebo webe pre reláciu odovzdaný agentovi. Na strane servera sa skráti na 12 000 znakov. | | `onConnect` | `() => void` | Nie | -- | Zavolá sa po pripojení hlasovej relácie. | | `onDisconnect` | `() => void` | Nie | -- | Zavolá sa po ukončení relácie. | | `onError` | `(error) => void` | Nie | -- | Zavolá sa pri chybách. Chyba obsahuje polia `error` (kód) a `message`. | | `ringtone` | `boolean \| string` | Nie | `false` | Počas pripájania prehrá vyzváňací tón. Hodnota `true` použije predvolený vyzváňací tón alebo reťazec URL pre vlastný zvuk. | --- ## Vyčistenie `ThunderPhone.mount()` vracia inštanciu widgetu s metódami na vyčistenie: ```html ``` Funkcie `unmount()` aj `destroy()` robia to isté – odpoja všetky aktívne hlasové relácie a odstránia widget z DOM. Použite tú, ktorá sa vo vašom kóde číta lepšie. Widget vždy vyčistite pri navigácii preč v jednostránkových aplikáciách alebo pri odstránení obsahujúceho prvku. Tým zabezpečíte správne odpojenie aktívnych hlasových relácií. --- ## Príklady ### Tmavá téma s vlastnou farbou ```html

``` ### Vlastná pozícia ```html

``` ### S spätnými volaniami udalostí ```html

``` ### So zvonením ```html

``` ### Použitie odkazu na prvok DOM ```html

``` ### Integrácia s WordPressom / CMS Pridajte tento kód do bloku Vlastné HTML alebo do päty svojej témy: ```html ``` Prvok `

` môže byť kdekoľvek – slúži iba ako bod pripojenia. Samotný widget sa vykresľuje ako pevná prekrytá vrstva v rohu zobrazovacej oblasti (nastavenom pomocou možnosti `position`) a neovplyvňuje tok okolitého obsahu. --- ## Riešenie problémov Uistite sa, že sú načítané súbory CSS aj JS. Skontrolujte konzolu prehliadača, či neobsahuje sieťové chyby. Overte, že cieľový prvok existuje v DOM pred volaním `ThunderPhone.mount()`. Skript sa ešte nenačítal. Uistite sa, že značka `