# Menambahkan widget ke situs web Anda

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

Instatus menawarkan tiga cara untuk menampilkan status Anda di situs web sendiri: widget mengambang yang muncul saat insiden, badge untuk footer Anda, dan endpoint `summary.json` untuk membangun widget khusus.

Untuk menambahkannya, buka [dashboard.instatus.com](https://dashboard.instatus.com), pilih halaman status Anda, buka **Widget**, pilih jenis widget, lalu salin kodenya.

| At a glance | Details |
| :-- | :-- |
| [Widget mengambang](https://instatus.com/help/id/status-page/widgets#bagaimana-cara-menambahkan-widget-mengambang) | Warna dan posisi, skrip di body halaman Anda |
| [Badge](https://instatus.com/help/id/status-page/widgets#bagaimana-cara-menambahkan-badge-status-ke-footer-saya) | Terang atau gelap, tiga ukuran, disematkan di footer |
| [Widget khusus](https://instatus.com/help/id/status-page/widgets#bagaimana-cara-membangun-widget-khusus) | summary.json berisi status, insiden, pemeliharaan |

---

## Bagaimana cara menambahkan widget mengambang?

1. Masuk ke Instatus dari [instatus.com/login](https://dashboard.instatus.com/login) lalu pilih halaman status Anda.

2. Buka **Widget → Floating**.

3. Sesuaikan widget Anda sesuai selera dengan memilih:

- Warna latar
- Warna depan
- Posisi widget Anda relatif terhadap halaman

4. Salin skrip widget Anda lalu tempelkan di body halaman HTML Anda.

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

Widget akan muncul saat ada insiden baru 🙀

---

## Bagaimana cara menambahkan badge status ke footer saya?

1. Masuk ke Instatus dari [instatus.com/login](https://dashboard.instatus.com/login) lalu pilih halaman status Anda.

2. Buka **Widget → Badge**.

3. Pilih mode terang atau gelap

4. Pilih ukuran Anda (kecil, sedang, atau besar) <span className="text-lg">🤏</span>

5. Sematkan kodenya di halaman HTML Anda

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

Anda akan melihat sebuah lencana di footer Anda 🥳

---

## Bagaimana cara membangun widget khusus?

Ambil `summary.json` dari halaman status Anda untuk mendapatkan status saat ini, insiden aktif, dan pemeliharaan sebagai data langsung untuk widget Anda sendiri:

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

**Contoh respons:**

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

Status halaman yang mungkin:

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

Status insiden yang mungkin:

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

Status pemeliharaan yang mungkin:

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

Sekarang Anda bisa punya widget khusus! 🥳

- [Memakai domain khusus untuk halaman Instatus Anda](https://instatus.com/help/id/status-page/custom-domain): Pelajari cara memakai domain khusus untuk halaman status Anda.