> ## 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.

# Crea un widget web nella dashboard

> Configura un widget clicca per parlare per il tuo sito dalla pagina Widget web — non sono necessarie chiamate API.

La pagina **Web Widgets** (`/dashboard/web-widgets`) crea e gestisce
le chiavi pubblicabili che alimentano il widget vocale incorporabile di ThunderPhone.
Tutto ciò che la [versione API di questa guida](/it/guides/embed-web-widget)
fa con cURL, questa pagina lo fa con un modulo, generando inoltre il codice
di incorporamento per te.

## Crea un widget

<Steps>
  <Step title="Fai clic su Nuovo widget e scegli una modalità">
    * **Modalità agente** — il widget esegue sempre un agente selezionato
      dal menu a discesa. La configurazione più semplice.
    * **Modalità webhook** — a ogni sessione del widget, ThunderPhone chiama
      l'URL del tuo webhook e il tuo server restituisce la configurazione
      dell'agente per quel visitatore (instradamento per pagina, utenti
      autenticati, rollout). Lascia vuoto l'URL per usare il webhook predefinito
      della tua organizzazione; quando inserisci un nuovo URL puoi anche
      impostarlo come predefinito dell'organizzazione.
  </Step>

  <Step title="Elenca i domini consentiti">
    Le chiavi pubblicabili sono vincolate all'origine: è richiesto almeno un dominio
    e il widget funziona solo sui nomi host elencati. Sono consentiti caratteri
    jolly per sottodomini come `*.example.com` (corrispondono ai sottodomini,
    non al dominio principale); i caratteri jolly generici come `*` vengono rifiutati.
    `localhost` e `127.0.0.1` sono sempre consentiti, quindi lo sviluppo locale
    funziona senza doverli elencare.
  </Step>

  <Step title="Assegnagli un nome, abilitalo e crealo">
    L'interruttore **Abilita widget** controlla se la chiave accetta
    sessioni: puoi creare un widget disabilitato e attivarlo al lancio.
  </Step>
</Steps>

## Ottieni il codice di incorporamento

Subito dopo la creazione, oppure tramite il pulsante **Incorpora** di ogni riga,
una finestra di incorporamento genera codice pronto da incollare con la tua chiave
pubblicabile già compilata:

* **React** — uno snippet `<ThunderPhoneWidget />` per app con bundler.
* **Tag script** — una coppia di `<script>` CDN + foglio di stile per qualsiasi sito.

La finestra mostra anche un'anteprima delle opzioni di aspetto di base: titolo, colore
primario, posizione nell'angolo e tema chiaro/scuro, e include le tue scelte nello
snippet. Per il riferimento completo delle prop, gli hook di stile e l'opzione
headless, consulta la [documentazione dell'SDK del widget](/it/widget/overview).

<Note>
  Le chiavi pubblicabili (`pk_live_…`) sono pubbliche per progettazione e sicure da
  distribuire nel codice front-end. Copiane una in qualsiasi momento con il pulsante
  di copia nella relativa riga.
</Note>

## Gestisci i widget dall'elenco

Ogni riga si modifica direttamente:

* **Modalità / Agente** — passa dalla modalità agente a quella webhook oppure
  reindirizza l'agente con selettori in linea.
* **Domini** — aggiungi o rimuovi domini consentiti come chip.
* **Abilita/disabilita** — un interruttore per widget; i widget disabilitati smettono
  immediatamente di accettare sessioni.
* **Trasferisci all'organizzazione** — copia o sposta il widget in un'altra organizzazione
  di cui fai parte; spostandolo viene rimosso da qui.
* **Elimina** — revoca la chiave pubblicabile; il widget smette immediatamente di
  funzionare su tutti i domini. L'operazione non può essere annullata.

Le sessioni del widget vengono visualizzate nella [cronologia chiamate](/it/guides/review-calls)
con la stessa trascrizione, registrazione e valutazione delle chiamate telefoniche.

## Passaggi successivi

<CardGroup cols={2}>
  <Card title="Riferimento SDK del widget" icon="window-maximize" href="/it/widget/overview">
    Dettagli su componente React, hook headless e script CDN.
  </Card>

  <Card title="Instradamento in modalità webhook" icon="bolt" href="/it/guides/dynamic-call-config">
    Restituisci dal tuo server la configurazione dell'agente per visitatore.
  </Card>
</CardGroup>