> ## 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 / znacznik skryptu > Dodaj widżet głosowy ThunderPhone do dowolnej witryny bez bundlera Kompilacja CDN wewnętrznie zawiera React, więc możesz używać widżetu w witrynach statycznych, WordPressie, Webflow lub na dowolnej stronie, na której możesz dodać kod HTML. Nie wymaga npm, bundlera ani frameworka. ## Adresy URL CDN ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` Adresy URL `latest` są generowane przez generator fragmentów osadzania w panelu. Są buforowane przez 5 minut i automatycznie uwzględniają nowe stabilne wersje. Przypięte ścieżki `/widget/vX.Y.Z/` są niezmienne i buforowane długoterminowo — jeśli przypinasz wersję, dopasuj ją do wydania npm `@thunderphone/widget`, względem którego tworzysz aplikację. *** ## Podstawowe użycie ```html theme={null}

``` Widżet jest montowany w elemencie docelowym i renderowany jako **pasek o stałej pozycji w rogu obszaru widoku** (domyślnie `bottom-right`, sterowane opcją `position`). Element montowania jest jedynie korzeniem React — jego położenie na stronie nie wpływa na miejsce wyświetlania widżetu. *** ## Opcje montowania `ThunderPhone.mount()` przyjmuje te same opcje co komponent React oraz właściwość `element`: | Opcja | Typ | Wymagana | Domyślnie | Opis | | ---------------- | -------------------------------------------------------------- | -------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Tak | -- | Selektor CSS (np. `'#thunderphone'`) lub referencja do elementu DOM. | | `publishableKey` | `string` | Tak | -- | Publiczny klucz API (`pk_live_...`). Agent jest automatycznie określany na podstawie konfiguracji widżetu klucza. | | `theme` | `'light' \| 'dark'` | Nie | `'light'` | Schemat kolorów. | | `primaryColor` | `string` | Nie | `'#000000'` (jasny) / `'#ffffff'` (ciemny) | Ciąg koloru CSS używany jako kolor akcentu. | | `title` | `string` | Nie | `'Voice assistant'` | Tekst wyświetlany na pasku widżetu. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nie | `'bottom-right'` | Stała pozycja w obszarze widoku. | | `apiBase` | `string` | Nie | `'https://api.thunderphone.com/v1'` | Zastąpienie podstawowego adresu URL API. | | `language` | `string` | Nie | -- | Zastąpienie języka dla sesji — kod języka lub ustawienia regionalne, takie jak `en`, `es` lub `fr-FR`. Gdy nie jest ustawione, stosowany jest skonfigurowany język agenta. | | `voice` | `string` | Nie | -- | Zastąpienie głosu dla sesji — nazwa głosu, taka jak `maria`. Gdy nie jest ustawione, stosowany jest skonfigurowany głos agenta. | | `context` | `string` | Nie | -- | Faktyczny kontekst strony lub witryny dla sesji przekazywany agentowi. Po stronie serwera skracany do 12 000 znaków. | | `onConnect` | `() => void` | Nie | -- | Wywoływane po połączeniu sesji głosowej. | | `onDisconnect` | `() => void` | Nie | -- | Wywoływane po zakończeniu sesji. | | `onError` | `(error) => void` | Nie | -- | Wywoływane w przypadku błędów. Błąd zawiera pola `error` (kod) i `message`. | | `ringtone` | `boolean \| string` | Nie | `false` | Odtwarzaj dzwonek podczas łączenia. `true` dla domyślnego dzwonka lub ciąg URL dla własnego dźwięku. | *** ## Czyszczenie `ThunderPhone.mount()` zwraca instancję widżetu z metodami czyszczenia: ```html theme={null} ``` Zarówno `unmount()`, jak i `destroy()` wykonują to samo — rozłączają aktywną sesję głosową i usuwają widżet z DOM. Użyj metody, która lepiej pasuje do Twojego kodu. Zawsze czyść widżet podczas przechodzenia do innej strony w aplikacjach jednostronicowych lub gdy element zawierający widżet jest usuwany. Zapewnia to prawidłowe rozłączenie aktywnych sesji głosowych. *** ## Przykłady ### Ciemny motyw z niestandardowym kolorem ```html theme={null}

``` ### Niestandardowa pozycja ```html theme={null}

``` ### Z wywołaniami zwrotnymi zdarzeń ```html theme={null}

``` ### Z dzwonkiem ```html theme={null}

``` ### Użycie referencji do elementu DOM ```html theme={null}

``` ### Integracja z WordPress / CMS Dodaj to do bloku niestandardowego HTML lub stopki motywu: ```html theme={null} ``` Element `

` można umieścić w dowolnym miejscu — służy wyłącznie jako punkt montowania. Sam widżet jest renderowany jako stała nakładka w rogu obszaru widoku (ustawianym za pomocą opcji `position`) i nie jest układany wraz z otaczającą treścią. *** ## Rozwiązywanie problemów Upewnij się, że wczytano zarówno pliki CSS, jak i JS. Sprawdź konsolę przeglądarki pod kątem błędów sieciowych. Zweryfikuj, czy element docelowy istnieje w DOM przed wywołaniem `ThunderPhone.mount()`. Skrypt nie został jeszcze wczytany. Upewnij się, że tag `