# Een widget aan je website toevoegen

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

Instatus biedt drie manieren om je status op je eigen website te tonen: een zwevende widget die tijdens incidenten verschijnt, een badge voor je footer en een `summary.json`-endpoint om een eigen widget mee te bouwen.

Ga naar [dashboard.instatus.com](https://dashboard.instatus.com), kies je statuspagina, open **Widget**, kies het type widget en kopieer de code om er een toe te voegen.

| At a glance | Details |
| :-- | :-- |
| [Zwevende widget](https://instatus.com/help/nl/status-page/widgets#hoe-voeg-ik-een-zwevende-widget-toe) | Kleuren en positie, script in de body van je pagina |
| [Badge](https://instatus.com/help/nl/status-page/widgets#hoe-voeg-ik-een-statusbadge-toe-aan-mijn-footer) | Licht of donker, drie formaten, insluiten in de footer |
| [Eigen widget](https://instatus.com/help/nl/status-page/widgets#hoe-bouw-ik-een-eigen-widget) | summary.json met status, incidenten, onderhoud |

---

## Hoe voeg ik een zwevende widget toe?

1. Log in bij Instatus via [instatus.com/login](https://dashboard.instatus.com/login) en kies je statuspagina.

2. Ga naar **Widget → Floating**.

3. Pas je widget naar wens aan door te kiezen:

- Achtergrondkleur
- Voorgrondkleur
- Positie van je widget ten opzichte van de pagina

4. Kopieer het script van je widget en plak het in de body van je HTML-pagina.

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

De widget verschijnt zodra er een nieuw incident is 🙀

---

## Hoe voeg ik een statusbadge toe aan mijn footer?

1. Log in bij Instatus via [instatus.com/login](https://dashboard.instatus.com/login) en kies je statuspagina.

2. Ga naar **Widget → Badge**.

3. Kies de lichte of donkere modus

4. Kies je formaat (klein, middel of groot) <span className="text-lg">🤏</span>

5. Plaats de code in je HTML-pagina

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

Je zou nu een badge in je footer moeten zien 🥳

---

## Hoe bouw ik een eigen widget?

Haal `summary.json` op van je statuspagina om de huidige status, actieve incidenten en onderhoud als live data voor je eigen widget te gebruiken:

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

**Voorbeeldrespons:**

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

Mogelijke paginastatussen:

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

Mogelijke incidentstatussen:

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

Mogelijke onderhoudsstatussen:

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

Nu kun je een eigen widget maken! 🥳

- [Een eigen domein gebruiken voor je Instatus-pagina](https://instatus.com/help/nl/status-page/custom-domain): Leer hoe je een eigen domein voor je statuspagina gebruikt.