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.com/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 you 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 the badge element

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

   HTML

   Copy

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

2. Load the badge script

   Add the Hyperping badge's script to your website.

   HTML

   Copy

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

3. Initialize it with your settings

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

   HTML

   Copy

   <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.com/badge-builder.

Next steps