Embedding the Live Status Widget
The live status widget shows your current status directly on your website. It updates automatically and can display incidents, uptime charts, and more.
What Is the Live Widget?
The live widget is a small piece of code you add to any website. It displays:
- Current overall status
- Active incidents (optional)
- Response time sparkline (optional)
- Uptime history (optional)
It automatically updates to reflect your current status.
Getting the Widget Code
- Go to Status Pages > Embeds / Widgets
- Find the Live Widget (Script) section
- Copy the code snippet
- The code includes your status page slug
Basic Widget Code
Add this to any HTML page:
<script
src="https://statuspage.me/static/embed/v1/status.min.js"
data-slug="your-slug">
</script>
Replace your-slug with your actual status page slug.
Widget Options
Customize your widget with these options:
| Option | Values | Description |
|---|---|---|
data-theme | light, dark, auto | Color theme |
data-show-incidents | 0 or 1 | Show active incidents list |
data-compact | 0 or 1 | Single-line compact mode |
data-refresh | milliseconds | Auto-refresh interval (min 10000) |
data-rtm | 1-240 | Response time sparkline (minutes) |
data-upd | 1-30 | Uptime sparkline (days) |
data-disable-link | 0 or 1 | Disable click-through to status page |
Widget Examples
Full Widget with All Features
<script
src="https://statuspage.me/static/embed/v1/status.min.js"
data-slug="your-slug"
data-theme="auto"
data-show-incidents="1"
data-refresh="60000"
data-rtm="60"
data-upd="7">
</script>
Shows: status, incidents, 60-minute response time, 7-day uptime, refreshes every minute.
Compact Badge
<script
src="https://statuspage.me/static/embed/v1/status.min.js"
data-slug="your-slug"
data-theme="light"
data-compact="1"
data-rtm="45">
</script>
Shows: compact single-line with 45-minute response time sparkline.
Simple Status Only
<script
src="https://statuspage.me/static/embed/v1/status.min.js"
data-slug="your-slug">
</script>
Shows: just the status headline, no extras.
Theme Options
| Theme | Description |
|---|---|
light | White background with dark text |
dark | Dark background with light text |
auto | Matches user’s system preference |
Where to Use the Widget
- Homepage footer
- Help center or support pages
- Documentation sites
- Admin dashboards
- Mobile app webviews
The widget is lightweight and won’t slow down your page.
Troubleshooting
Widget Not Appearing
- Check that the slug is correct
- Verify the script is loading (check browser console)
- Make sure there are no Content Security Policy blocks
Widget Shows Wrong Status
- Check your status page is active
- Verify the slug matches your status page
- Allow a few minutes for caching to update
What’s Next?
- Use the SVG badge for simpler embedding
- Install the WordPress plugin
- Build custom integrations