Status Badge & Banner Widget

Embed your status page's reported status in your website or help portal as a badge and/or banner.

StatusPal lets you easily embed a status banner and badge widget to display the status of your service/app directly on your website or HelpDesk site.

This way, your customers can quickly find out if there are ongoing outages or planned maintenance.

This is how the status banner looks on your website:

And here is what the status badge looks like when embedded in your site:

Configure your status banner and badge

In order to configure the status widget, simply click on Developers > Status widget on the sidebar of the status page admin site.

You will find a three-step instruction page detailing how to set up your status banner and/or badge.

Customize the colors of your status badge

Customizing the colors displayed depending on the current status can be easily achieved through 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>.

Customize the translations

There are seven supported languages by default (Danish, German, English, Spanish, French, Dutch and Portuguese).

You can customize the translations by adding the following Javascript lines below the provided code snipped:

Badge translations

window.statuspalWidget.badge.translations = {
  en: {
    status: {
      ok: 'All systems operational',
      scheduled: 'Ongoing scheduled maintenance',
      minor: 'Ongoing minor incident',
      major: 'Ongoing major incident'
    }
  }
};

Banner translations

window.statuspalWidget.banner.translations = {
  en: {
    lates_updates: 'View latest updates',
    ongoing: 'Ongoing for {{time_diff}}',
    dates: {
      same_day: '{{date}} from {{time_from}} to {{time_to}}',
      different_day: 'From {{date_time_from}} to {{date_time_to}}'
    }
  }
};