Footer badge

Display a badge showing the real-time status of your status page services. You can create one by using our badge builder here: https://hyperping.io/badge-builder.

Fine tune your settings

Choose to display the uptime, change the wording and link your status page. A code snippet will automatically be updated as your edit your settings.

Link it to your status page

In order for it to automatically update your badge's status and uptime, you will need to plug in your status page's URL. If you haven't created a status page yet, you can follow this guide.

The badge uses the endpoint of your status page to retrieve real-time data about your uptime and status indicator.

How to integrate it

1. Add an element that contains a "hyperping-badge" id, for example in your footer, next to other links.

Code

<div id="hyperping-badge"></div>

2. Add the Hyperping badge's script to your website.

Code

<script src="https://hyperping.io/badge.js" async></script>

3. Paste the generated code that includes your badge's settings.

Code

<script>
  window.onload = function () {
    Hyperping.init({
      "statuspage": "meta.hyperping.io",
      "border": "none",
      "borderColor": "#E4E6F0",
      "uptime": true,
      "dot": true,
      "dotSize": 10,
      "isNeutral": false,
      "dotOk": "#2BAC76",
      "dotIncident": "#FFAF36",
      "dotOutage": "#E95858",
      "dotMaintenance": "#0070F3",
      "dotNeutral": "#0070F3",
      "operational": "All systems normal",
      "incident": "Under investigation",
      "outage": "System outage",
      "maintenance": "Under maintenance"
    });
  }
</script>

Try it out here: https://hyperping.io/badge-builder.

← Status page JSON Migrate to version 2 →