System status

Communicate outage information from Statuspage in realtime anywhere in your help center.

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).

System status as a link

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.

System status in a badge

If your primary goal is to alert visitors to outages when they happen, you could use a notification element to present the status.

System status in a notification

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 string
null
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:

  • indicator which is the overall status of your page (e.g., critical, major, minor, none).
  • description which is the description from your page (e.g., “Partial System Outage”).

Events

Class Properties
systemStatus:render Fires when the status indicator has been rendered.

Related extensions

Animations and transitions Free

Animations and transitions

Add engaging animation and transition effects to elements.

Carousels Free

Carousels

Present content in well-defined and easy to follow steps.

Content blocks and icons Free

Content blocks and icons

Display icons against categories, sections and articles.