Live downtime banner

Drop a single <script> tag into any site. When you have an active incident on a connected status page, a banner appears automatically — when the incident resolves, it disappears.

Install

html
<script src="https://happyuptime.com/api/v1/widgets/STATUS_PAGE_ID/embed.js"></script>

That's the entire integration. The script is under 5 KB, polls the status JSON every 60s, and renders an in-page banner when needed. Auto-handles dismiss + sessionStorage so the user only sees a given incident once per session.

Styles

text
<script src="...embed.js?style=minimal"></script>   <!-- horizontal bar --><script src="...embed.js?style=toast"></script>     <!-- bottom-right toast -->

What the banner shows

• Incident title + status (investigating / identified / monitoring)
• Link to the public status page for details
• Dismissible (per session)

Programmatic alternative

If you'd rather render the banner yourself:

js
const r = await fetch("https://happyuptime.com/api/v1/widgets/STATUS_PAGE_ID/status.json");const { status, active_incidents } = await r.json();// status: "operational" | "degraded" | "partial_outage" | "major_outage"// active_incidents: [{ id, title, status, started_at, ... }]

Endpoint is CORS-enabled, no auth, edge-cached 30s.