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

# Badges

SVG uptime, status, and response-time badges for READMEs and status pages.

# Badges

Public, edge-cached SVG badges. No auth required.

## Uptime badge

GET `/widgets/badge/uptime/{monitor_id_or_slug}`

```html
<img src="https://happyuptime.com/api/v1/widgets/badge/uptime/api-acme" />
```

Renders:

`API uptime: 99.94%`

`24h`, `7d`, `30d`, `90d`.

`flat`, `flat-square`, `pill`, `minimal`.

Custom label text.

Hex color override. Defaults: green ≥99.9, yellow ≥99, red below.

## Status badge

GET `/widgets/badge/status/{monitor_id_or_slug}`

```html
<img src="https://happyuptime.com/api/v1/widgets/badge/status/api-acme" />
```

Renders `API: up` (or `down`/`degraded`), color-coded.

## Response time badge

GET `/widgets/badge/response-time/{monitor_id_or_slug}`

```html
<img src="https://happyuptime.com/api/v1/widgets/badge/response-time/api-acme?percentile=p95" />
```

`p50`, `p95`, `p99`.

`1h`, `24h`, `7d`.

Renders `API: 287ms`.

## Status page badge

GET `/widgets/badge/status-page/{slug}`

Aggregate status for an entire status page (worst component wins).

## Live status iframe

GET `/api/v1/widgets/{statusPageId}/badge`

Use this when embedding a live footer/header status indicator in a website. It renders as iframe HTML, so it can load Google Fonts and accept text styling parameters.

```html
<iframe
  src="https://happyuptime.com/api/v1/widgets/STATUS_PAGE_ID/badge?theme=auto&font=Inter&weight=600&size=12&tracking=0.02em&case=none"
  title="Status"
  width="320"
  height="24"
  style="border:0;overflow:hidden"
  loading="lazy"
></iframe>
```

`auto`, `dark`, or `light`.

`minimal`, `brand`, `modern`, `clean`, `terminal`, or `developer`.

Google Font family name, such as `Inter`, `Manrope`, or `IBM Plex Sans`.

Font weight from `100` to `900`.

Font size from `9` to `18`.

Letter spacing as `em` or `px`, such as `0.02em` or `0.5px`.

`none`, `uppercase`, `lowercase`, or `capitalize`.

## Caching

All badges are cached at the edge for 60 seconds. Add `?ts=<timestamp>` to bust cache during testing.

## CORS

`Access-Control-Allow-Origin: *` on all badge endpoints — safe to embed cross-origin.