← Back to blog

Embed Real-Time Status Badges Anywhere

By Upwarden Team

Embed Real-Time Status Badges Anywhere

Status badges let you show your service health anywhere you can embed an image — GitHub READMEs, GitLab projects, documentation sites, internal dashboards. They update automatically and give users an at-a-glance view of your system status.

The Badge Endpoint

Upwarden provides a public endpoint for each monitor:

GET https://upwarden.eu/api/v1/badge/:monitorId.svg

No authentication required. Just replace :monitorId with your monitor's ID (found on the monitor detail page in your dashboard).

Basic Usage

Markdown (GitHub, GitLab, etc.):

![Status](https://upwarden.eu/api/v1/badge/your-monitor-id.svg)

HTML:

<img src="https://upwarden.eu/api/v1/badge/your-monitor-id.svg" alt="Status" />

With a link to your status page:

[![Status](https://upwarden.eu/api/v1/badge/your-monitor-id.svg)](https://upwarden.eu/status/your-page-slug)

Customization Options

Badge Style

Add ?style=flat-square for sharp corners (default is flat with rounded corners):

![Status](https://upwarden.eu/api/v1/badge/your-monitor-id.svg?style=flat-square)

Custom Label

Change the left side text with ?label=custom-text:

![API Status](https://upwarden.eu/api/v1/badge/your-monitor-id.svg?label=API)

Combine both:

![Status](https://upwarden.eu/api/v1/badge/your-monitor-id.svg?label=API&style=flat-square)

Status Colors

The badge color reflects your monitor's current status:

StatusColorHex
UpGreen#16a34a
DownRed#dc2626
DegradedAmber#d97706
UnknownGray#71717a

If the monitor doesn't exist, the badge returns "unknown" status with a gray color.

Caching

Badges are cached for 60 seconds (Cache-Control: public, max-age=60). This means:

  • Badges update at most once per minute
  • CDNs and browsers serve cached versions within that window
  • An ETag header allows conditional requests

For monitors that don't exist, the response uses no-cache headers so you'll see the "unknown" state immediately.

Response Format

The endpoint returns image/svg+xml content. The SVG is shields.io-compatible with proper aria-label and title attributes for accessibility.

When to Use Badges

  • README files — Show your service is operational right in your GitHub/GitLab repo
  • Documentation sites — Let developers know if your API is healthy before they start integrating
  • Internal dashboards — Aggregate status across multiple services on a single page
  • Marketing pages — Demonstrate transparency and reliability to potential customers

Badges are a small but effective way to build trust. They show you take uptime seriously enough to display it publicly.

// Get in touch

Need help? Email us.

Questions about monitoring, status pages, or your account? We read every email and typically respond within a few hours.