Status Pages #

Complete guide to creating and managing public status pages for your monitored services.

Overview #

Status pages provide transparent, public-facing dashboards that display the current state of your monitored infrastructure. They help communicate service availability to customers, reduce support inquiries, and build trust through transparency.

Key Features #

• Public Access - No authentication required for viewers
• Custom Branding - Organization logos and styling
• Dark Mode - Automatic and manual theme switching
• Dynamic Favicon - Real-time status indicator in browser tab
• Auto-Refresh - Updates every 60 seconds
• Maintenance Mode - Special status during planned downtime
• Selective Display - Choose which services to show
• Responsive Design - Mobile-friendly layout

Creating a Status Page #

1. Navigate to Status Pages #

Go to Status Pages in the admin menu.

2. Create New Status Page #

Click New Status Page and fill in:

• Name: Internal name for the status page
• Slug: URL-friendly identifier (auto-generated or custom)
• Description: Optional description shown on the page

3. Select Services to Display #

Choose which servers and heartbeats to include:

• Servers: Select from your monitored HTTP/HTTPS endpoints
• Heartbeats: Select from your passive monitors

4. Configure Branding #

• Logo: Upload a custom logo (or uses organization logo)
• Custom CSS: Optional styling overrides

5. Save and Publish #

Your status page is immediately accessible at:

https://yoursite.com/status/[slug]

Status Page Features #

Status Indicators #

Each service displays its current state:

Dynamic Favicon #

The browser tab shows a dynamic favicon indicating overall status:

• 🟢 All services operational
• 🟡 Some services degraded
• 🔴 One or more services offline
• 🔵 Maintenance in progress

Dark Mode #

Status pages support both light and dark themes:

• Automatic Detection: Respects system preference
• Manual Toggle: Users can switch themes
• Persistent Preference: Saved for return visits

Auto-Refresh #

Pages automatically refresh every 60 seconds to show current status. Manual refresh is also available.

Maintenance Windows #

Creating a Maintenance Window #

1. Navigate to Maintenance Windows
2. Click New Maintenance Window
3. Configure:
   • Title: Description of the maintenance
   • Start Time: When maintenance begins
   • End Time: When maintenance ends
   • Affected Services: Select servers/heartbeats
   • Status Pages: Which status pages to show maintenance on

During Maintenance #

• Affected services show 🔵 Maintenance status
• Notifications are suppressed for these services
• Status page displays maintenance banner
• Favicon changes to blue indicator

After Maintenance #

• Status automatically returns to normal
• Monitoring and notifications resume
• Maintenance window archived for reference

Managing Status Pages #

Viewing Status Pages #

Public URL:

https://yoursite.com/status/[slug]

Admin Preview: Click the preview icon in the status pages list.

Editing Status Pages #

1. Navigate to Status Pages
2. Click on the status page to edit
3. Modify settings
4. Save changes (immediately applied)

Deleting Status Pages #

1. Archive the status page first (optional)
2. Delete from the archived list
3. URL becomes unavailable immediately

Customization #

Custom Styling #

Add custom CSS to modify the status page appearance:

/* Custom status page styling */
.status-page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.status-item.operational {
    border-left-color: #28a745;
}

.status-item.offline {
    border-left-color: #dc3545;
}

Logo Requirements #

• Format: PNG, JPG, or SVG
• Size: Recommended 200x50 pixels
• Transparency: PNG with transparency works best
• File size: Under 200KB for fast loading

Custom Domain #

To use a custom domain for your status page:

1. Set up a CNAME record pointing to your main site
2. Configure the subdomain in your web server
3. Update the status page settings with the new URL

Example:

status.yourcompany.com → CNAME → yoursite.com

API Access #

Status Page Data API #

Get current status programmatically:

curl https://yoursite.com/api/status/[slug]

Response:

{
  "name": "Company Status",
  "overall_status": "operational",
  "services": [
    {
      "name": "API Server",
      "status": "operational",
      "uptime_7d": 99.98
    },
    {
      "name": "Website",
      "status": "operational",
      "uptime_7d": 100.00
    }
  ],
  "maintenance_windows": [],
  "last_updated": "2025-01-01T12:00:00Z"
}

Plan Limits #

Best Practices #

Service Selection #

• Include: Customer-facing services, APIs, critical infrastructure
• Exclude: Internal tools, development environments
• Group: Related services for cleaner presentation

Naming Conventions #

• Use clear, customer-friendly names
• Avoid internal jargon or technical codes
• Be consistent across all services

Communication #

• Link to status page from your website footer
• Include status page URL in incident communications
• Consider embedding status widget on main site

Maintenance Planning #

• Schedule maintenance during low-traffic periods
• Create maintenance windows in advance
• Notify customers before scheduled maintenance

Troubleshooting #

Status Page Not Loading #

Check URL:

# Verify the status page exists
curl https://yoursite.com/status/[slug]

Check Status Page Settings:

• Ensure status page is not archived
• Verify slug is correct
• Check if any services are assigned

Wrong Status Displayed #

Force Status Refresh:

• Clear browser cache
• Wait for next auto-refresh cycle (60 seconds)
• Check if monitoring is working correctly

Logo Not Appearing #

• Verify logo file is uploaded
• Check file permissions
• Ensure URL is accessible publicly

Maintenance Not Showing #

• Verify maintenance window times are correct
• Check if affected services are assigned
• Ensure status page is included in maintenance window

Integration Examples #

Embedding Status Widget #

Add a status indicator to your main website:

<iframe
  src="https://yoursite.com/status/main?widget=true"
  width="300"
  height="100"
  frameborder="0">
</iframe>

Status Badge #

Generate a status badge for your README or website:

![Status](https://yoursite.com/status/main/badge.svg)

Previous: Heartbeat Monitoring | Next: Branding