# Widgets en el CMS de Total.js: úsalos en una página y escribe los tuyos
> Cómo aparece un widget en el HTML de una página (el atributo data-cms y su JSON), las partes de un archivo de widget, el marcador CLASS, renderizar un widget en el servidor con exports.render e instalar widgets mediante la API.
Framework: cms
Product: CMS (cms@8071e48)
Language: es
Content-SHA256: dc6b1f05dcdefe6886aeea8909b0b88c23ca598847f5f4c9ea9f685afe445eed
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
Un **widget** es un bloque que colocas en una página: un titular, un aviso, una galería. Lleva su propio estilo, un formulario para configurarlo en el editor y, opcionalmente, código que lo renderiza en el servidor. Un widget es un archivo HTML, como un componente de [Flow](/en/flow/write-a-component/), y el CMS lo guarda en sus metadatos.
## Un widget dentro de una página
En el HTML de una página, un widget es un `div` con dos atributos:
```html
```
- `data-cms` es `__`, donde la configuración es un objeto JSON escrito con `encodeURIComponent`. Lo escribe el editor; puedes escribirlo tú cuando generes páginas.
- `data-cms-id` es el identificador de la instancia en la página.
Cuando se sirve la página, el CMS elimina el atributo `data-cms`, conserva el HTML que hay dentro y añade a la cabecera el estilo de cada widget de la página. Si el widget no está instalado, su bloque se descarta.
## Las partes de un archivo de widget
| Parte | Para qué sirve |
|---|---|
| `
Hello world
```
`opt.config` es la configuración de la instancia, `opt.html` el HTML que había dentro del bloque, y `opt.id`, `opt.uid` y `opt.body` lo describen. `next(html, replace)` entrega el HTML que se sirve; con `true` como segundo argumento sustituye todo el bloque. Guardamos este archivo en un CMS local y una página con `data-cms="hello__..."` y `{"text":"mundo"}` salió como `Hello MUNDO
`, con `.w-hello{color:#07c}` en la cabecera. El widget oficial `picture` usa la misma función para añadir `loading="lazy"` a su imagen, y `code` para imprimir el código de sus ajustes.
`exports.install` y `exports.uninstall` se ejecutan con la base de datos del CMS cuando se añade, cambia o elimina el widget.
## Instalar y eliminar widgets
El plugin *Widgets* del admin importa un archivo; por la API es `widgets_save` con `{ "html": "", "singleton": true }` (`singleton` omite el widget si ya existe), `widgets_list`, `widgets_read`, `widgets_detail` y `widgets_remove`. Necesitan el permiso `widgets` (consulta [la API del admin](/en/cms/the-admin-api/)). Los 43 widgets oficiales están en [el repositorio de widgets](/en/cms/the-widgets-repository/).