---
title: "Crea un widget web nella dashboard"
description: "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 scelto 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 connessi, 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">
    È richiesto almeno un dominio e i browser possono avviare sessioni solo
    dagli hostname elencati. Sono consentiti caratteri jolly per sottodomini come
    `*.example.com` (corrispondono ai sottodomini, non al dominio senza sottodominio);
    i caratteri jolly senza dominio come `*` vengono rifiutati. L'elenco impedisce il riutilizzo
    occasionale della tua chiave su altri siti, ma non è un metodo di autenticazione: un copione
    esterno a un browser può inviare qualsiasi intestazione `Origin`. `localhost` non è
    consentito automaticamente in produzione; aggiungilo all'elenco per eseguire test
    locali con l'API di produzione.
  </Step>
  <Step title="Scegli le sostituzioni del browser">
    Seleziona ogni impostazione di sessione inviata dalla tua pagina: **Contesto pagina**,
    **Variabili**, **Voce**, **Lingua**. I nuovi widget non ne accettano nessuna e
    una richiesta di sessione che include un'impostazione disattivata non riesce con `400`.
    La tua chiave è pubblica, quindi consenti solo ciò che utilizzi. Consulta
    [Sostituzioni del browser](/it/guides/embed-web-widget).
  </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>