> ## 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 an uptime badge

Drop SVG status/uptime/response-time badges into READMEs, marketing sites, or anywhere SVG works.

# Embed an uptime badge

Three SVG badges per status page, all public, all served from `happyuptime.com/api/v1/badges/{statusPageId}/...`. They look like shields.io badges but pull live data from your status page.

## Available badges

```
GET https://happyuptime.com/api/v1/badges/{statusPageId}/uptime.svg
GET https://happyuptime.com/api/v1/badges/{statusPageId}/status.svg
GET https://happyuptime.com/api/v1/badges/{statusPageId}/response-time.svg
```

Find your `statusPageId` in the dashboard → status page → **Widgets** tab → copy URLs.

## Embed in markdown (e.g. README)

```markdown
![Uptime](https://happyuptime.com/api/v1/badges/STATUS_PAGE_ID/uptime.svg)
![Status](https://happyuptime.com/api/v1/badges/STATUS_PAGE_ID/status.svg)
![Response time](https://happyuptime.com/api/v1/badges/STATUS_PAGE_ID/response-time.svg)
```

## Embed in HTML

```html
<img src="https://happyuptime.com/api/v1/badges/STATUS_PAGE_ID/status.svg" alt="Service status" />
```

## Style options

Common query parameters:

| Param | Values | Default |
|---|---|---|
| `style` | `flat`, `flat-square`, `pill`, `minimal` | `flat` |
| `label` | Custom left-side label | `uptime` / `status` / `response time` |
| `color` | Hex without `#`, e.g. `34d399` | Auto from status |

```
https://happyuptime.com/api/v1/badges/.../uptime.svg?style=pill&label=Operational
```

## Caching

Badges are CDN-cached at the edge for 30s. Don't worry about hammering with refresh — it's serving from cache.