Status Badge Embed

Statuspal lets you easily embed a status badge widget to display the status of your service/app in directly in your website, that way your customers can quickly find out if there are ongoing outages or maintenance.

An example of how the status badge can be embedded in your site is under the footer:

In this example footer there is a link to the Status Page, which has the status badge embedded, the green signals there is no ongoing incident or maintenance, when hovering over the badge a tooltip with extra information will become visible:

Customize the Status Badge Colors

Customizing the colors displayed depending on the current status can be easily achieved though CSS:

  .sp-status .sp-status-badge.sp-status-ok        { background: darkgreen; }
  .sp-status .sp-status-badge.sp-status-scheduled { background: darkblue; }
  .sp-status .sp-status-badge.sp-status-minor     { background: darkorange; }
  .sp-status .sp-status-badge.sp-status-major     { background: darkred; }

Simply put the desired colors next to "background:", and make sure to add this style after the widget <script>.

You don't have a Status Page yet? go ahead and create one in seconds at