Embed scripts
Drop-in JavaScript widgets — downtime banner, status pill, uptime card.
Embed scripts
Self-contained, dependency-free JavaScript widgets you can drop into any HTML page.
Downtime banner
Shows a top-of-page banner during active incidents. Auto-dismisses on resolve.
html<script async src="https://happyuptime.com/api/v1/widgets/banner.js" data-page="acme" data-style="bar" data-position="top"></script>
| Attribute | Values | Default |
|---|---|---|
data-page | Status page slug | required |
data-style | bar, toast, minimal | bar |
data-position | top, bottom | top |
data-color | hex | red |
data-dismissible | true, false | true |
data-poll-seconds | int | 60 |
Dismissal is per-session (sessionStorage), so users see the banner once per visit, not per pageview.
Total bundle: under 5 KB gzipped.
Status pill
Floating bottom-right "All systems operational" pill that opens to a mini status page on click.
html<script async src="https://happyuptime.com/api/v1/widgets/pill.js" data-page="acme"></script>
Uptime card
Embeddable card showing 90-day uptime bars + last incident.
html<div id="uptime-card"></div><script async src="https://happyuptime.com/api/v1/widgets/card.js" data-monitor="api-acme" data-target="uptime-card"></script>
CSP
All embeds load from https://happyuptime.com. If your site uses a strict CSP, allow:
textscript-src https://happyuptime.com;connect-src https://happyuptime.com;img-src https://happyuptime.com;
Self-hosted bundles
For full control, all widget JS is open-source and tag-mountable. Copy banner.js to your CDN and update the src=.