# Dodaj widżet do swojej strony

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

Instatus oferuje trzy sposoby pokazania statusu na Twojej własnej stronie: pływający widżet, który pojawia się podczas incydentów, plakietkę do stopki oraz endpoint `summary.json` do zbudowania własnego widżetu.

Aby go dodać, wejdź na [dashboard.instatus.com](https://dashboard.instatus.com), wybierz swoją stronę statusu, otwórz **Widżet**, wybierz typ widżetu i skopiuj kod.

| At a glance | Details |
| :-- | :-- |
| [Pływający widżet](https://instatus.com/help/pl/status-page/widgets#jak-dodać-pływający-widżet) | Kolory i pozycja, skrypt w sekcji body strony |
| [Plakietka](https://instatus.com/help/pl/status-page/widgets#jak-dodać-plakietkę-statusu-do-stopki) | Jasna lub ciemna, trzy rozmiary, osadzana w stopce |
| [Własny widżet](https://instatus.com/help/pl/status-page/widgets#jak-zbudować-własny-widżet) | summary.json ze statusem, incydentami i przerwami |

---

## Jak dodać pływający widżet?

1. Zaloguj się do Instatus na [instatus.com/login](https://dashboard.instatus.com/login), a następnie wybierz swoją stronę statusu.

2. Przejdź do **Widżet → Floating**.

3. Dostosuj widżet do swoich potrzeb, wybierając:

- kolor tła
- kolor pierwszego planu
- pozycję widżetu względem strony

4. Skopiuj skrypt widżetu i wklej go w sekcji body swojej strony HTML.

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

Widżet pojawi się, gdy wystąpi nowy incydent 🙀

---

## Jak dodać plakietkę statusu do stopki?

1. Zaloguj się do Instatus na [instatus.com/login](https://dashboard.instatus.com/login), a następnie wybierz swoją stronę statusu.

2. Przejdź do **Widżet → Badge**.

3. Wybierz tryb jasny lub ciemny.

4. Wybierz rozmiar (mały, średni lub duży) <span className="text-lg">🤏</span>

5. Osadź kod na swojej stronie HTML.

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

W stopce powinna pojawić się plakietka 🥳

---

## Jak zbudować własny widżet?

Pobierz `summary.json` ze swojej strony statusu, aby otrzymać bieżący status, aktywne incydenty i przerwy techniczne jako dane na żywo dla własnego widżetu:

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

**Przykładowa odpowiedź:**

```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żliwe statusy strony:

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

Możliwe statusy incydentu:

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

Możliwe statusy przerwy technicznej:

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

Możesz już korzystać z własnego widżetu! 🥳

- [Użyj własnej domeny dla swojej strony Instatus](https://instatus.com/help/pl/status-page/custom-domain): Dowiedz się, jak używać własnej domeny dla strony statusu.