Explore documentation

Embeddable status badge

Status badge.png

Take advantage of the Status pages by integrating a real-time status badge. This badge, implemented as an <iframe>, displays the current status of your services directly within your application or web page.

How to embed the status badge

  1. Go to Status pages.
  2. Pick the status page you want to add a badge for.
  3. Go to Advanced settingsEmbeddable badge.
  4. Copy the <iframe> code.
  5. Embed this code into your application where you'd like the badge to appear.

How to change the badge theme

Use theme=dark query parameter to get a badge for dark-themed websites. For light websites, use theme=light. Here's an example code for a dark-themed status badge:

Embedding the badge
<iframe src="https://status.betterstack.com/badge?theme=dark" width="250" height="30" frameborder="0" scrolling="no"></iframe>

Using Tailwind?

Set color-scheme: none CSS property to ensure proper styling of the dark-theme badge.