# Aggiungere un widget al tuo sito web

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

Instatus offre tre modi per mostrare il tuo stato sul tuo sito web: un widget fluttuante che compare durante gli incidenti, un badge per il piè di pagina e un endpoint `summary.json` per costruire un widget personalizzato.

Per aggiungerne uno, vai su [dashboard.instatus.com](https://dashboard.instatus.com), scegli la tua status page, apri **Widget**, scegli il tipo di widget e copia il codice.

| At a glance | Details |
| :-- | :-- |
| [Widget fluttuante](https://instatus.com/help/it/status-page/widgets#come-aggiungo-un-widget-fluttuante) | Colori e posizione, script nel body della pagina |
| [Badge](https://instatus.com/help/it/status-page/widgets#come-aggiungo-un-badge-di-stato-nel-piè-di-pagina) | Chiaro o scuro, tre dimensioni, nel piè di pagina |
| [Widget personalizzato](https://instatus.com/help/it/status-page/widgets#come-costruisco-un-widget-personalizzato) | summary.json con stato, incidenti, manutenzioni |

---

## Come aggiungo un widget fluttuante?

1. Accedi a Instatus da [instatus.com/login](https://dashboard.instatus.com/login) e scegli la tua status page.

2. Vai su **Widget → Fluttuante**.

3. Personalizza il widget come preferisci scegliendo:

- Il colore di sfondo
- Il colore del testo
- La posizione del widget rispetto alla pagina

4. Copia lo script del widget e incollalo nel body della tua pagina HTML.

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

Il widget comparirà quando c'è un nuovo incidente 🙀

---

## Come aggiungo un badge di stato nel piè di pagina?

1. Accedi a Instatus da [instatus.com/login](https://dashboard.instatus.com/login) e scegli la tua status page.

2. Vai su **Widget → Badge**.

3. Scegli la modalità chiara o scura

4. Scegli la dimensione (piccola, media o grande) <span className="text-lg">🤏</span>

5. Incorpora il codice nella tua pagina HTML

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

Dovresti vedere un badge nel tuo piè di pagina 🥳

---

## Come costruisco un widget personalizzato?

Recupera `summary.json` dalla tua status page per ottenere stato attuale, incidenti e manutenzioni attive come dati in tempo reale per il tuo widget:

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

**Esempio di risposta:**

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

Stati possibili della pagina:

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

Stati possibili degli incidenti:

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

Stati possibili delle manutenzioni:

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

Ora puoi avere un widget personalizzato! 🥳

- [Usare un dominio personalizzato per la tua pagina Instatus](https://instatus.com/help/it/status-page/custom-domain): Scopri come usare un dominio personalizzato per la tua status page.