> ## 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 / тег скрипту > Додайте голосовий віджет ThunderPhone на будь-який вебсайт без збирача CDN-збірка містить React усередині, тому ви можете використовувати віджет на статичних сайтах, WordPress, Webflow або будь-якій сторінці, де можна додати HTML. Не потрібні ні npm, ні бандлер, ні фреймворк. ## CDN URL-адреси ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` URL-адреси `latest` генерує генератор коду для вбудовування в дашборді. Вони кешуються на 5 хвилин і автоматично отримують нові стабільні релізи. Закріплені шляхи `/widget/vX.Y.Z/` є незмінними та кешуються довгостроково — якщо ви закріплюєте версію, вона має відповідати релізу npm `@thunderphone/widget`, з яким ви розробляєте. *** ## Базове використання ```html theme={null}

``` Віджет монтується в цільовий елемент і відображається як **панель із фіксованим положенням у куті області перегляду** (за замовчуванням `bottom-right`, керується параметром `position`). Елемент монтування — це лише кореневий елемент React; його розташування на сторінці не впливає на місце появи віджета. *** ## Параметри монтування `ThunderPhone.mount()` приймає ті самі параметри, що й компонент React, а також властивість `element`: | Параметр | Тип | Обов’язково | За замовчуванням | Опис | | ---------------- | -------------------------------------------------------------- | ----------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Так | -- | CSS-селектор (наприклад, `'#thunderphone'`) або посилання на DOM-елемент. | | `publishableKey` | `string` | Так | -- | Публічний API-ключ (`pk_live_...`). Агент автоматично визначається з конфігурації віджета ключа. | | `theme` | `'light' \| 'dark'` | Ні | `'light'` | Колірна схема. | | `primaryColor` | `string` | Ні | `'#000000'` (світла) / `'#ffffff'` (темна) | Рядок кольору CSS, що використовується як акцентний колір. | | `title` | `string` | Ні | `'Voice assistant'` | Текст, що відображається на панелі віджета. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Ні | `'bottom-right'` | Фіксоване положення в області перегляду. | | `apiBase` | `string` | Ні | `'https://api.thunderphone.com/v1'` | Перевизначення базової URL-адреси API. | | `language` | `string` | Ні | -- | Перевизначення мови для сеансу — код мови або локаль, наприклад `en`, `es` чи `fr-FR`. Якщо не задано, застосовується налаштована мова агента. | | `voice` | `string` | Ні | -- | Перевизначення голосу для сеансу — назва голосу, наприклад `maria`. Якщо не задано, застосовується налаштований голос агента. | | `context` | `string` | Ні | -- | Фактичний контекст сторінки або сайту для сеансу, що передається агенту. На сервері скорочується до 12 000 символів. | | `onConnect` | `() => void` | Ні | -- | Викликається, коли голосовий сеанс підключається. | | `onDisconnect` | `() => void` | Ні | -- | Викликається, коли сеанс завершується. | | `onError` | `(error) => void` | Ні | -- | Викликається у разі помилок. Об’єкт помилки має поля `error` (код) і `message`. | | `ringtone` | `boolean \| string` | Ні | `false` | Відтворювати мелодію виклику під час підключення. `true` для мелодії за замовчуванням або URL-рядок для власного аудіо. | *** ## Очищення `ThunderPhone.mount()` повертає екземпляр віджета з методами очищення: ```html theme={null} ``` `unmount()` і `destroy()` виконують те саме -- вони відключають будь-який активний голосовий сеанс і видаляють віджет із DOM. Використовуйте той варіант, який краще читається у вашому коді. Завжди очищуйте віджет під час переходу зі сторінки в односторінкових застосунках або коли видаляється елемент-контейнер. Це гарантує належне відключення активних голосових сеансів. *** ## Приклади ### Темна тема з власним кольором ```html theme={null}

``` ### Власне розташування ```html theme={null}

``` ### Зі зворотними викликами подій ```html theme={null}

``` ### З мелодією дзвінка ```html theme={null}

``` ### Використання посилання на DOM-елемент ```html theme={null}

``` ### Інтеграція з WordPress / CMS Додайте це до блоку «Власний HTML» або нижнього колонтитула вашої теми: ```html theme={null} ``` `

` можна розмістити будь-де -- це лише точка монтування. Сам віджет відображається як фіксоване накладання в куті області перегляду (задається параметром `position`) і не залежить від навколишнього вмісту. *** ## Усунення несправностей Переконайтеся, що завантажено файли CSS і JS. Перевірте консоль браузера на наявність мережевих помилок. Переконайтеся, що цільовий елемент існує в DOM перед викликом `ThunderPhone.mount()`. Скрипт ще не завантажився. Переконайтеся, що тег `