# Додавання віджета на сайт

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

Instatus пропонує три способи показати свій статус на власному сайті: плавучий віджет, який спливає під час інцидентів, бейдж для футера та ендпоінт `summary.json` для створення власного віджета.

Щоб додати віджет, перейдіть на [dashboard.instatus.com](https://dashboard.instatus.com), виберіть свою сторінку статусу, відкрийте **Віджет**, виберіть тип віджета й скопіюйте код.

| At a glance | Details |
| :-- | :-- |
| [Плавучий віджет](https://instatus.com/help/uk/status-page/widgets#як-додати-плавучий-віджет) | Кольори й позиція, скрипт у тілі вашої сторінки |
| [Бейдж](https://instatus.com/help/uk/status-page/widgets#як-додати-бейдж-статусу-у-футер) | Світлий або темний, три розміри, вставка у футер |
| [Власний віджет](https://instatus.com/help/uk/status-page/widgets#як-створити-власний-віджет) | summary.json зі статусом, інцидентами, обслуговуванням |

---

## Як додати плавучий віджет?

1. Увійдіть в Instatus на [instatus.com/login](https://dashboard.instatus.com/login) і виберіть свою сторінку статусу.

2. Перейдіть до розділу **Віджет → Floating**.

3. Налаштуйте віджет під себе, вибравши:

- колір тла
- колір переднього плану
- розташування віджета на сторінці

4. Скопіюйте скрипт віджета й вставте його в тіло вашої HTML-сторінки.

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

Віджет спливатиме, коли зʼявиться новий інцидент 🙀

---

## Як додати бейдж статусу у футер?

1. Увійдіть в Instatus на [instatus.com/login](https://dashboard.instatus.com/login) і виберіть свою сторінку статусу.

2. Перейдіть до розділу **Віджет → Badge**.

3. Виберіть світлу або темну тему

4. Виберіть розмір (малий, середній чи великий) <span className="text-lg">🤏</span>

5. Вставте код у свою HTML-сторінку

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

Тепер у футері має зʼявитися бейдж 🥳

---

## Як створити власний віджет?

Отримайте `summary.json` зі своєї сторінки статусу, щоб мати поточний статус, активні інциденти й обслуговування як живі дані для власного віджета:

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

**Приклад відповіді:**

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

Можливі статуси сторінки:

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

Можливі статуси інциденту:

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

Можливі статуси технічного обслуговування:

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

Тепер у вас може бути власний віджет! 🥳

- [Власний домен для сторінки Instatus](https://instatus.com/help/uk/status-page/custom-domain): Дізнайтеся, як використати власний домен для сторінки статусу.