> ## Documentation Index > Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt > Use this file to discover all available pages before exploring further. # CDN / Szkriptcímke > 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) theme={null} ``` ```html Pinned version theme={null} ``` 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 theme={null}

``` 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 (például `'#thunderphone'`) vagy DOM-elemre mutató hivatkozás. | | `publishableKey` | `string` | Igen | -- | Publikálható API-kulcs (`pk_live_...`). Az ü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) | Kiemelőszínként használt CSS-színkarakterlánc. | | `title` | `string` | Nem | `'Voice assistant'` | A widgetsávban 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ülbírálása. | | `language` | `string` | Nem | -- | Munkamenetenkénti nyelvi felülbírálás -- nyelvkód vagy területi beállítás, például `en`, `es` vagy `fr-FR`. Ha nincs beállítva, az ügynök konfigurált nyelve érvényes. | | `voice` | `string` | Nem | -- | Munkamenetenkénti hangfelülbírálás -- hangnév, például `maria`. Ha nincs beállítva, az ügynök konfigurált hangja érvényes. | | `context` | `string` | Nem | -- | Az ügynöknek átadott, munkamenetenkénti tényszerű oldal- vagy webhelykontextus. A szerveroldalon 12 000 karakterre csonkolódik. | | `onConnect` | `() => void` | Nem | -- | A hangmunkamenet kapcsolódásakor hívódik meg. | | `onDisconnect` | `() => void` | Nem | -- | A munkamenet végén hívódik meg. | | `onError` | `(error) => void` | Nem | -- | Hiba esetén hívódik meg. A hiba `error` (kód) és `message` mezőkkel rendelkezik. | | `ringtone` | `boolean \| string` | Nem | `false` | Kapcsolódás közben csengőhang lejátszása. `true` az alapértelmezett csengőhanghoz, vagy URL-karakterlánc egyéni hanghoz. | *** ## Tisztítás A `ThunderPhone.mount()` egy widgetpéldányt ad vissza tisztítási metódusokkal: ```html theme={null} ``` 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 theme={null}

``` ### Egyéni pozíció ```html theme={null}

``` ### Esemény-visszahívásokkal ```html theme={null}

``` ### Csengőhanggal ```html theme={null}

``` ### DOM-elemhivatkozás használata ```html theme={null}

``` ### WordPress / CMS-integráció Adja hozzá ezt egy Egyéni HTML-blokkhoz vagy a témája láblécéhez: ```html theme={null} ``` 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ó `