# Add a widget to your website

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

Instatus offers three ways to show your status on your own website: a floating widget that pops up during incidents, a badge for your footer, and a `summary.json` endpoint for building a custom widget.

To add one, go to [dashboard.instatus.com](https://dashboard.instatus.com), choose your status page, open **Widget**, pick the widget type and copy the code.

| At a glance | Details |
| :-- | :-- |
| [Floating widget](https://instatus.com/help/status-page/widgets#how-do-i-add-a-floating-widget) | Colors and position, script in your page body |
| [Badge](https://instatus.com/help/status-page/widgets#how-do-i-add-a-status-badge-to-my-footer) | Light or dark, three sizes, footer embed |
| [Custom widget](https://instatus.com/help/status-page/widgets#how-do-i-build-a-custom-widget) | summary.json with status, incidents, maintenances |

---

## How do I add a floating widget?

1. Login to Instatus from [instatus.com/login](https://dashboard.instatus.com/login) then choose your status page.

2. Go to **Widget → Floating**.

3. Customize your widget to your liking by choosing:

- Background color
- Foreground color
- Position of your widget relative to the page

4. Copy your widget script and paste it in the body of your HTML page.

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

The widget will pop up when there's a new incident 🙀

---

## How do I add a status badge to my footer?

1. Login to Instatus from [instatus.com/login](https://dashboard.instatus.com/login) then choose your status page.

2. Go to **Widget → Badge**.

3. Choose light or dark mode

4. Choose your size (small, medium or large) <span className="text-lg">🤏</span>

5. Embed the code in your HTML page

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

You should see a badge in your footer 🥳

---

## How do I build a custom widget?

Fetch `summary.json` from your status page to get the current status, active incidents and maintenances as live data for your own widget:

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

**Sample response:**

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

Possible page statuses:

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

Possible incident statuses:

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

Possible maintenance statuses:

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

Now you can have a custom widget! 🥳

- [Use a custom domain for your Instatus page](https://instatus.com/help/status-page/custom-domain): Learn how to use a custom domain for your status page.