Add an uptime badge to a README, report or footer

A small image showing a site's live uptime tells a client, a visitor or a teammate that you're watching it. OctoPing makes two of them for every site, one for uptime and one for current status. This guide copies them into a README, a client report and a website footer.

What you need

• A site that OctoPing already monitors, and a role that can open its detail page.
• A place that takes an image: a Markdown file, an HTML page or a report template. The badges are SVG images, so they stay sharp at any zoom.

Add the badge

1. 1. Copy the snippets

   Open the site's detail page and find the Badge & Embed card. It previews the uptime badge and the status badge, and each has a Markdown snippet, an HTML snippet and a direct URL with a Copy button. The uptime badge has 7d, 30d and 90d buttons, and the snippets change with the one you pick.

2. 2. Put it in a README

   Paste the Markdown into the file. Wrapping the image in a link sends readers to the client's status page when they click it. Use the address of your own page in place of the example.

   [![Uptime](https://octoping.com/api/badges/YOUR_SITE_ID.svg?days=90)](https://octoping.com/status/your-slug)
   [![Status](https://octoping.com/api/badges/YOUR_SITE_ID/status.svg)](https://octoping.com/status/your-slug)

3. 3. Put it in a client report

   Paste the HTML snippet into a report you build as a web page. A badge shows the numbers from the moment it loads, so a report you keep for next quarter would then show next quarter's uptime. To record a month as it was, save the image when you send the report.

   curl -fsS -o uptime-2026-11.svg "https://octoping.com/api/badges/YOUR_SITE_ID.svg?days=30"

4. 4. Put it in a website footer

   Add the image to the footer of the client's site and link it to their status page. Give it an alt text that says what the number is, because the alt text is what a screen reader announces.

   <footer>
     <a href="https://octoping.com/status/your-slug">
       <img src="https://octoping.com/api/badges/YOUR_SITE_ID.svg?label=Uptime" alt="Site uptime, last 30 days" />
     </a>
   </footer>

Change the label and the window

Both badges take a query string. Add it to the address in any of the snippets. The uptime badge accepts label and days, and the status badge accepts label.

• ?label=Uptime changes the text on the left of the badge.
• ?days=90 sets how many days the uptime percentage covers. It's 30 when you leave it out, and the most it takes is 90.

The badges reference lists every parameter, its default and its limits.

The uptime badge reads the same number as the uptime figure in the app, with planned maintenance left out. The status badge reads up, degraded, down, maintenance or unknown.

Verify it works

• Open the direct URL in a browser tab. You should see the image and no login page.
• Load the page that holds the badge in a private window. The badge should show the same percentage as the Badge & Embed card.
• Request an address with a site id that doesn't exist. The image should read not found, in gray.

The response is an SVG image with the cache setting no-cache, max-age=300, and no-cache means a browser checks for a fresh copy each time it uses the image. Any web page can load it, because the response allows requests from every origin. Some services that proxy images keep their own copy for longer, so a badge in a README can lag behind the app.