# Ajouter un widget à votre site web

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

Instatus propose trois façons d’afficher votre statut sur votre propre site web : un widget flottant qui apparaît pendant les incidents, un badge pour votre pied de page et un point de terminaison `summary.json` pour créer un widget personnalisé.

Pour en ajouter un, allez sur [dashboard.instatus.com](https://dashboard.instatus.com), choisissez votre page de statut, ouvrez **Widget**, sélectionnez le type de widget et copiez le code.

| At a glance | Details |
| :-- | :-- |
| [Widget flottant](https://instatus.com/help/fr/status-page/widgets#comment-ajouter-un-widget-flottant-) | Couleurs et position, script dans le body de votre page |
| [Badge](https://instatus.com/help/fr/status-page/widgets#comment-ajouter-un-badge-de-statut-à-mon-pied-de-page-) | Clair ou sombre, trois tailles, à intégrer au pied de page |
| [Widget personnalisé](https://instatus.com/help/fr/status-page/widgets#comment-créer-un-widget-personnalisé-) | summary.json avec statut, incidents et maintenances |

---

## Comment ajouter un widget flottant ?

1. Connectez-vous à Instatus sur [instatus.com/login](https://dashboard.instatus.com/login) puis choisissez votre page de statut.

2. Allez dans **Widget → Flottant**.

3. Personnalisez votre widget en choisissant :

- La couleur d’arrière-plan
- La couleur de premier plan
- La position du widget sur la page

4. Copiez le script du widget et collez-le dans le body de votre page HTML.

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

Le widget apparaîtra en cas de nouvel incident 🙀

---

## Comment ajouter un badge de statut à mon pied de page ?

1. Connectez-vous à Instatus sur [instatus.com/login](https://dashboard.instatus.com/login) puis choisissez votre page de statut.

2. Allez dans **Widget → Badge**.

3. Choisissez le thème clair ou sombre.

4. Choisissez la taille (petite, moyenne ou grande) <span className="text-lg">🤏</span>

5. Intégrez le code dans votre page HTML.

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

Un badge devrait apparaître dans votre pied de page 🥳

---

## Comment créer un widget personnalisé ?

Récupérez `summary.json` depuis votre page de statut pour obtenir le statut actuel, les incidents et maintenances en cours sous forme de données en direct pour votre propre widget :

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

**Exemple de réponse :**

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

Statuts de page possibles :

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

Statuts d’incident possibles :

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

Statuts de maintenance possibles :

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

Vous avez maintenant un widget personnalisé ! 🥳

- [Utiliser un domaine personnalisé pour votre page Instatus](https://instatus.com/help/fr/status-page/custom-domain): Découvrez comment utiliser un domaine personnalisé pour votre page de statut.