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
  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. Password-protect a status page
      9. Delete a status page
  7. Integrations
    1. Integrating with Better Stack
  8. Team and account management
    1. Team management
    2. Account settings
  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. Escalation policies
    3. Incidents
  12. Integrations API
    1. Email integrations
    2. Incoming webhooks
  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 from.
  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.

Customizing the Badge: Tailor the badge's appearance using CSS. If you're using Tailwind, set color-scheme: none to ensure proper styling of the dark-theme badge.

Previous article

Adding a system status announcement

Next article

Embedding announcements into your site