# I widget nel CMS di Total.js: usarli in una pagina e scrivere i tuoi
> Come appare un widget nell’HTML di una pagina (l’attributo data-cms e il suo JSON), le parti di un file di widget, il segnaposto CLASS, renderizzare un widget sul server con exports.render e installare widget tramite l’API.
Framework: cms
Product: CMS (cms@8071e48)
Language: it
Content-SHA256: 2ed012cc9010fc8682cd5c390b447adf1f2e35a4130938528b20fa0e11dd5f61
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
Un **widget** è un blocco che inserisci in una pagina: un titolo, un avviso, una galleria. Porta il proprio stile, un modulo per configurarlo nell’editor e, facoltativamente, codice che lo renderizza sul server. Un widget è un file HTML, come un componente di [Flow](/en/flow/write-a-component/), e il CMS lo conserva nei suoi metadati.
## Un widget dentro una pagina
Nell’HTML di una pagina, un widget è un `div` con due attributi:
```html
```
- `data-cms` è `__`, dove la configurazione è un oggetto JSON scritto con `encodeURIComponent`. Lo scrive l’editor; puoi scriverlo tu quando generi pagine.
- `data-cms-id` è l’identificativo dell’istanza nella pagina.
Quando la pagina viene servita, il CMS rimuove l’attributo `data-cms`, conserva l’HTML che c’è dentro e aggiunge all’head lo stile di ogni widget della pagina. Se il widget non è installato, il suo blocco viene scartato.
## Le parti di un file di widget
| Parte | A cosa serve |
|---|---|
| `
Hello world
```
`opt.config` è la configurazione dell’istanza, `opt.html` l’HTML che c’era dentro il blocco, e `opt.id`, `opt.uid` e `opt.body` lo descrivono. `next(html, replace)` fornisce l’HTML da servire; con `true` come secondo argomento sostituisce l’intero blocco. Abbiamo salvato questo file in un CMS locale e una pagina con `data-cms="hello__..."` e `{"text":"mundo"}` è uscita come `Hello MUNDO
`, con `.w-hello{color:#07c}` nell’head. Il widget ufficiale `picture` usa la stessa funzione per aggiungere `loading="lazy"` alla sua immagine, e `code` per stampare il codice delle sue impostazioni.
`exports.install` e `exports.uninstall` vengono eseguiti con il database del CMS quando il widget viene aggiunto, modificato o rimosso.
## Installare e rimuovere widget
Il plugin *Widgets* dell’admin importa un file; tramite l’API è `widgets_save` con `{ "html": "", "singleton": true }` (`singleton` salta il widget se esiste già), `widgets_list`, `widgets_read`, `widgets_detail` e `widgets_remove`. Richiedono il permesso `widgets` (vedi [l’API dell’admin](/en/cms/the-admin-api/)). I 43 widget ufficiali sono in [il repository dei widget](/en/cms/the-widgets-repository/).