Standard status indicator
The default template is designed for use in the theme header, with different colored indicators for different outage types (critical, major, minor and none).
Custom status indicators
Because the extension is built upon our powerful micro-templating system you can present your system status however you like, wherever you like. You can even control when it appears, opting to only display information when there’s actually an outage. For example, a simple clickable badge could be placed discretely on internal pages, perhaps only when there is a known issue.
If your primary goal is to alert visitors to outages when they happen, you could use a notification element to present the status.
Installation
The System Status extension is included for free in all of our themes and can be found in the theme’s Assets folder. To begin using the extension, add a reference to it in your theme’s footer.hbs template:
<script type="text/javascript" src="{{asset 'extension-system-status.min.js'}}" defer></script>
Usage
Use data-element="system-status" on an element to create a new status indicator.
<div data-element="system-status" data-subdomain="..."></div>
If data attributes are used you will need to ensure that the allow unsafe HTML setting is enabled within Zendesk Guide.
The System Status extension can be initialized using JavaScript:
<div id="system-status">...</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
var systemStatus = document.getElementById('system-status');
if (!systemStatus) return;
new SystemStatus(systemStatus, {
// Options go here
});
});
</script>
Options
Options can be passed via data attributes or JavaScript.
For data attributes, append the option name to data- and use kebab case instead of camel case.
| Name | Type | Default | Description |
|---|---|---|---|
| subdomain | string | 'zenplates' | The subdomain of your statuspage.io page. |
| service | string | 'statuspage.io' | The status page service provider (statuspage.io is the only service supported at this time). |
| template | stringnull | null | The name of the micro-template to use. |
| templateData | object | {} | Additional data to expose to the templating function. |
Using custom micro-templates you can customize the appearance and behavior of the status indicator. The following data is provided to the templating function by default:
indicatorwhich is the overall status of your page (e.g.,critical,major,minor,none).descriptionwhich is the description from your page (e.g., “Partial System Outage”).
Events
| Class | Properties |
|---|---|
systemStatus:render | Fires when the status indicator has been rendered. |
