Explore documentation
  1. Welcome to Uptime 👋
  2. Frequently Asked Questions
  3. Monitoring
    1. Get started with monitoring
    2. Working with monitors
    3. Customizing monitors
    4. Monitor types
  4. On-call scheduling and alerting
    1. Get started with on-call
    2. Sending alerts to Slack ↗
    3. Connecting external calendars
    4. Advanced on-call setup
  5. Incidents
    1. Working with incidents
    2. Create incidents manually
    3. Post mortems
    4. Incident silencing
    5. Incident metadata
  6. Status pages
    1. Get started with status pages
    2. Working with status pages
      1. Custom subdomain: status.yourdomain.com
      2. Adding a system status announcement
      3. Embeddable status badge
      4. Embedding announcements into your site
      5. Create a status report and a status update
      6. Get in touch URL
      7. Subscribing to status updates
      8. Custom domain for sending status page updates
      9. Password-protect a status page
      10. Delete a status page
  7. Integrations
    1. Integrating with Better Stack
  8. Team and account management
    1. Team management
    2. Account settings
    3. Audit logs
    4. Migrating to pay as you go
  9. API
    1. Get started with API
  10. Monitors API
    1. Monitors
    2. Monitor groups
    3. Heartbeats
    4. Heartbeat groups
  11. On-call & Incidents API
    1. On-call calendar
    2. On-call calendar events
    3. Escalation policies
    4. Escalation policy groups
    5. Severities
    6. Severity groups
    7. Incidents
    8. Comments
  12. Integrations API
    1. New Relic Integrations
    2. Datadog Integrations
    3. AWS CloudWatch Integrations
    4. Azure Integrations
    5. Google Monitoring Integrations
    6. Grafana Integrations
    7. Prometheus Integrations
    8. Email integrations
    9. Incoming webhooks
    10. Slack Integrations
    11. Outgoing Webhook integrations
    12. Splunk On-Call integrations
    13. PagerDuty Integrations
  13. Status pages API
    1. Status pages
    2. Status page sections
    3. Status page resources
    4. Status page reports
    5. Status page report updates
  14. Other API
    1. Metadata

Embeddable status badge

Status badge.png

Take advantage of the Status pages by integrating a real-time status badge. This badge, implemented as an <iframe>, displays the current status of your services directly within your application or web page.

How to embed the status badge

  1. Go to Status pages.
  2. Pick the status page you want to add a badge for.
  3. Go to Advanced settings → Embeddable badge.
  4. Copy the <iframe> code.
  5. Embed this code into your application where you'd like the badge to appear.

How to change the badge theme

Use theme=dark query parameter to get a badge for dark-themed websites. For light websites, use theme=light. Here's an example code for a dark-themed status badge:

Embedding the badge
<iframe src="https://status.betterstack.com/badge?theme=dark" width="250" height="30" frameborder="0" scrolling="no"></iframe>

Using Tailwind?

Set color-scheme: none CSS property to ensure proper styling of the dark-theme badge.

Previous article

Adding a system status announcement

Next article

Embedding announcements into your site