Sections

System status

Integrate your Help Center with Statuspage.io to provide instant status updates to visitors.

In this article

Example

The default template is designed for use in the theme header, with different colored indicators for different statuses.

Using custom templates, you can display status information anywhere in the Help Center. 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.

Usage

Use data-element="system-status" on an element to create a new status indicator.

If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.

The System Status plugin can be initialized using JavaScript:

<div id="system-status">...</div>

<script type="text/javascript">
  ready(function() {
    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 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.