Status Widget - BetterStatus Documentation

Display a badge on your website to show live updates about the status of your platform. Go to Status Pages → 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" />

<div 
id="status-widget" 
data-url="acme.betterstatus.dev"
></div>

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

Customizing with CSS

Add a class to your widget:

import '@betterstatus/widget';
<StatusWidget url="acme.betterstatus.dev" className="status-widget" />

<div 
id="status-widget" 
data-url="acme.betterstatus.dev"
class="status-widget"
></div>

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

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