# Adaugă un widget pe site-ul tău

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

Instatus îți oferă trei moduri de a-ți afișa starea pe propriul site: un widget flotant care apare în timpul incidentelor, un badge pentru subsol și un endpoint `summary.json` pentru a-ți construi un widget propriu.

Ca să adaugi unul, mergi la [dashboard.instatus.com](https://dashboard.instatus.com), alege pagina ta de stare, deschide **Widget**, alege tipul de widget și copiază codul.

| At a glance | Details |
| :-- | :-- |
| [Widget flotant](https://instatus.com/help/ro/status-page/widgets#cum-adaug-un-widget-flotant) | Culori și poziție, script în corpul paginii tale |
| [Badge](https://instatus.com/help/ro/status-page/widgets#cum-adaug-un-badge-de-stare-în-subsol) | Luminos sau întunecat, trei mărimi, embed în subsol |
| [Widget propriu](https://instatus.com/help/ro/status-page/widgets#cum-construiesc-un-widget-propriu) | summary.json cu stare, incidente, mentenanțe |

---

## Cum adaug un widget flotant?

1. Autentifică-te în Instatus de la [instatus.com/login](https://dashboard.instatus.com/login) și alege pagina ta de stare.

2. Mergi la **Widget → Floating**.

3. Personalizează-ți widgetul cum îți place, alegând:

- Culoarea de fundal
- Culoarea textului
- Poziția widgetului față de pagină

4. Copiază scriptul widgetului și lipește-l în corpul paginii tale HTML.

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

Widgetul va apărea când există un incident nou 🙀

---

## Cum adaug un badge de stare în subsol?

1. Autentifică-te în Instatus de la [instatus.com/login](https://dashboard.instatus.com/login) și alege pagina ta de stare.

2. Mergi la **Widget → Badge**.

3. Alege modul luminos sau întunecat

4. Alege-ți dimensiunea (mică, medie sau mare) <span className="text-lg">🤏</span>

5. Inserează codul în pagina ta HTML

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

Ar trebui să vezi o insignă în subsolul tău 🥳

---

## Cum construiesc un widget propriu?

Preia `summary.json` de pe pagina ta de stare ca să obții starea curentă, incidentele și mentenanțele active ca date live pentru propriul tău widget:

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

**Exemplu de răspuns:**

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

Stări posibile ale paginii:

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

Stări posibile ale incidentelor:

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

Stări posibile ale mentenanțelor:

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

Acum poți avea un widget propriu! 🥳

- [Folosește un domeniu propriu pentru pagina ta Instatus](https://instatus.com/help/ro/status-page/custom-domain): Află cum să folosești un domeniu propriu pentru pagina ta de stare.