Status Badges

Status badges provide a visual way to display the real-time status of your monitors and heartbeats. These badges are perfect for embedding in README files, documentation, status pages, or any website where you want to show the current health of your services.

What are Status Badges?

Status badges are small SVG images that dynamically show the current status of your monitors or heartbeats. They update in real-time and can be embedded anywhere that supports images, making it easy to communicate service health at a glance.

Badges are publicly accessible and don’t require authentication, making them perfect for public repositories and status pages.

Badge Types

Upcron.io provides badges for both monitors and heartbeats:

Monitor Badges

Display uptime status for your websites and APIs

Up: Green badge showing service is operational
Down: Red badge indicating service is unavailable
Unknown: Gray badge for undetermined status

Heartbeat Badges

Show status for your cron jobs and scheduled tasks

OK: Green badge showing job is running on schedule
Late/Failed: Red badge indicating missed or failed job
Pending: Yellow badge for jobs in progress

Getting Badge URLs

For Monitors

Navigate to Monitor

Go to your monitor’s detail page in the Upcron.io dashboard.

Find Badge Section

Look for the “Badge” or “Status Badge” section on the monitor details page.

Copy Badge URL

Copy the provided SVG badge URL. It will look like:

https://upcron.io/badge/monitor/{monitor-id}

For Heartbeats

Navigate to Heartbeat

Go to your heartbeat’s detail page in the Upcron.io dashboard.

Find Badge Section

Look for the “Badge” or “Status Badge” section on the heartbeat details page.

Copy Badge URL

Copy the provided SVG badge URL. It will look like:

https://upcron.io/badge/heartbeat/{heartbeat-id}

Using Badges

In README Files

Add badges to your repository’s README file using Markdown:

![Uptime Status](https://upcron.io/badge/monitor/your-monitor-id)

In HTML

Embed badges in HTML pages, documentation, or status pages:

<img src="https://upcron.io/badge/monitor/your-monitor-id" alt="Service Status">

In Documentation Sites

For documentation platforms like GitBook, Notion, or Confluence:

GitBook
Confluence
Notion

# Service Status

Current operational status of our services:

![API Status](https://upcron.io/badge/monitor/api-monitor-id)
![Database Status](https://upcron.io/badge/heartbeat/db-backup-id)

Use the “Insert Image” feature and paste the badge URL:

https://upcron.io/badge/monitor/your-monitor-id

Use /image command and paste the badge URL, or embed in a callout block.

Badge Customization

URL Parameters

Customize badge appearance using URL parameters:

https://upcron.io/badge/monitor/your-id

Available Parameters

Parameter	Description	Example Values
`style`	Badge style	`flat`, `flat-square`, `plastic`
`label`	Custom label text	`API`, `Website`, `Service`
`up_color`	Color when service is up	`green`, `brightgreen`, `success`
`down_color`	Color when service is down	`red`, `critical`, `important`
`unknown_color`	Color for unknown status	`lightgrey`, `inactive`

Style Examples

Default
Flat Square
Custom Colors
Custom Label

https://upcron.io/badge/monitor/your-id

Standard rounded badge with default colors.

https://upcron.io/badge/monitor/your-id?style=flat-square

Modern flat design with square corners.

https://upcron.io/badge/monitor/your-id?up_color=brightgreen&down_color=critical

Custom colors for different states.

https://upcron.io/badge/monitor/your-id?label=Production%20API

Custom label instead of default “uptime” or “heartbeat”.

Badge Status Meanings

Monitor Badges

🟢 UP

Service is operational and responding correctly

🔴 DOWN

Service is not responding or returning errors

⚪ UNKNOWN

Status cannot be determined or monitor not yet checked

Heartbeat Badges

🟢 OK

Job is running on schedule

🟡 PENDING

Job is currently running

🔴 LATE

Job missed its scheduled time

⚪ NEW

Newly created heartbeat, not yet checked

Best Practices

1. Choose Meaningful Labels

Use descriptive labels that clearly indicate what’s being monitored:

✅ Good labels:
?label=Production%20API
?label=Website
?label=Payment%20System
?label=Daily%20Backup

❌ Unclear labels:
?label=Monitor%201
?label=Service
?label=Check

Organize badges logically in your documentation:

## Core Services
![Website](https://upcron.io/badge/monitor/website-id?label=Website)
![API](https://upcron.io/badge/monitor/api-id?label=API)

## Background Jobs
![Backup](https://upcron.io/badge/heartbeat/backup-id?label=Daily%20Backup)
![Reports](https://upcron.io/badge/heartbeat/reports-id?label=Reports)

## Third-party Services
![Payment](https://upcron.io/badge/monitor/payment-id?label=Payments)
![Email](https://upcron.io/badge/monitor/email-id?label=Email%20Service)

3. Link to Detailed Status

Make badges clickable to link to detailed status information:

<a href="https://status.yoursite.com">
  <img src="https://upcron.io/badge/monitor/your-id" alt="Service Status">
</a>

4. Keep Alt Text Descriptive

Use meaningful alt text for accessibility:

![Production API uptime status](https://upcron.io/badge/monitor/api-id)
![Database backup job status](https://upcron.io/badge/heartbeat/backup-id)

Common Use Cases

GitHub Repository

Show the health of your deployed application:

# My Web App

[![Build Status](https://github.com/user/repo/workflows/CI/badge.svg)](https://github.com/user/repo/actions)
[![Website Status](https://upcron.io/badge/monitor/website-id)](https://status.myapp.com)
[![API Status](https://upcron.io/badge/monitor/api-id?label=API)](https://status.myapp.com)

## Features
...

Company Status Page

Create a simple status page with just badges:

<!DOCTYPE html>
<html>
<head>
    <title>System Status - ACME Corp</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 2rem; }
        .status-grid { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
    </style>
</head>
<body>
    <h1>System Status</h1>
    
    <div class="status-grid">
        <span>Main Website</span>
        <img src="https://upcron.io/badge/monitor/website-id" alt="Website Status">
        
        <span>Customer API</span>
        <img src="https://upcron.io/badge/monitor/api-id" alt="API Status">
        
        <span>Database Backups</span>
        <img src="https://upcron.io/badge/heartbeat/backup-id" alt="Backup Status">
        
        <span>Email System</span>
        <img src="https://upcron.io/badge/monitor/email-id" alt="Email Status">
    </div>
</body>
</html>

Documentation Integration

Add service status to your API documentation:

# API Documentation

[![API Status](https://upcron.io/badge/monitor/api-id?label=API%20Status)](https://status.api.com)

Our API is currently **operational**. Check the badge above for real-time status.

## Base URL

https://api.example.com/v1

## Authentication
...

Internal Dashboard

Embed badges in internal tools or dashboards:

<!-- Admin Dashboard Widget -->
<div class="status-widget">
    <h3>Service Health</h3>
    <div class="badge-list">
        <div>Web App: <img src="https://upcron.io/badge/monitor/app-id"></div>
        <div>Database: <img src="https://upcron.io/badge/heartbeat/db-id"></div>
        <div>Cache: <img src="https://upcron.io/badge/monitor/cache-id"></div>
    </div>
</div>

Caching and Performance

Badge Caching

Badges are cached for optimal performance:

Cache duration: 60 seconds
CDN delivery: Global content delivery network
Automatic updates: Status changes reflect within 1-2 minutes

Browser Considerations

Some browsers may cache images aggressively. To ensure fresh data:

<!-- Force refresh every 5 minutes -->
<img src="https://upcron.io/badge/monitor/your-id?t=timestamp" alt="Status">

<script>
// Refresh badge every 5 minutes
setInterval(() => {
    const badges = document.querySelectorAll('img[src*="upcron.io/badge"]');
    badges.forEach(badge => {
        const url = new URL(badge.src);
        url.searchParams.set('t', Date.now());
        badge.src = url.toString();
    });
}, 5 * 60 * 1000);
</script>

Troubleshooting

Badge not updating

Possible solutions:

Check if the monitor/heartbeat ID is correct
Verify the badge URL is accessible
Clear browser cache or add cache-busting parameter
Wait up to 2 minutes for status changes to propagate

Badge showing as unknown

Common causes:

Monitor or heartbeat hasn’t been checked yet
Invalid monitor/heartbeat ID in the URL
Monitor is inactive or disabled
Recent configuration changes still propagating

Custom styling not working

Check these items:

URL parameters are properly encoded (spaces as %20)
Parameter names are spelled correctly
Color values are valid (use standard color names or hex)
Style parameter matches available options

Badge not displaying in README

GitHub/GitLab specific:

Ensure the URL is publicly accessible
Check if the image URL is properly formatted in Markdown
Try accessing the badge URL directly in your browser
Some platforms may cache README content

Next Steps

Set Up Uptime Monitors

Create monitors to generate status badges

Configure Heartbeats

Set up heartbeat monitoring for your jobs

API Integration

Manage badges programmatically via API

Status Page Setup

Build a complete status page for your services

Getting Started

Monitoring

AI Development Tools

​Status Badges

​What are Status Badges?

​Badge Types

Monitor Badges

Heartbeat Badges

​Getting Badge URLs

​For Monitors

​For Heartbeats

​Using Badges

​In README Files

​In HTML

​In Documentation Sites

​Badge Customization

​URL Parameters

​Available Parameters

​Style Examples

​Badge Status Meanings

​Monitor Badges

🟢 UP

🔴 DOWN

⚪ UNKNOWN

​Heartbeat Badges

🟢 OK

🟡 PENDING

🔴 LATE

⚪ NEW

​Best Practices

​1. Choose Meaningful Labels

​2. Group Related Badges

​3. Link to Detailed Status

​4. Keep Alt Text Descriptive

​Common Use Cases

​GitHub Repository

​Company Status Page

​Documentation Integration

​Internal Dashboard

​Caching and Performance

​Badge Caching

​Browser Considerations

​Troubleshooting

​Next Steps

Set Up Uptime Monitors

Configure Heartbeats

API Integration

Status Page Setup

Status Badges

What are Status Badges?

Badge Types

Getting Badge URLs

For Monitors

For Heartbeats

Using Badges

In README Files

In HTML

In Documentation Sites

Badge Customization

URL Parameters

Available Parameters

Style Examples

Badge Status Meanings

Monitor Badges

Heartbeat Badges

Best Practices

1. Choose Meaningful Labels

2. Group Related Badges

3. Link to Detailed Status

4. Keep Alt Text Descriptive

Common Use Cases

GitHub Repository

Company Status Page

Documentation Integration

Internal Dashboard

Caching and Performance

Badge Caching

Browser Considerations

Troubleshooting

Next Steps