# Status Badge & Banner Widget

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:

<figure><img src="https://d33v4339jhl8k0.cloudfront.net/docs/assets/5b7c6e932c7d3a03f89df563/images/635be52d9171a91e374a5214/file-cR2ei6aAKk.png" alt="Status page banner widget embed "><figcaption></figcaption></figure>

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

<figure><img src="https://d33v4339jhl8k0.cloudfront.net/docs/assets/5b7c6e932c7d3a03f89df563/images/5dd3e6ed04286364bc91e8f7/file-X3RBoCuVmm.png" alt="Status page badge embed widget"><figcaption></figcaption></figure>

### Configure your status banner and badge

In order to configure the status widget, simply click on <mark style="background-color:green;">Developers > Status widget</mark> on the sidebar of the status page admin site.

![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/5b7c6e932c7d3a03f89df563/images/635be68473d6a22819f07492/file-PhsSIMN40v.png)

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:

```html
<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

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

#### Banner translations

```javascript
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}}'
    }
  }
};
```