--- title: "CDN / Скриптов таг" description: "Добавете гласовата джаджа на ThunderPhone към всеки уебсайт без бандлър" --- CDN компилацията включва React вътрешно, така че можете да използвате уиджета в статични сайтове, WordPress, Webflow или всяка страница, където можете да добавяте HTML. Не са необходими npm, пакетиращ инструмент или framework. ## 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`. Когато не е зададено, се използва конфигурираният език на агента. | | `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 ``` И `unmount()`, и `destroy()` правят едно и също -- прекъсват всяка активна гласова сесия и премахват джаджата от DOM. Използвайте този, който се чете по-добре във вашия код. Винаги почиствайте джаджата при навигиране извън едностранични приложения или когато съдържащият елемент бъде премахнат. Това гарантира, че активните гласови сесии са прекъснати правилно. --- ## Примери ### Тъмна тема с персонализиран цвят ```html

``` ### Персонализирана позиция ```html

``` ### С обратни извиквания за събития ```html

``` ### С мелодия за позвъняване ```html

``` ### Използване на референция към DOM елемент ```html

``` ### Интеграция с WordPress / CMS Добавете това в блок за персонализиран HTML или във футъра на вашата тема: ```html ``` `

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