--- title: "CDN / znacznik skryptu" description: "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) ``` ```html Pinned version ``` 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

``` 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 | Wymagane | 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 akcentujący. | | `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'` | Nadpisanie bazowego adresu URL API. | | `language` | `string` | Nie | -- | Nadpisanie języka dla sesji -- kod języka lub ustawienia regionalne, takie jak `en`, `es` lub `fr-FR`. Jeśli nie ustawiono, stosowany jest skonfigurowany język agenta. Wymaga `language` w sekcji [nadpisań przeglądarki](/pl/guides/embed-web-widget) klucza. | | `voice` | `string` | Nie | -- | Nadpisanie głosu dla sesji -- nazwa głosu, taka jak `maria`. Jeśli nie ustawiono, stosowany jest skonfigurowany głos agenta. Wymaga `voice` w sekcji [nadpisań przeglądarki](/pl/guides/embed-web-widget) klucza. | | `context` | `string` | Nie | -- | Kontekst faktyczny strony lub witryny dla sesji przekazywany agentowi. Skracany po stronie serwera do 12 000 znaków. Wymaga `context` w sekcji [nadpisań przeglądarki](/pl/guides/embed-web-widget) klucza. | | `onConnect` | `() => void` | Nie | -- | Wywoływane po nawiązaniu połączenia 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` oznacza domyślny dzwonek, a ciąg URL -- niestandardowy dźwięk. | --- ## Czyszczenie `ThunderPhone.mount()` zwraca instancję widżetu z metodami czyszczenia: ```html ``` 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

``` ### Niestandardowa pozycja ```html

``` ### Z wywołaniami zwrotnymi zdarzeń ```html

``` ### Z dzwonkiem ```html

``` ### Użycie referencji do elementu DOM ```html

``` ### Integracja z WordPress / CMS Dodaj to do bloku niestandardowego HTML lub stopki motywu: ```html ``` 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 `