# Lisää widget verkkosivullesi

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

Instatus tarjoaa kolme tapaa näyttää tilasi omalla verkkosivullasi: kelluvan widgetin, joka ponnahtaa esiin häiriöiden aikana, merkin alatunnisteeseesi ja `summary.json`-päätepisteen oman widgetin rakentamiseen.

Lisätäksesi sellaisen siirry osoitteeseen [dashboard.instatus.com](https://dashboard.instatus.com), valitse statussivusi, avaa **Widgetti**, valitse widgetin tyyppi ja kopioi koodi.

| At a glance | Details |
| :-- | :-- |
| [Kelluva widget](https://instatus.com/help/fi/status-page/widgets#miten-lisään-kelluvan-widgetin) | Värit ja sijainti, skripti sivusi body-osaan |
| [Merkki](https://instatus.com/help/fi/status-page/widgets#miten-lisään-tilamerkin-alatunnisteeseeni) | Vaalea tai tumma, kolme kokoa, upotus alatunnisteeseen |
| [Oma widget](https://instatus.com/help/fi/status-page/widgets#miten-rakennan-oman-widgetin) | summary.json: tila, häiriöt ja huollot |

---

## Miten lisään kelluvan widgetin?

1. Kirjaudu Instatukseen osoitteessa [instatus.com/login](https://dashboard.instatus.com/login) ja valitse sitten statussivusi.

2. Siirry kohtaan **Widgetti → Kelluva**.

3. Mukauta widgetiäsi mieleiseksesi valitsemalla:

- Taustaväri
- Edustaväri
- Widgetin sijainti suhteessa sivuun

4. Kopioi widget-skriptisi ja liitä se HTML-sivusi body-osaan.

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

Widget ponnahtaa esiin, kun uusi häiriö ilmenee 🙀

---

## Miten lisään tilamerkin alatunnisteeseeni?

1. Kirjaudu Instatukseen osoitteessa [instatus.com/login](https://dashboard.instatus.com/login) ja valitse sitten statussivusi.

2. Siirry kohtaan **Widgetti → Merkki**.

3. Valitse vaalea tai tumma tila

4. Valitse koko (pieni, keskikokoinen tai suuri) <span className="text-lg">🤏</span>

5. Upota koodi HTML-sivullesi

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

Näet nyt merkin alatunnisteessasi 🥳

---

## Miten rakennan oman widgetin?

Hae `summary.json` statussivultasi saadaksesi nykyisen tilan, aktiiviset häiriöt ja huollot live-datana omaa widgetiäsi varten:

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

**Esimerkkivastaus:**

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

Mahdolliset sivun tilat:

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

Mahdolliset häiriön tilat:

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

Mahdolliset huollon tilat:

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

Nyt sinulla voi olla oma widget! 🥳

- [Käytä omaa verkkotunnusta Instatus-sivullasi](https://instatus.com/help/fi/status-page/custom-domain): Opi käyttämään omaa verkkotunnusta statussivullasi.