# Lägg till en widget på din webbplats

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

Instatus erbjuder tre sätt att visa din status på din egen webbplats: en flytande widget som dyker upp vid incidenter, en badge för din sidfot och en `summary.json`-endpoint för att bygga en egen widget.

För att lägga till en går du till [dashboard.instatus.com](https://dashboard.instatus.com), väljer din statussida, öppnar **Widget**, väljer typ av widget och kopierar koden.

| At a glance | Details |
| :-- | :-- |
| [Flytande widget](https://instatus.com/help/sv/status-page/widgets#hur-lägger-jag-till-en-flytande-widget) | Färger och position, skript i sidans body |
| [Badge](https://instatus.com/help/sv/status-page/widgets#hur-lägger-jag-till-en-statusbadge-i-min-sidfot) | Ljus eller mörk, tre storlekar, bäddas in i sidfoten |
| [Egen widget](https://instatus.com/help/sv/status-page/widgets#hur-bygger-jag-en-egen-widget) | summary.json med status, incidenter, underhåll |

---

## Hur lägger jag till en flytande widget?

1. Logga in på Instatus på [instatus.com/login](https://dashboard.instatus.com/login) och välj sedan din statussida.

2. Gå till **Widget → Flytande**.

3. Anpassa din widget som du vill genom att välja:

- Bakgrundsfärg
- Förgrundsfärg
- Widgetens position i förhållande till sidan

4. Kopiera widgetens skript och klistra in det i body på din HTML-sida.

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

Widgeten dyker upp när det finns en ny incident 🙀

---

## Hur lägger jag till en statusbadge i min sidfot?

1. Logga in på Instatus på [instatus.com/login](https://dashboard.instatus.com/login) och välj sedan din statussida.

2. Gå till **Widget → Badge**.

3. Välj ljust eller mörkt läge

4. Välj din storlek (liten, mellan eller stor) <span className="text-lg">🤏</span>

5. Bädda in koden på din HTML-sida

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

Nu bör du se en badge i din sidfot 🥳

---

## Hur bygger jag en egen widget?

Hämta `summary.json` från din statussida för att få aktuell status, aktiva incidenter och underhåll som livedata till din egen widget:

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

**Exempelsvar:**

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

Möjliga sidstatusar:

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

Möjliga incidentstatusar:

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

Möjliga underhållsstatusar:

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

Nu kan du ha en egen widget! 🥳

- [Använd en egen domän för din Instatus-sida](https://instatus.com/help/sv/status-page/custom-domain): Lär dig använda en egen domän för din statussida.