# Widgetar i Total.js CMS: använd dem på en sida och skriv egna
> Hur en widget visas i HTML för en sida (attributet data-cms och dess JSON), delarna i en widgetfil, platshållaren CLASS, att rendera en widget på servern med exports.render och att installera widgetar via API:et.
Framework: cms
Product: CMS (cms@8071e48)
Language: sv
Content-SHA256: 9f6e65f32a67683035ff90f752f2c431c28bde5648b84b79c2a8b5491faa690b
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
En **widget** är ett block som du placerar på en sida: en rubrik, en varning, ett galleri. Den bär sin egen stil, ett formulär för att konfigurera den i editorn och, valfritt, kod som renderar den på servern. En widget är en HTML-fil, som en komponent i [Flow](/en/flow/write-a-component/), och CMS lagrar den i sin metadata.
## En widget i en sida
I HTML för en sida är en widget en `div` med två attribut:
```html
```
- `data-cms` är `__`, där konfigurationen är ett JSON-objekt skrivet med `encodeURIComponent`. Editorn skriver det; du kan skriva det själv när du genererar sidor.
- `data-cms-id` är instansens identifierare i sidan.
När sidan serveras tar CMS bort attributet `data-cms`, behåller HTML inuti och lägger till stilen för varje widget på sidan i head. Om widgeten inte är installerad släpps dess block.
## Delarna i en widgetfil
| Del | Vad den är till för |
|---|---|
| `
Hello world
```
`opt.config` är instansens konfiguration, `opt.html` HTML som fanns inuti blocket, och `opt.id`, `opt.uid` och `opt.body` beskriver det. `next(html, replace)` ger HTML att servera; med `true` som andra argument ersätter den hela blocket. Vi sparade den här filen i ett lokalt CMS och en sida med `data-cms="hello__..."` och `{"text":"mundo"}` kom ut som `Hello MUNDO
`, med `.w-hello{color:#07c}` i head. Den officiella widgeten `picture` använder samma funktion för att lägga till `loading="lazy"` på sin bild, och `code` för att skriva ut koden från sina inställningar.
`exports.install` och `exports.uninstall` körs med CMS databas när widgeten läggs till, ändras eller tas bort.
## Installera och ta bort widgetar
Pluginet *Widgets* i administrationen importerar en fil; via API:et är det `widgets_save` med `{ "html": "", "singleton": true }` (`singleton` hoppar över widgeten om den redan finns), `widgets_list`, `widgets_read`, `widgets_detail` och `widgets_remove`. De kräver behörigheten `widgets` (se [administrations-API:et](/en/cms/the-admin-api/)). De 43 officiella widgetarna finns i [widgetförrådet](/en/cms/the-widgets-repository/).