# Добавление виджета на сайт

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

Instatus предлагает три способа показать статус на вашем сайте: плавающий виджет, который всплывает во время инцидентов, бейдж для подвала и эндпоинт `summary.json` для создания своего виджета.

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

| At a glance | Details |
| :-- | :-- |
| [Плавающий виджет](https://instatus.com/help/ru/status-page/widgets#как-добавить-плавающий-виджет) | Цвета и положение, скрипт в body страницы |
| [Бейдж](https://instatus.com/help/ru/status-page/widgets#как-добавить-бейдж-статуса-в-подвал-сайта) | Светлый или тёмный, три размера, вставка в подвал |
| [Свой виджет](https://instatus.com/help/ru/status-page/widgets#как-создать-свой-виджет) | summary.json со статусом, инцидентами, обслуживаниями |

---

## Как добавить плавающий виджет?

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

2. Перейдите в **Виджет → Плавающий**.

3. Настройте виджет под себя, выбрав:

- Цвет фона
- Цвет текста
- Положение виджета на странице

4. Скопируйте скрипт виджета и вставьте его в body вашей HTML-страницы.

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

Виджет всплывёт, когда появится новый инцидент 🙀

---

## Как добавить бейдж статуса в подвал сайта?

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

2. Перейдите в **Виджет → Бейдж**.

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/ru/status-page/custom-domain): Узнайте, как использовать собственный домен для страницы статуса.