--- title: "CDN / značka script" description: "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) ``` ```html Pinned version ``` 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

``` 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í | Popis | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Ano | -- | Selektor CSS (např. `'#thunderphone'`) nebo odkaz na prvek DOM. | | `publishableKey` | `string` | Ano | -- | Publikovatelný klíč API (`pk_live_...`). 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 barva zvýraznění. | | `title` | `string` | Ne | `'Voice assistant'` | Text zobrazený v liště 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. Vyžaduje `language` v [přepsáních prohlížeče](/cs/guides/embed-web-widget) klíče. | | `voice` | `string` | Ne | -- | Přepsání hlasu pro relaci -- název hlasu, například `maria`. Pokud není nastaveno, použije se nakonfigurovaný hlas agenta. Vyžaduje `voice` v [přepsáních prohlížeče](/cs/guides/embed-web-widget) klíče. | | `context` | `string` | Ne | -- | Faktický kontext stránky nebo webu pro relaci předaný agentovi. Na straně serveru je zkrácen na 12 000 znaků. Vyžaduje `context` v [přepsáních prohlížeče](/cs/guides/embed-web-widget) klíče. | | `onConnect` | `() => void` | Ne | -- | Volá se při připojení hlasové relace. | | `onDisconnect` | `() => void` | Ne | -- | Volá se při 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` pro 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 ``` 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

``` ### Vlastní pozice ```html

``` ### S obslužnými funkcemi událostí ```html

``` ### S vyzváněním ```html

``` ### Použití odkazu na prvek DOM ```html

``` ### Integrace s WordPress / CMS Přidejte toto do bloku vlastního HTML nebo do zápatí motivu: ```html ``` 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 `