# Widgets in het Total.js CMS: gebruik ze in een pagina en schrijf je eigen
> Hoe een widget in de HTML van een pagina verschijnt (het attribuut data-cms en zijn JSON), de onderdelen van een widgetbestand, de plaatshouder CLASS, een widget op de server renderen met exports.render en widgets installeren via de API.
Framework: cms
Product: CMS (cms@8071e48)
Language: nl
Content-SHA256: 8581fc19f849fa4803105cada6de5c00293b7f8045cbc7da5d2b6fcee18864bb
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
Een **widget** is een blok dat je in een pagina plaatst: een kop, een waarschuwing, een galerij. Het draagt zijn eigen stijl, een formulier om het in de editor te configureren en, optioneel, code die het op de server rendert. Een widget is één HTML-bestand, zoals een component van [Flow](/en/flow/write-a-component/), en het CMS bewaart het in zijn metagegevens.
## Een widget in een pagina
In de HTML van een pagina is een widget een `div` met twee attributen:
```html
```
- `data-cms` is `__`, waarbij de configuratie een JSON-object is dat met `encodeURIComponent` is geschreven. De editor schrijft het; je kunt het zelf schrijven wanneer je pagina’s genereert.
- `data-cms-id` is de identificatie van de instantie in de pagina.
Wanneer de pagina wordt geserveerd, verwijdert het CMS het attribuut `data-cms`, houdt de HTML erbinnen en voegt de stijl van elke widget van de pagina aan de head toe. Als de widget niet is geïnstalleerd, wordt zijn blok weggelaten.
## De onderdelen van een widgetbestand
| Onderdeel | Waarvoor het dient |
|---|---|
| `
Hello world
```
`opt.config` is de configuratie van de instantie, `opt.html` de HTML die in het blok stond, en `opt.id`, `opt.uid` en `opt.body` beschrijven het. `next(html, replace)` geeft de te serveren HTML; met `true` als tweede argument vervangt het het hele blok. We bewaarden dit bestand in een lokaal CMS en een pagina met `data-cms="hello__..."` en `{"text":"mundo"}` kwam eruit als `Hello MUNDO
`, met `.w-hello{color:#07c}` in de head. De officiële widget `picture` gebruikt dezelfde functie om `loading="lazy"` aan zijn afbeelding toe te voegen, en `code` om de code uit zijn instellingen af te drukken.
`exports.install` en `exports.uninstall` draaien met de database van het CMS wanneer de widget wordt toegevoegd, gewijzigd of verwijderd.
## Widgets installeren en verwijderen
De plugin *Widgets* van het beheer importeert een bestand; via de API is het `widgets_save` met `{ "html": "", "singleton": true }` (`singleton` slaat de widget over als hij al bestaat), `widgets_list`, `widgets_read`, `widgets_detail` en `widgets_remove`. Ze vereisen het recht `widgets` (zie [de beheer-API](/en/cms/the-admin-api/)). De 43 officiële widgets staan in [de widgetsrepository](/en/cms/the-widgets-repository/).