Web Status Widget

Use the Public Status API to embed the current status directly into web pages.

Insert HTML

Notes: Change the status page URL and insert into your webpage. jQuery is required.

<link rel="stylesheet" href="statusio_widget.css">

<a href="http://status.example.com" target="_blank" style="margin-left: 15px;">
  <span id="current-status-description"></span>
  <i class="current-status-indicator"></i>
</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="statusio_widget.js"></script>

Include Files

statusio_widget.js

Notes: Change the URL in the statusAPI string. Select the API tab in the Dashboard to locate the unique URL for your status page.

/* Status.io Widget */

$('.current-status-indicator').ready(function($){
  var statusAPI = "https://XXXXXXXXXXXXX.hostedstatus.com/1.0/status/XXXXXXXXXXXXX";
  var maxStatusCode = "";
  var maxStatusDescription = "";
  var sc = "";
  var sd = "";
  $.getJSON(statusAPI)
  .done(function(data){
    $.each(data.result.status, function(s,status){
      $.each(data.result.status[s].containers, function(c,containers){
        sc = data.result.status[s].containers[c].status_code;
        sd = data.result.status[s].containers[c].status;
        if (maxStatusCode < sc){
          maxStatusCode = sc
          maxStatusDescription = sd
        }
      })
    })
    if (maxStatusCode === ""){
      return;
    }
    // Operational
    if (maxStatusCode === 100){
      $(".current-status-indicator").addClass("green");
      $("#current-status-description").text(maxStatusDescription);
    }
    // Scheduled Maintenance
    if (maxStatusCode === 200){
      $(".current-status-indicator").addClass("blue");
      $("#current-status-description").text(maxStatusDescription);
    }
    // Degraded Performance || Partial Outage
    if (maxStatusCode === 300 || maxStatusCode === 400){
      $(".current-status-indicator").addClass("yellow");
      $("#current-status-description").text(maxStatusDescription);
    }
    // Service Disrtuption || Security Issue
    if (maxStatusCode === 500 || maxStatusCode === 600){
      $(".current-status-indicator").addClass("red");
      $("#current-status-description").text(maxStatusDescription);
    }
  })
});

statusio_widget.css

Notes: Optionally change the colors to match your custom status level color choices within Status.io

/* Status.io Widget */

.current-status-indicator {
    width: 12px;
    height: 12px;
    margin: 0 0 0 5px;
    display: inline-block;
    border-radius: 6px
}

.current-status-indicator.small {
    width: 8px;
    height: 8px;
    margin: 0 0 0 5px;
    display: inline-block;
    border-radius: 4px
}

.current-status-indicator.green {
    background: #27ae60
}

.current-status-indicator.yellow {
    background: #ffa837
}

.current-status-indicator.red {
    background: #c44031
}

.current-status-indicator.blue {
    background: #00aaf0
}