# Embeddable status badge

![Status badge.png](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/53e52c92-6713-42f3-44ab-6deda41cbf00/public =1285x348)

Take advantage of the Status pages by integrating a real-time status badge. This badge, implemented as an `<iframe>`, displays the current status of your services directly within your application or web page.

### How to embed the status badge

1. Go to **[Status pages](https://uptime.betterstack.com/team/0/status-pages)**.
2. Pick the status page you want to add a badge for. 
3. Go to **Advanced settings** → **Embeddable badge**.
4. Copy the `<iframe>` code.
5. Embed this code into your application where you'd like the badge to appear.

### How to change the badge theme

Use `theme=dark` query parameter to get a badge for dark-themed websites. For light websites, use `theme=light`. Here's an example code for a dark-themed status badge:

```html
[label Embedding the badge]
<iframe src="https://status.betterstack.com/badge?theme=dark" width="250" height="30" frameborder="0" scrolling="no"></iframe>
```

[info]
#### Using Tailwind?

Set `color-scheme: none` CSS property to ensure proper styling of the dark-theme badge.
[/info]