# Web sitenize widget ekleyin

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

Instatus, durumunuzu kendi web sitenizde göstermenin üç yolunu sunar: olaylar sırasında beliren kayan bir widget, alt bilginiz için bir rozet ve özel bir widget geliştirmek için bir `summary.json` uç noktası.

Bir tane eklemek için [dashboard.instatus.com](https://dashboard.instatus.com) adresine gidin, durum sayfanızı seçin, **Widget**'ı açın, widget türünü seçin ve kodu kopyalayın.

| At a glance | Details |
| :-- | :-- |
| [Kayan widget](https://instatus.com/help/tr/status-page/widgets#nasıl-kayan-widget-eklerim) | Renkler ve konum, sayfa gövdenize bir betik |
| [Rozet](https://instatus.com/help/tr/status-page/widgets#alt-bilgime-nasıl-durum-rozeti-eklerim) | Açık veya koyu, üç boyut, alt bilgiye gömme |
| [Özel widget](https://instatus.com/help/tr/status-page/widgets#nasıl-özel-bir-widget-geliştiririm) | Durum, olay ve bakımları içeren summary.json |

---

## Nasıl kayan widget eklerim?

1. [instatus.com/login](https://dashboard.instatus.com/login) adresinden Instatus'a giriş yapın ve durum sayfanızı seçin.

2. **Widget → Kayan**'a gidin.

3. Şunları seçerek widget'ınızı dilediğiniz gibi özelleştirin:

- Arka plan rengi
- Ön plan rengi
- Widget'ınızın sayfaya göre konumu

4. Widget betiğinizi kopyalayın ve HTML sayfanızın gövdesine yapıştırın.

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

Yeni bir olay olduğunda widget belirecek 🙀

---

## Alt bilgime nasıl durum rozeti eklerim?

1. [instatus.com/login](https://dashboard.instatus.com/login) adresinden Instatus'a giriş yapın ve durum sayfanızı seçin.

2. **Widget → Rozet**'e gidin.

3. Açık veya koyu modu seçin

4. Boyutunuzu seçin (küçük, orta veya büyük) <span className="text-lg">🤏</span>

5. Kodu HTML sayfanıza gömün

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

Alt bilginizde bir rozet görmelisiniz 🥳

---

## Nasıl özel bir widget geliştiririm?

Kendi widget'ınız için güncel durumu, etkin olayları ve bakımları canlı veri olarak almak üzere durum sayfanızdan `summary.json` dosyasını çekin:

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

**Örnek yanıt:**

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

Olası sayfa durumları:

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

Olası olay durumları:

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

Olası bakım durumları:

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

Artık özel bir widget'ınız olabilir! 🥳

- [Instatus sayfanız için özel alan adı kullanın](https://instatus.com/help/tr/status-page/custom-domain): Durum sayfanız için nasıl özel alan adı kullanacağınızı öğrenin.