> For the complete documentation index, see [llms.txt](https://docs.statuspal.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.statuspal.io/platform/status-badge-and-banner-widget.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.