--- title: "CDN / тег скрипту" description: "Додайте голосовий віджет ThunderPhone на будь-який вебсайт без збирача" --- CDN-збірка містить React усередині, тому ви можете використовувати віджет на статичних сайтах, WordPress, Webflow або будь-якій сторінці, де можна додати HTML. Не потрібні ні npm, ні бандлер, ні фреймворк. ## CDN URL-адреси ```html Latest (recommended) ``` ```html Pinned version ``` URL-адреси `latest` генерує генератор коду для вбудовування в дашборді. Вони кешуються на 5 хвилин і автоматично отримують нові стабільні релізи. Закріплені шляхи `/widget/vX.Y.Z/` є незмінними та кешуються довгостроково — якщо ви закріплюєте версію, вона має відповідати релізу npm `@thunderphone/widget`, з яким ви розробляєте. --- ## Базове використання ```html

``` Віджет монтується в цільовий елемент і відображається як **панель із фіксованим положенням у куті області перегляду** (за замовчуванням `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`. Якщо не вказано, застосовується налаштована мова агента. Потребує `language` у [перевизначеннях браузера](/uk/guides/embed-web-widget) ключа. | | `voice` | `string` | Ні | -- | Перевизначення голосу для сеансу — назва голосу, наприклад `maria`. Якщо не вказано, застосовується налаштований голос агента. Потребує `voice` у [перевизначеннях браузера](/uk/guides/embed-web-widget) ключа. | | `context` | `string` | Ні | -- | Фактичний контекст сторінки або сайту для сеансу, що передається агенту. На сервері скорочується до 12 000 символів. Потребує `context` у [перевизначеннях браузера](/uk/guides/embed-web-widget) ключа. | | `onConnect` | `() => void` | Ні | -- | Викликається, коли підключається голосовий сеанс. | | `onDisconnect` | `() => void` | Ні | -- | Викликається, коли сеанс завершується. | | `onError` | `(error) => void` | Ні | -- | Викликається у разі помилок. Помилка має поля `error` (код) і `message`. | | `ringtone` | `boolean \| string` | Ні | `false` | Відтворювати мелодію виклику під час підключення. `true` для стандартної мелодії або рядок URL для власного аудіо. | --- ## Очищення `ThunderPhone.mount()` повертає екземпляр віджета з методами очищення: ```html ``` `unmount()` і `destroy()` виконують те саме -- вони відключають будь-який активний голосовий сеанс і видаляють віджет із DOM. Використовуйте той варіант, який краще читається у вашому коді. Завжди очищуйте віджет під час переходу зі сторінки в односторінкових застосунках або коли видаляється елемент-контейнер. Це гарантує належне відключення активних голосових сеансів. --- ## Приклади ### Темна тема з власним кольором ```html

``` ### Власне розташування ```html

``` ### Зі зворотними викликами подій ```html

``` ### З мелодією дзвінка ```html

``` ### Використання посилання на DOM-елемент ```html

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

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