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:

Configure Your Status Badge

In order to configure your status badge simply click on Badge on the sidebar of status page admin site.

You will find a 3 steps instruction page detailing how to set up your status badge.

Customize the Status Badge Colors

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

<style>
  .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; }
</style>

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 Statuspal.io