Status Widget - BetterStatus Documentation

Display a badge on your website to show live updates about the status of your platform. Go to Status Pages → Your page → Status Widget in the dashboard or follow this tutorial. Add the library to your website:

<script src="https://cdn.betterstatus.dev/widget.js"></script>

Then add the widget to your code:

import '@betterstatus/widget';

<StatusWidget url="acme.betterstatus.dev" />

Replace acme.betterstatus.dev with your status page URL. Even if you use a custom domain, you must use the betterstatus.dev URL. You’ll find this under Status Pages → Your page → Domains.

Customizing with CSS

Add a class to your widget:

import '@betterstatus/widget';

<StatusWidget url="acme.betterstatus.dev" className="status-widget" />

Then create a CSS block and use any of the properties below:

style.css

.status-widget {
  /* Layout */
  --widget-padding: 8px 14px;
  --widget-border-radius: 9999px;       /* pill shape — lower for rounded square */
  --widget-gap: 8px;                    /* space between dot and label */

  /* Dot */
  --widget-dot-size: 8px;
  --widget-dot-color-operational: #22c55e;
  --widget-dot-color-degraded: #f97316;
  --widget-dot-color-outage: #ef4444;
  --widget-dot-pulse: true;             /* animated pulse ring on the dot */

  /* Background & border */
  --widget-background: #ffffff;
  --widget-border: 1px solid #e5e7eb;
  --widget-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Typography */
  --widget-font-size: 13px;
  --widget-font-weight: 500;
  --widget-text-color: #111827;
}

Property	What it controls
`--widget-padding`	Inner spacing around the badge
`--widget-border-radius`	Corner rounding (`9999px` = pill)
`--widget-gap`	Space between the dot and the label
`--widget-dot-size`	Diameter of the status dot
`--widget-dot-color-operational`	Dot color when everything is up
`--widget-dot-color-degraded`	Dot color during degraded performance
`--widget-dot-color-outage`	Dot color during an outage
`--widget-dot-pulse`	Animated pulse ring around the dot
`--widget-background`	Badge background color
`--widget-border`	Badge border
`--widget-shadow`	Drop shadow
`--widget-font-size`	Label text size
`--widget-font-weight`	Label text weight
`--widget-text-color`	Label text color

​Installing the widget

​Customizing with CSS

Installing the widget

Customizing with CSS