--- title: "CDN / Oznaka skripta" description: "Dodajte glasovni pripomoček ThunderPhone na katero koli spletno mesto brez združevalnika" --- Različica CDN interno vključuje React, zato lahko gradnik uporabljate na statičnih spletnih mestih, v WordPressu, Webflowu ali na kateri koli strani, kamor lahko dodate HTML. npm, združevalnik ali ogrodje niso potrebni. ## URL-ji CDN ```html Latest (recommended) ``` ```html Pinned version ``` URL-ji `latest` so tisti, ki jih ustvari generator izrezka za vdelavo na nadzorni plošči. Predpomnjeni so 5 minut in samodejno prevzamejo nove stabilne izdaje. Pripete poti `/widget/vX.Y.Z/` so nespremenljive in dolgoročno predpomnjene -- če pripnete različico, jo uskladite z izdajo npm `@thunderphone/widget`, za katero razvijate. --- ## Osnovna uporaba ```html
``` Gradnik se priključi v ciljni element in se izriše kot **vrstica s fiksnim položajem v kotu vidnega polja** (privzeto `bottom-right`, nadzorovano z možnostjo `position`). Element priklopa je le koren React -- njegov položaj na strani ne vpliva na to, kje se gradnik prikaže. --- ## Možnosti priklopa `ThunderPhone.mount()` sprejme enake možnosti kot komponenta React ter lastnost `element`: | Možnost | Vrsta | Obvezno | Privzeto | Opis | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Da | -- | Izbirnik CSS (npr. `'#thunderphone'`) ali sklic na element DOM. | | `publishableKey` | `string` | Da | -- | Javni ključ API (`pk_live_...`). Glasovni agent se samodejno določi iz konfiguracije gradnika ključa. | | `theme` | `'light' \| 'dark'` | Ne | `'light'` | Barvna shema. | | `primaryColor` | `string` | Ne | `'#000000'` (svetla) / `'#ffffff'` (temna) | Niz barve CSS, uporabljen kot poudarjena barva. | | `title` | `string` | Ne | `'Voice assistant'` | Besedilo, prikazano v vrstici gradnika. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Ne | `'bottom-right'` | Fiksni položaj v vidnem polju. | | `apiBase` | `string` | Ne | `'https://api.thunderphone.com/v1'` | Preglasitev osnovnega URL-ja API. | | `language` | `string` | Ne | -- | Preglasitev jezika za posamezno sejo -- jezikovna koda ali območna nastavitev, kot so `en`, `es` ali `fr-FR`. Če ni nastavljena, se uporabi konfigurirani jezik agenta. | | `voice` | `string` | Ne | -- | Preglasitev glasu za posamezno sejo -- ime glasu, kot je `maria`. Če ni nastavljeno, se uporabi konfigurirani glas agenta. | | `context` | `string` | Ne | -- | Dejanski kontekst strani ali spletnega mesta za posamezno sejo, posredovan agentu. Na strežniški strani je skrajšan na 12.000 znakov. | | `onConnect` | `() => void` | Ne | -- | Pokliče se, ko se glasovna seja poveže. | | `onDisconnect` | `() => void` | Ne | -- | Pokliče se, ko se seja konča. | | `onError` | `(error) => void` | Ne | -- | Pokliče se ob napakah. Napaka ima polji `error` (koda) in `message`. | | `ringtone` | `boolean \| string` | Ne | `false` | Med povezovanjem predvaja melodijo zvonjenja. `true` za privzeto melodijo zvonjenja ali niz URL za zvok po meri. | --- ## Čiščenje `ThunderPhone.mount()` vrne primerek pripomočka z metodami za čiščenje: ```html ``` `unmount()` in `destroy()` naredita isto – prekineta vsako aktivno glasovno sejo in odstranita pripomoček iz DOM-a. Uporabite tisto, ki se bolje bere v vaši kodi. Pri prehodu stran v enostranskih aplikacijah ali ob odstranitvi vsebujočega elementa vedno počistite pripomoček. Tako zagotovite, da so aktivne glasovne seje pravilno prekinjene. --- ## Primeri ### Temna tema z barvo po meri ```html
``` ### Položaj po meri ```html
``` ### S povratnimi klici dogodkov ```html
``` ### Z zvonjenjem ```html
``` ### Z uporabo sklica na element DOM ```html
``` ### Integracija z WordPressom / CMS-jem To dodajte v blok HTML po meri ali v nogo svoje teme: ```html
``` `
` lahko postavite kamor koli – služi le kot točka vpetja. Sam pripomoček se prikaže kot fiksni prekrivni element v kotu vidnega polja (določenem z možnostjo `position`) in se ne prilagaja okoliški vsebini. --- ## Odpravljanje težav Prepričajte se, da sta naloženi datoteki CSS in JS. V konzoli brskalnika preverite omrežne napake. Pred klicem `ThunderPhone.mount()` preverite, ali ciljni element obstaja v DOM-u. Skript še ni naložen. Prepričajte se, da je oznaka `