# Přidání widgetu na váš web

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

Instatus nabízí tři způsoby, jak ukázat svůj stav na vlastním webu: plovoucí widget, který vyskočí během incidentů, odznak do patičky a endpoint `summary.json` pro sestavení vlastního widgetu.

Widget přidáte tak, že přejdete na [dashboard.instatus.com](https://dashboard.instatus.com), vyberete svou stavovou stránku, otevřete **Widget**, zvolíte typ widgetu a zkopírujete kód.

| At a glance | Details |
| :-- | :-- |
| [Plovoucí widget](https://instatus.com/help/cs/status-page/widgets#jak-přidám-plovoucí-widget) | Barvy a umístění, skript v body vaší stránky |
| [Odznak](https://instatus.com/help/cs/status-page/widgets#jak-přidám-stavový-odznak-do-patičky) | Světlý nebo tmavý, tři velikosti, vložení do patičky |
| [Vlastní widget](https://instatus.com/help/cs/status-page/widgets#jak-sestavím-vlastní-widget) | summary.json se stavem, incidenty a údržbami |

---

## Jak přidám plovoucí widget?

1. Přihlaste se do Instatusu na [instatus.com/login](https://dashboard.instatus.com/login) a vyberte svou stavovou stránku.

2. Přejděte do **Widget → Floating**.

3. Přizpůsobte si widget podle sebe — zvolte:

- Barvu pozadí
- Barvu popředí
- Umístění widgetu na stránce

4. Zkopírujte skript widgetu a vložte ho do body své HTML stránky.

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

Widget vyskočí, jakmile nastane nový incident 🙀

---

## Jak přidám stavový odznak do patičky?

1. Přihlaste se do Instatusu na [instatus.com/login](https://dashboard.instatus.com/login) a vyberte svou stavovou stránku.

2. Přejděte do **Widget → Badge**.

3. Zvolte světlý nebo tmavý režim

4. Zvolte velikost (malý, střední nebo velký) <span className="text-lg">🤏</span>

5. Vložte kód do své HTML stránky

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

V patičce byste měli vidět odznak 🥳

---

## Jak sestavím vlastní widget?

Načtěte ze své stavové stránky `summary.json` a získáte aktuální stav, aktivní incidenty a údržby jako živá data pro vlastní widget:

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

**Ukázková odpověď:**

```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"
    }
  ]
}
```

Možné stavy stránky:

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

Možné stavy incidentu:

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

Možné stavy údržby:

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

Teď můžete mít vlastní widget! 🥳

- [Vlastní doména pro stránku Instatus](https://instatus.com/help/cs/status-page/custom-domain): Naučte se používat pro stavovou stránku vlastní doménu.