--- title: "CDN / Etichetă de script" description: "Adăugați widgetul vocal ThunderPhone pe orice site web fără un bundler" --- Versiunea CDN include React intern, astfel încât puteți utiliza widgetul pe site-uri statice, WordPress, Webflow sau pe orice pagină în care puteți adăuga HTML. Nu sunt necesare npm, un bundler sau un framework. ## URL-uri CDN ```html Latest (recommended) ``` ```html Pinned version ``` URL-urile `latest` sunt generate de generatorul de fragmente de încorporare din tabloul de bord. Sunt stocate în cache timp de 5 minute și preiau automat versiunile stabile noi. Căile fixate `/widget/vX.Y.Z/` sunt imuabile și stocate în cache pe termen lung -- dacă fixați o versiune, potriviți-o cu versiunea npm `@thunderphone/widget` pentru care dezvoltați. --- ## Utilizare de bază ```html

``` Widgetul se montează în elementul-țintă și se afișează ca o **bară cu poziție fixă într-un colț al ferestrei de vizualizare** (implicit `bottom-right`, controlat prin opțiunea `position`). Elementul de montare este doar rădăcina React -- poziția sa în pagină nu afectează locul în care apare widgetul. --- ## Opțiuni de montare `ThunderPhone.mount()` acceptă aceleași opțiuni ca componenta React, plus proprietatea `element`: | Opțiune | Tip | Obligatoriu | Implicit | Descriere | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Da | -- | Selector CSS (de exemplu, `'#thunderphone'`) sau o referință la un element DOM. | | `publishableKey` | `string` | Da | -- | Cheie API publicabilă (`pk_live_...`). Agentul este determinat automat din configurația widgetului cheii. | | `theme` | `'light' \| 'dark'` | Nu | `'light'` | Schemă de culori. | | `primaryColor` | `string` | Nu | `'#000000'` (deschis) / `'#ffffff'` (închis) | Șir de culoare CSS utilizat ca culoare de accent. | | `title` | `string` | Nu | `'Voice assistant'` | Text afișat în bara widgetului. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nu | `'bottom-right'` | Poziție fixă în fereastra de vizualizare. | | `apiBase` | `string` | Nu | `'https://api.thunderphone.com/v1'` | Suprascrierea URL-ului de bază al API-ului. | | `language` | `string` | Nu | -- | Suprascrierea limbii pentru fiecare sesiune -- un cod de limbă sau o setare regională, precum `en`, `es` sau `fr-FR`. Dacă nu este setată, se aplică limba configurată a agentului. Necesită `language` în [suprascrierile pentru browser](/ro/guides/embed-web-widget) ale cheii. | | `voice` | `string` | Nu | -- | Suprascrierea vocii pentru fiecare sesiune -- un nume de voce, precum `maria`. Dacă nu este setată, se aplică vocea configurată a agentului. Necesită `voice` în [suprascrierile pentru browser](/ro/guides/embed-web-widget) ale cheii. | | `context` | `string` | Nu | -- | Context factual al paginii sau site-ului pentru fiecare sesiune, transmis agentului. Este trunchiat pe server la 12.000 de caractere. Necesită `context` în [suprascrierile pentru browser](/ro/guides/embed-web-widget) ale cheii. | | `onConnect` | `() => void` | Nu | -- | Apelată când sesiunea vocală se conectează. | | `onDisconnect` | `() => void` | Nu | -- | Apelată când sesiunea se încheie. | | `onError` | `(error) => void` | Nu | -- | Apelată la erori. Eroarea are câmpurile `error` (cod) și `message`. | | `ringtone` | `boolean \| string` | Nu | `false` | Redați un ton de apel în timpul conectării. `true` pentru tonul de apel implicit sau un șir URL pentru audio personalizat. | --- ## Curățare `ThunderPhone.mount()` returnează o instanță de widget cu metode de curățare: ```html ``` Atât `unmount()`, cât și `destroy()` au același efect -- deconectează orice sesiune vocală activă și elimină widgetul din DOM. Folosiți varianta care se potrivește mai bine în codul dumneavoastră. Curățați întotdeauna widgetul când navigați în afara aplicațiilor cu o singură pagină sau când elementul care îl conține este eliminat. Astfel vă asigurați că sesiunile vocale active sunt deconectate corect. --- ## Exemple ### Temă întunecată cu culoare personalizată ```html

``` ### Poziție personalizată ```html

``` ### Cu callbackuri de evenimente ```html

``` ### Cu ton de apel ```html

``` ### Utilizarea unei referințe la un element DOM ```html

``` ### Integrare WordPress / CMS Adăugați acest cod într-un bloc HTML personalizat sau în subsolul temei dumneavoastră: ```html ``` Elementul `

` poate fi plasat oriunde -- este doar punctul de montare. Widgetul propriu-zis se afișează ca o suprapunere fixă într-un colț al ferestrei de vizualizare (stabilit prin opțiunea `position`) și nu urmează fluxul conținutului din jur. --- ## Depanare Asigurați-vă că sunt încărcate atât fișierele CSS, cât și cele JS. Verificați consola browserului pentru erori de rețea. Verificați că elementul țintă există în DOM înainte de a apela `ThunderPhone.mount()`. Scriptul nu s-a încărcat încă. Asigurați-vă că eticheta `