⌘ K

Add a widget to your website

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, choose your status page, open Widget, pick the widget type and copy the code.

Floating widgetColors and position, script in your page bodyBadgeLight or dark, three sizes, footer embedCustom widgetsummary.json with status, incidents, maintenances

How do I add a floating widget?

  1. Login to Instatus from 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
  1. Copy your widget script and paste it in the body of your HTML page.
The widget will pop up when there's a new incident 🙀

  1. Login to Instatus from 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) 🤏

  5. Embed the code in your HTML page

You should see a badge in your footer 🥳

Links in the floating widget and the badge open your status page in a new tab. To open it in the same tab instead, choose Same tab next to Open links in before you copy the code.

If the code is already on your site, add target=self to it. For the floating widget, add it to the end of the script src:

<script src="https://api.instatus.com/widget?host=[YOUR-STATUS-PAGE]&target=self"></script>

For the badge, add it to the end of the iframe src:

<iframe src="https://[YOUR-STATUS-PAGE]/embed-status/light-md?target=self" ...></iframe>

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:

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

Sample response:

{
  "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! 🥳
Next up
Use a custom domain for your Instatus pageLearn how to use a custom domain for your status page.