--- 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`. Када није постављено, примењује се конфигурисани језик агента. | | `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()`. Скрипта још није учитана. Уверите се да се ознака `