# Añade un widget a tu sitio web

Source: https://instatus.com/help/es/status-page/widgets

Instatus ofrece tres formas de mostrar tu estado en tu propio sitio web: un widget flotante que aparece durante las incidencias, un distintivo para el pie de página y un endpoint `summary.json` para crear un widget personalizado.

Para añadir uno, ve a [dashboard.instatus.com](https://dashboard.instatus.com), elige tu página de estado, abre **Widget**, elige el tipo de widget y copia el código.

| At a glance | Details |
| :-- | :-- |
| [Widget flotante](https://instatus.com/help/es/status-page/widgets#cómo-añado-un-widget-flotante) | Colores y posición, script en el body de tu página |
| [Distintivo](https://instatus.com/help/es/status-page/widgets#cómo-añado-un-distintivo-de-estado-a-mi-pie-de-página) | Claro u oscuro, tres tamaños, para el pie de página |
| [Widget personalizado](https://instatus.com/help/es/status-page/widgets#cómo-creo-un-widget-personalizado) | summary.json con estado, incidencias y mantenimientos |

---

## ¿Cómo añado un widget flotante?

1. Inicia sesión en Instatus desde [instatus.com/login](https://dashboard.instatus.com/login) y elige tu página de estado.

2. Ve a **Widget → Flotante**.

3. Personaliza tu widget a tu gusto eligiendo:

- El color de fondo
- El color de primer plano
- La posición del widget en la página

4. Copia el script del widget y pégalo en el body de tu página HTML.

![](https://instatus.com/help/widget-floating-1.png)

El widget aparecerá cuando haya una incidencia nueva 🙀

---

## ¿Cómo añado un distintivo de estado a mi pie de página?

1. Inicia sesión en Instatus desde [instatus.com/login](https://dashboard.instatus.com/login) y elige tu página de estado.

2. Ve a **Widget → Distintivo**.

3. Elige el modo claro u oscuro

4. Elige el tamaño (pequeño, mediano o grande) <span className="text-lg">🤏</span>

5. Inserta el código en tu página HTML

![](https://instatus.com/help/widget-badge-1.png)

Deberías ver un distintivo en tu pie de página 🥳

---

## ¿Cómo creo un widget personalizado?

Obtén `summary.json` de tu página de estado para recibir el estado actual y las incidencias y mantenimientos activos como datos en vivo para tu propio widget:

```markup
https://[YOUR-STATUS-PAGE]/summary.json
```

**Respuesta de ejemplo:**

```json
{
  "page": {
    "name": "Instatus",
    "url": "https://instat.us",
    "status": "HASISSUES"
  },
  "activeIncidents": [
	{
      "name": "We're facing an issue with our API",
      "started": "Sat Jun 11 2022 18:55:50 (Coordinated Universal Time)",
      "status": "INVESTIGATING",
      "impact": "MAJOROUTAGE",
      "url": "https://testing-widget.instatus.com/incident/cl4a"
    }
  ],
  "activeMaintenances": [
    {
      "name": "Database maintenance",
      "start": "Sat Jun 11 2022 18:55:54 (Coordinated Universal Time)",
      "status": "NOTSTARTEDYET",
      "duration": "60",
      "url": "https://testing-widget.instatus.com/maintenance/cl4"
    }
  ]
}
```

Estados posibles de la página:

- `UP`
- `HASISSUES`
- `UNDERMAINTENANCE`

Estados posibles de una incidencia:

- `INVESTIGATING`
- `IDENTIFIED`
- `MONITORING`
- `RESOLVED`

Estados posibles de un mantenimiento:

- `NOTSTARTEDYET`
- `INPROGRESS`
- `COMPLETED`

¡Ya puedes tener tu propio widget! 🥳

- [Usa un dominio personalizado para tu página de Instatus](https://instatus.com/help/es/status-page/custom-domain): Aprende a usar un dominio personalizado en tu página de estado.