> ## 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 / Tag script > Aggiungi il widget vocale ThunderPhone a qualsiasi sito web senza un bundler La build CDN include React internamente, quindi puoi usare il widget su siti statici, WordPress, Webflow o qualsiasi pagina in cui puoi aggiungere HTML. Non sono necessari npm, bundler o framework. ## URL CDN ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` Gli URL `latest` sono quelli generati dal generatore di snippet di incorporamento della dashboard. Vengono memorizzati nella cache per 5 minuti e includono automaticamente le nuove release stabili. I percorsi `/widget/vX.Y.Z/` con versione fissata sono immutabili e memorizzati nella cache a lungo termine -- se fissi una versione, assicurati che corrisponda alla release npm `@thunderphone/widget` su cui sviluppi. *** ## Utilizzo di base ```html theme={null}

``` Il widget viene montato nell'elemento di destinazione e viene visualizzato come una **barra a posizione fissa in un angolo della viewport** (impostazione predefinita `bottom-right`, controllata dall'opzione `position`). L'elemento di montaggio è solo la root React -- la sua posizione nella pagina non influisce sul punto in cui appare il widget. *** ## Opzioni di montaggio `ThunderPhone.mount()` accetta le stesse opzioni del componente React, oltre alla proprietà `element`: | Opzione | Tipo | Obbligatoria | Predefinito | Descrizione | | ---------------- | -------------------------------------------------------------- | ------------ | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Sì | -- | Selettore CSS (ad es. `'#thunderphone'`) o riferimento a un elemento DOM. | | `publishableKey` | `string` | Sì | -- | Chiave API pubblicabile (`pk_live_...`). L'agente viene risolto automaticamente dalla configurazione del widget della chiave. | | `theme` | `'light' \| 'dark'` | No | `'light'` | Schema colori. | | `primaryColor` | `string` | No | `'#000000'` (chiaro) / `'#ffffff'` (scuro) | Stringa di colore CSS usata come colore di accento. | | `title` | `string` | No | `'Voice assistant'` | Testo visualizzato nella barra del widget. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | No | `'bottom-right'` | Posizione fissa nella viewport. | | `apiBase` | `string` | No | `'https://api.thunderphone.com/v1'` | Override dell'URL di base dell'API. | | `language` | `string` | No | -- | Override della lingua per sessione -- un codice lingua o una locale come `en`, `es` o `fr-FR`. Se non impostata, viene applicata la lingua configurata dell'agente. | | `voice` | `string` | No | -- | Override della voce per sessione -- un nome voce come `maria`. Se non impostata, viene applicata la voce configurata dell'agente. | | `context` | `string` | No | -- | Contesto fattuale della pagina o del sito per sessione passato all'agente. Troncato lato server a 12.000 caratteri. | | `onConnect` | `() => void` | No | -- | Chiamata quando la sessione vocale si connette. | | `onDisconnect` | `() => void` | No | -- | Chiamata quando termina la sessione. | | `onError` | `(error) => void` | No | -- | Chiamata in caso di errori. L'errore contiene i campi `error` (codice) e `message`. | | `ringtone` | `boolean \| string` | No | `false` | Riproduci una suoneria durante la connessione. `true` per la suoneria predefinita oppure una stringa URL per audio personalizzato. | *** ## Pulizia `ThunderPhone.mount()` restituisce un'istanza del widget con metodi di pulizia: ```html theme={null} ``` Sia `unmount()` sia `destroy()` eseguono la stessa operazione: disconnettono qualsiasi sessione vocale attiva e rimuovono il widget dal DOM. Usa quello che risulta più leggibile nel tuo codice. Esegui sempre la pulizia del widget quando navighi altrove nelle applicazioni a pagina singola o quando l'elemento contenitore viene rimosso. Questo garantisce che le sessioni vocali attive vengano disconnesse correttamente. *** ## Esempi ### Tema scuro con colore personalizzato ```html theme={null}

``` ### Posizione personalizzata ```html theme={null}

``` ### Con callback di evento ```html theme={null}

``` ### Con suoneria ```html theme={null}

``` ### Utilizzo di un riferimento a un elemento DOM ```html theme={null}

``` ### Integrazione WordPress / CMS Aggiungi questo a un blocco HTML personalizzato o al footer del tuo tema: ```html theme={null} ``` Il `

` può essere inserito ovunque: è solo il punto di montaggio. Il widget viene visualizzato come sovrapposizione fissa in un angolo della viewport (impostato dall'opzione `position`) e non segue il flusso del contenuto circostante. *** ## Risoluzione dei problemi Assicurati che entrambi i file CSS e JS siano caricati. Controlla la console del browser per rilevare errori di rete. Verifica che l'elemento di destinazione esista nel DOM prima di chiamare `ThunderPhone.mount()`. Lo script non è ancora stato caricato. Assicurati che il tag `