> ## 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 / značka script > Přidejte hlasový widget ThunderPhone na libovolný web bez bundleru Sestavení CDN interně obsahuje React, takže widget můžete použít na statických webech, ve WordPressu, ve Webflow nebo na jakékoli stránce, kam můžete přidat HTML. Není potřeba npm, bundler ani framework. ## Adresy URL CDN ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` Adresy URL `latest` vytváří generátor vloženého úryvku v dashboardu. Ukládají se do mezipaměti na 5 minut a automaticky přebírají nová stabilní vydání. Připnuté cesty `/widget/vX.Y.Z/` jsou neměnné a ukládají se do mezipaměti dlouhodobě -- pokud verzi připnete, musí odpovídat vydání npm balíčku `@thunderphone/widget`, pro které vyvíjíte. *** ## Základní použití ```html theme={null}

``` Widget se připojí do cílového prvku a vykreslí se jako **panel s pevnou pozicí v rohu výřezu** (ve výchozím nastavení `bottom-right`, řízeno volbou `position`). Prvek připojení je pouze kořen Reactu -- jeho umístění na stránce nemá vliv na to, kde se widget zobrazí. *** ## Možnosti připojení `ThunderPhone.mount()` přijímá stejné možnosti jako komponenta React plus vlastnost `element`: | Možnost | Typ | Povinné | Výchozí hodnota | Popis | | ---------------- | -------------------------------------------------------------- | ------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `element` | `string \| HTMLElement` | Ano | -- | Selektor CSS (např. `'#thunderphone'`) nebo odkaz na prvek DOM. | | `publishableKey` | `string` | Ano | -- | Publikovatelný klíč API (`pk_live_...`). Hlasový agent se automaticky určí z konfigurace widgetu klíče. | | `theme` | `'light' \| 'dark'` | Ne | `'light'` | Barevné schéma. | | `primaryColor` | `string` | Ne | `'#000000'` (světlé) / `'#ffffff'` (tmavé) | Řetězec barvy CSS použitý jako zvýrazňující barva. | | `title` | `string` | Ne | `'Voice assistant'` | Text zobrazený v panelu widgetu. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Ne | `'bottom-right'` | Pevná pozice ve výřezu. | | `apiBase` | `string` | Ne | `'https://api.thunderphone.com/v1'` | Přepsání základní adresy URL API. | | `language` | `string` | Ne | -- | Přepsání jazyka pro relaci -- kód jazyka nebo národní prostředí, například `en`, `es` nebo `fr-FR`. Pokud není nastaveno, použije se nakonfigurovaný jazyk agenta. | | `voice` | `string` | Ne | -- | Přepsání hlasu pro relaci -- název hlasu, například `maria`. Pokud není nastaveno, použije se nakonfigurovaný hlas agenta. | | `context` | `string` | Ne | -- | Faktický kontext stránky nebo webu pro relaci předaný agentovi. Na straně serveru se zkrátí na 12 000 znaků. | | `onConnect` | `() => void` | Ne | -- | Volá se při připojení hlasové relace. | | `onDisconnect` | `() => void` | Ne | -- | Volá se po ukončení relace. | | `onError` | `(error) => void` | Ne | -- | Volá se při chybách. Chyba obsahuje pole `error` (kód) a `message`. | | `ringtone` | `boolean \| string` | Ne | `false` | Při připojování přehraje vyzváněcí tón. `true` použije výchozí vyzváněcí tón nebo řetězec URL pro vlastní zvuk. | *** ## Vyčištění `ThunderPhone.mount()` vrací instanci widgetu s metodami pro vyčištění: ```html theme={null} ``` Metody `unmount()` a `destroy()` provádějí totéž -- odpojí všechny aktivní hlasové relace a odstraní widget z DOM. Použijte tu, která se ve vašem kódu čte lépe. Widget vždy vyčistěte při navigaci pryč v jednostránkových aplikacích nebo při odstranění obsahujícího prvku. Tím zajistíte správné odpojení aktivních hlasových relací. *** ## Příklady ### Tmavý motiv s vlastní barvou ```html theme={null}

``` ### Vlastní pozice ```html theme={null}

``` ### S obslužnými funkcemi událostí ```html theme={null}

``` ### S vyzváněním ```html theme={null}

``` ### Použití odkazu na prvek DOM ```html theme={null}

``` ### Integrace s WordPress / CMS Přidejte toto do bloku vlastního HTML nebo do zápatí motivu: ```html theme={null} ``` Prvek `

` může být kdekoli -- slouží pouze jako bod připojení. Samotný widget se vykresluje jako pevné překrytí v rohu výřezu (nastaveném možností `position`) a neřídí se tokem okolního obsahu. *** ## Řešení potíží Ujistěte se, že jsou načteny soubory CSS i JS. V konzoli prohlížeče zkontrolujte chyby sítě. Před voláním `ThunderPhone.mount()` ověřte, že cílový prvek existuje v DOM. Skript se ještě nenačetl. Ujistěte se, že značka `