# Widget builder > Crea il tuo widget per la live su Kick con HTML, CSS e JavaScript nel widget builder di KickBot, provalo con eventi finti e pubblicalo nella libreria. Source: https://kickbot.com/it/docs/widgets/widget-builder Con il widget builder crei il tuo overlay per la live su Kick con HTML, CSS e JavaScript. KickBot invia al tuo codice gli eventi di Kick in tempo reale (follow, sub, sub regalati, KICKs, raid, messaggi della chat e altro), quindi non devi collegarti a nessuna API. Puoi usare il widget nella tua live e puoi pubblicarlo, così altri streamer possono installarlo dalla Libreria widget. Aprilo su [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder). Il builder è per chi sa scrivere un po' di codice. Se vuoi solo un overlay pronto, usa la [Libreria widget](https://kickbot.com/it/docs/widgets/widget-library). Per il riferimento del codice (eventi, dati e impostazioni), vedi [Riferimento del widget builder](https://kickbot.com/it/docs/widgets/widget-builder-reference). ![La home del widget builder di KickBot con il pulsante Nuovo widget, un widget con l'URL nascosto e la sezione Riferimento](https://kickbot.com/docs/images/widgets/widget-builder/01-home.webp "Il widget builder elenca i tuoi widget e i loro URL per OBS.") ## Crea un nuovo widget 1. Apri [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder) e clicca **Nuovo widget**. 2. Scegli **Vuoto**, oppure parti da un modello: **Viewer Count**, **Simple Follower Goal** o **Basic Chat Widget**. Un modello copia il codice di quel widget di KickBot, così puoi modificarlo. 3. Scrivi un **Nome del widget**. Per un widget vuoto, imposta anche **Larghezza** e **Altezza** in pixel (800 × 600 come valore predefinito). 4. Clicca **Crea widget**. Si apre l'editor. ![La finestra Nuovo widget con Vuoto e i modelli Viewer Count e Simple Follower Goal](https://kickbot.com/docs/images/widgets/widget-builder/02-new-widget.webp "Parti da un widget vuoto o da un modello.") > **Note:** Con il piano gratuito puoi avere fino a 10 widget nel widget builder. Con Premium non ci sono limiti. I widget che installi dalla libreria non contano. ## L'editor L'editor ha tre parti: le impostazioni a sinistra, il codice al centro e un'anteprima in tempo reale a destra. ![L'editor del widget builder con Impostazioni di base e Variabili utente a sinistra, la scheda del codice HTML al centro e l'anteprima a destra](https://kickbot.com/docs/images/widgets/widget-builder/03-editor.webp "Impostazioni, codice e anteprima nell'editor del widget builder.") - **Impostazioni di base**: il nome, e la larghezza e l'altezza con cui viene mostrato il widget. - **Variabili utente**: impostazioni che gli streamer possono cambiare senza codice, come un colore, un testo o il numero di un obiettivo. Vedi [Variabili utente](https://kickbot.com/it/docs/widgets/widget-builder-reference#user-variables). - **Invia eventi di prova**: pulsanti che inviano un evento finto (Sub, Sub regalato, KICKs, Follow, Raid, Messaggio e altri) all'anteprima. - **Visibilità**: mostra se il widget è privato o pubblicato, e ha il pulsante **Pubblica widget**. - **Codice**: schede per **HTML**, **CSS** e **JavaScript**. Usa **Layout dell'editor** in alto per mostrare un file (**Singolo**) o due file insieme (**Affiancato** o **In colonna**). - **Anteprima**: mostra il widget alle sue dimensioni, adattato allo spazio disponibile. Si aggiorna mentre scrivi. Usa il pulsante di ricarica per farlo ripartire, o il pulsante per aprirlo in una finestra separata (utile per aprire la console del browser). L'editor salva da solo il tuo lavoro mentre scrivi. **Salva** salva tutto in una volta, e il testo sotto mostra quando è stato fatto l'ultimo salvataggio. **Esci** torna all'elenco dei widget. L'editor ha bisogno di uno schermo largo. Su un telefono, KickBot ti chiede di aprirlo su un computer. Il tuo widget è salvato, quindi puoi continuare da lì. ## Prova il tuo widget 1. Apri **Invia eventi di prova**. 2. Clicca un evento, per esempio **Follow** o **Messaggio**. 3. Guarda come reagisce l'anteprima. Gli eventi di prova hanno la stessa struttura degli eventi reali, con dati di esempio. Arrivano solo all'anteprima di questa pagina, mai a OBS o alla tua live. Per provare con eventi reali, aggiungi il widget a OBS e vai in live, oppure chiedi a un amico di seguire il tuo canale. ## Usa il tuo widget in live Ogni widget che crei compare anche in [Widget salvati](https://kickbot.com/dashboard/saved-widgets), con «Il tuo widget» sotto il nome. Il suo URL esegue sempre il tuo codice più recente. 1. Nella pagina del widget builder, clicca **Copia URL** sul tuo widget. 2. In OBS, aggiungi una fonte **Browser**, incolla l'URL e imposta larghezza e altezza sulle dimensioni del widget. 3. Clicca **OK**. Se cambi il codice mentre il widget è in OBS, aggiorna la fonte browser per caricare il nuovo codice. Quando cambi il valore di una variabile utente in Widget salvati e clicchi **Salva**, OBS ricarica il widget da solo. Per altro aiuto, vedi [Aggiungere un overlay di KickBot a OBS](https://kickbot.com/it/docs/getting-started/add-browser-source-obs). > **Caution:** Tieni privato l'URL. Chiunque lo abbia può mostrare il tuo widget sul suo schermo. ## Pubblica nella Libreria widget Pubblica un widget quando vuoi che altri streamer lo trovino e lo installino. 1. Nell'editor, apri **Visibilità** e clicca **Pubblica widget**. 2. Aggiungi un'**Immagine principale** e almeno un'altra immagine. Puoi aggiungere fino a 10 immagini in tutto, ognuna fino a 10 MB. Il formato ideale è 1920 × 1080. 3. Scrivi una **Descrizione**: cosa mostra il widget e come si configura. 4. Invialo. La finestra mostra **Inviato per la revisione**. Il team di KickBot controlla ogni widget. Se viene approvato, compare nella Libreria widget con il tuo nome di Kick come creatore. Di solito la revisione richiede meno di 24 ore. > **Caution:** Puoi pubblicare un widget una volta sola. Dopo, l'editor mostra «Questo widget è pubblicato. Per modificarlo, contatta il supporto.» Prova bene il tuo widget prima di pubblicarlo. ## Elimina un widget Nella pagina del widget builder, apri il menu **⋯** di un widget e clicca **Elimina**. Questo rimuove il suo codice e le sue impostazioni, e non si può annullare. ## Membri del team I membri del team hanno bisogno del permesso **Widget builder** per aprire l'editor e creare widget. Hanno bisogno di **Configura widget** per vedere gli URL dei widget. Vedi [Gestisci team](https://kickbot.com/it/docs/account/team). ## Domande frequenti **Devo saper programmare?** Sì, un po' di HTML, CSS e JavaScript. Se non scrivi codice, installa un widget dalla [Libreria widget](https://kickbot.com/it/docs/widgets/widget-library) e cambia le sue impostazioni. **Posso modificare un widget di KickBot della libreria?** Non puoi cambiare il codice di un widget della libreria. Crea un nuovo widget dal modello **Viewer Count**, **Simple Follower Goal** o **Basic Chat Widget** per avere una copia del suo codice che puoi modificare. **Il mio widget può caricare font, immagini o altri script?** Sì. HTML, CSS e JavaScript girano in una normale pagina web dentro OBS, quindi puoi collegare web font, immagini e script da altri siti. Usa le variabili utente **Immagine/GIF**, **Video** o **Audio** per permettere agli streamer di caricare i propri file. **Posso creare widget con l'API di KickBot?** Sì. L'API di KickBot può elencare, creare e aggiornare i tuoi widget. Vedi il [riferimento API dei widget](https://kickbot.com/docs/api/reference/widgets).