--- title: "CDN / oznaka skripte" description: "Dodajte glasovni widget ThunderPhone na bilo koje web-mjesto bez alata za paketiranje" --- CDN izgradnja interno uključuje React, pa widget možete upotrebljavati na statičkim stranicama, u WordPressu, Webflowu ili na bilo kojoj stranici na koju možete dodati HTML. Nisu potrebni npm, alat za grupiranje ni radni okvir. ## CDN URL-ovi ```html Latest (recommended) ``` ```html Pinned version ``` URL-ovi `latest` ono su što generira isječak za ugradnju na nadzornoj ploči. Spremaju se u predmemoriju 5 minuta i automatski preuzimaju nova stabilna izdanja. Prikvačene putanje `/widget/vX.Y.Z/` nepromjenjive su i dugoročno se spremaju u predmemoriju -- ako prikvačite verziju, uskladite je s izdanjem npm paketa `@thunderphone/widget` prema kojem razvijate. --- ## Osnovna upotreba ```html
``` Widget se montira u ciljni element i prikazuje kao **traka s fiksnim položajem u kutu prikaza** (zadano `bottom-right`, kontrolira se opcijom `position`). Element za montiranje samo je korijenski element Reacta -- njegov položaj na stranici ne utječe na mjesto prikaza widgeta. --- ## Opcije montiranja `ThunderPhone.mount()` prihvaća iste opcije kao komponenta Reacta, uz svojstvo `element`: | Opcija | Vrsta | Obavezno | Zadano | Opis | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Da | -- | CSS selektor (npr. `'#thunderphone'`) ili referenca na DOM element. | | `publishableKey` | `string` | Da | -- | Javni API ključ (`pk_live_...`). Agent se automatski određuje iz konfiguracije widgeta ključa. | | `theme` | `'light' \| 'dark'` | Ne | `'light'` | Shema boja. | | `primaryColor` | `string` | Ne | `'#000000'` (svijetla) / `'#ffffff'` (tamna) | CSS niz boje koji se upotrebljava kao naglasna boja. | | `title` | `string` | Ne | `'Voice assistant'` | Tekst prikazan na traci widgeta. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Ne | `'bottom-right'` | Fiksni položaj u prikazu. | | `apiBase` | `string` | Ne | `'https://api.thunderphone.com/v1'` | Nadjačavanje osnovnog URL-a API-ja. | | `language` | `string` | Ne | -- | Nadjačavanje jezika po sesiji -- jezični kôd ili regionalna postavka, poput `en`, `es` ili `fr-FR`. Kada nije postavljeno, primjenjuje se konfigurirani jezik agenta. | | `voice` | `string` | Ne | -- | Nadjačavanje glasa po sesiji -- naziv glasa, poput `maria`. Kada nije postavljeno, primjenjuje se konfigurirani glas agenta. | | `context` | `string` | Ne | -- | Činjenični kontekst stranice ili web-mjesta po sesiji koji se prosljeđuje agentu. Na strani poslužitelja skraćuje se na 12.000 znakova. | | `onConnect` | `() => void` | Ne | -- | Poziva se kada se poveže glasovna sesija. | | `onDisconnect` | `() => void` | Ne | -- | Poziva se kada sesija završi. | | `onError` | `(error) => void` | Ne | -- | Poziva se pri pogreškama. Pogreška ima polja `error` (kôd) i `message`. | | `ringtone` | `boolean \| string` | Ne | `false` | Reproducirajte melodiju zvona tijekom povezivanja. `true` za zadanu melodiju zvona ili URL niz za prilagođeni zvuk. | --- ## Čišćenje `ThunderPhone.mount()` vraća instancu widgeta s metodama za čišćenje: ```html ``` `unmount()` i `destroy()` rade isto -- prekidaju svaku aktivnu glasovnu sesiju i uklanjaju widget iz DOM-a. Upotrijebite onu koja se bolje uklapa u vaš kôd. Uvijek očistite widget pri napuštanju stranice u jednostraničnim aplikacijama ili kada se ukloni sadržavajući element. Time se osigurava pravilno prekidanje aktivnih glasovnih sesija. --- ## Primjeri ### Tamna tema s prilagođenom bojom ```html
``` ### Prilagođeni položaj ```html
``` ### S povratnim pozivima događaja ```html
``` ### S melodijom zvona ```html
``` ### Upotreba reference elementa DOM-a ```html
``` ### Integracija s WordPressom / CMS-om Dodajte ovo u blok Prilagođeni HTML ili podnožje svoje teme: ```html
``` `
` može biti bilo gdje -- služi samo kao točka montiranja. Sam widget prikazuje se kao fiksni sloj u kutu prikaza (određen opcijom `position`) i ne prati okolni sadržaj. --- ## Rješavanje problema Provjerite jesu li učitane i CSS i JS datoteke. Provjerite postoje li mrežne pogreške u konzoli preglednika. Provjerite postoji li ciljni element u DOM-u prije pozivanja `ThunderPhone.mount()`. Skripta se još nije učitala. Provjerite pojavljuje li se oznaka `