--- title: "CDN / Szkriptcímke" description: "Adja hozzá a ThunderPhone hangalapú widgetjét bármely webhelyhez bundler nélkül" --- A CDN-verzió belsőleg tartalmazza a Reactet, ezért a widgetet statikus webhelyeken, WordPressen, Webflow-ban vagy bármely olyan oldalon használhatja, ahol HTML-t adhat hozzá. Nincs szükség npm-re, csomagolóeszközre vagy keretrendszerre. ## CDN URL-ek ```html Latest (recommended) ``` ```html Pinned version ``` A `latest` URL-eket a vezérlőpult beágyazási kódrészlet-generátora hozza létre. Ezek 5 percig gyorsítótárazódnak, és automatikusan felveszik az új stabil kiadásokat. A rögzített `/widget/vX.Y.Z/` útvonalak megváltoztathatatlanok és hosszú távon gyorsítótárazódnak -- ha rögzíti a verziót, igazítsa azt ahhoz az `@thunderphone/widget` npm-kiadáshoz, amelyhez fejleszt. --- ## Alapvető használat ```html

``` A widget a célelemen belül csatlakozik, és **a nézetablak egyik sarkában rögzített pozíciójú sávként** jelenik meg (alapértelmezés szerint `bottom-right`, a `position` beállítás vezérli). A csatlakoztatási elem csak a React gyökéreleme -- az oldalon elfoglalt helye nem befolyásolja, hol jelenik meg a widget. --- ## Csatlakoztatási beállítások A `ThunderPhone.mount()` a React-komponensével azonos beállításokat fogad el, kiegészítve az `element` tulajdonsággal: | Beállítás | Típus | Kötelező | Alapértelmezett | Leírás | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Igen | -- | CSS-szelektor (pl. `'#thunderphone'`) vagy DOM-elemre mutató hivatkozás. | | `publishableKey` | `string` | Igen | -- | Publikálható API-kulcs (`pk_live_...`). Az AI-ügynök automatikusan feloldódik a kulcs widgetkonfigurációjából. | | `theme` | `'light' \| 'dark'` | Nem | `'light'` | Színséma. | | `primaryColor` | `string` | Nem | `'#000000'` (világos) / `'#ffffff'` (sötét) | Akcentusszínként használt CSS-színkarakterlánc. | | `title` | `string` | Nem | `'Voice assistant'` | A widget sávjában megjelenő szöveg. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nem | `'bottom-right'` | Rögzített pozíció a nézetablakban. | | `apiBase` | `string` | Nem | `'https://api.thunderphone.com/v1'` | API-alap URL-jének felülírása. | | `language` | `string` | Nem | -- | Munkamenetenkénti nyelvi felülírás -- nyelvkód vagy területi beállítás, például `en`, `es` vagy `fr-FR`. Ha nincs beállítva, az AI-ügynök konfigurált nyelve érvényes. A kulcs [böngészőbeli felülírásai](/hu/guides/embed-web-widget) alatt megadott `language` szükséges hozzá. | | `voice` | `string` | Nem | -- | Munkamenetenkénti hangfelülírás -- hangnév, például `maria`. Ha nincs beállítva, az AI-ügynök konfigurált hangja érvényes. A kulcs [böngészőbeli felülírásai](/hu/guides/embed-web-widget) alatt megadott `voice` szükséges hozzá. | | `context` | `string` | Nem | -- | Az AI-ügynöknek átadott, munkamenetenkénti tényszerű oldal- vagy webhelykontextus. A szerveroldalon 12 000 karakterre csonkolva. A kulcs [böngészőbeli felülírásai](/hu/guides/embed-web-widget) alatt megadott `context` szükséges hozzá. | | `onConnect` | `() => void` | Nem | -- | A hangmunkamenet kapcsolódásakor hívódik meg. | | `onDisconnect` | `() => void` | Nem | -- | A munkamenet befejeződésekor hívódik meg. | | `onError` | `(error) => void` | Nem | -- | Hiba esetén hívódik meg. A hiba `error` (kód) és `message` mezőket tartalmaz. | | `ringtone` | `boolean \| string` | Nem | `false` | Kapcsolódás közben csengőhang lejátszása. Az alapértelmezett csengőhanghoz `true`, egyéni hanghoz pedig URL-karakterlánc használható. | --- ## Tisztítás A `ThunderPhone.mount()` egy widgetpéldányt ad vissza tisztítási metódusokkal: ```html ``` Az `unmount()` és a `destroy()` ugyanazt végzi -- bontják az aktív hangmunkamenetek kapcsolatait, és eltávolítják a widgetet a DOM-ból. Használja azt, amelyik jobban illeszkedik a kódjához. Egyoldalas alkalmazásokban navigáláskor, illetve a widgetet tartalmazó elem eltávolításakor mindig tisztítsa fel a widgetet. Ez biztosítja, hogy az aktív hangmunkamenetek kapcsolata megfelelően bontásra kerüljön. --- ## Példák ### Sötét téma egyéni színnel ```html

``` ### Egyéni pozíció ```html

``` ### Esemény-visszahívásokkal ```html

``` ### Csengőhanggal ```html

``` ### DOM-elemhivatkozás használata ```html

``` ### WordPress / CMS-integráció Adja hozzá ezt egy Egyéni HTML-blokkhoz vagy a témája láblécéhez: ```html ``` A `

` bárhová kerülhet -- ez csak a csatlakoztatási pont. Maga a widget rögzített átfedésként jelenik meg a nézetablak egyik sarkában (a `position` beállítás szerint), és nem igazodik a környező tartalom elrendezéséhez. --- ## Hibaelhárítás Győződjön meg arról, hogy a CSS- és JS-fájlok is betöltődtek. Ellenőrizze a böngészőkonzolt hálózati hibákért. Ellenőrizze, hogy a célelem létezik a DOM-ban a `ThunderPhone.mount()` meghívása előtt. A szkript még nem töltődött be. Győződjön meg arról, hogy a `widget.js`-hez tartozó `