Dodaj widżet do swojej strony

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, wybierz swoją stronę statusu, otwórz Widżet, wybierz typ widżetu i skopiuj kod.


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

  1. Zaloguj się do Instatus na 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
  1. Skopiuj skrypt widżetu i wklej go w sekcji body swojej strony HTML.
Widżet pojawi się, gdy wystąpi nowy incydent 🙀

Jak dodać plakietkę statusu do stopki?

  1. Zaloguj się do Instatus na 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) 🤏

  5. Osadź kod na swojej stronie HTML.

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:

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

Przykładowa odpowiedź:

{
"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! 🥳