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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.statuspal.io/platform/status-badge-and-banner-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.