> ## 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 / Тег script > Добавьте голосовой виджет ThunderPhone на любой сайт без сборщика Сборка CDN включает React, поэтому вы можете использовать виджет на статических сайтах, WordPress, Webflow или любой странице, где можно добавить HTML. Не нужны ни npm, ни сборщик, ни фреймворк. ## URL-адреса CDN ```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()`. Скрипт ещё не загрузился. Убедитесь, что тег `