Embedding Status Badges & Widgets
WebhookBeam lets you embed live status indicators on your website, documentation, or GitHub README. There are two embeddable formats: SVG status badges and iFrame widgets.
Accessing the Integrations Page
- In the sidebar, click "Integrations" under the Status Monitor section.
- The Integrations page provides a visual interface to configure and generate embed codes for badges and widgets.
Status Badges (SVG)
Status badges are lightweight SVG images that show the current status of your services. They look like the badges you see on GitHub repositories and update in real-time.
Overall Status Badge
The overall badge reflects the aggregate status of all your visible monitored links:
- operational - All monitors are up.
- partial outage - Some monitors are down.
- major outage - All monitors are down.
- unknown - No monitors configured.
Badge URL: https://www.webhookbeam.com/uptime/badge/YOUR-SLUG.svg
Per-Monitor Badge
You can also generate a badge for a specific monitored link:
- up The specific monitor is up.
- down - The specific monitor is down.
- paused - Monitoring is paused.
Badge URL: https://www.webhookbeam.com/uptime/badge/YOUR-SLUG.svg?monitor=MONITOR_ID
Badge Customization
Badges support the following query parameters:
| Parameter | Description | Default |
|---|---|---|
style |
Badge style: flat or flat-square. |
flat |
label |
Custom text for the left side of the badge. | status |
monitor |
The record ID of a specific monitor. When provided, the badge shows that monitor's status instead of the overall status. | (overall) |
Embed Formats for Badges
The Integrations page generates ready-to-use embed codes in three formats:
Markdown (for GitHub README, docs)
HTML (for websites)
<img src="https://www.webhookbeam.com/uptime/badge/YOUR-SLUG.svg" alt="Status">
Direct URL (for browsers, API consumers)
https://www.webhookbeam.com/uptime/badge/YOUR-SLUG.svg
On the Integrations page, you can toggle individual monitors on/off to generate combined embed code for multiple badges at once.
iFrame Status Widget
The status widget is a self-contained HTML page designed to be embedded via an <iframe>. It shows a compact view of your service status, including component list and status indicators.
Widget Features
- Self-contained - No external CSS or JavaScript dependencies.
- Auto-refresh - Automatically refreshes every 60 seconds to show latest status.
- Theme-aware - Inherits your status page's color theme.
- Responsive - Works at any size.
- Respects settings - Honors your "show uptime percentage" and "show response time" display preferences.
Embedding the Widget
Copy the iframe embed code from the Integrations page, or use this template:
<iframe src="https://www.webhookbeam.com/uptime/widget/YOUR-SLUG/" width="400" height="300" frameborder="0"></iframe>
Adjust the width and height to fit your layout. The widget adapts to the available space.
Requirements
Both badges and widgets require a public status page. If your status page is:
- Disabled - Badges show "not found" and widgets show an error message.
- Password-protected - Badges show "protected" and widgets show an access-restricted message.
- Public and enabled - Badges and widgets display live status data.
To set up your status page, see Creating a Public Status Page.
Common Use Cases
- GitHub README - Add a Markdown status badge to your repository to show your service's availability.
- Documentation site - Embed a badge or widget in your API docs header.
- Internal dashboard - Embed the widget in your team's internal portal or wiki.
- Customer-facing website - Add the widget to your help or support page.
- Slack / Discord - Share the badge direct URL in a pinned message for quick status checks.