> ## Documentation Index
> Fetch the complete documentation index at: https://docs.happyuptime.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Live downtime banner

A 5KB JS snippet that auto-shows a banner on your site during incidents.

# 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

```
<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.