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

# 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:

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