Sections

Add a status indicator

If you use Atlassian StatusPage or another service to communicate the status of your services to customers in real-time you can now display this information within your Zendesk Guide Help Center.

This guide provides a simple, highly customizable example of an embeddable status widget that you can copy and paste anywhere in your theme. The appearance of the widget is also completely under your control and, like all other aspects of our themes, can be brought into line with your company brand.

We’re using AlpineJS in order to allow you to copy the examples directly into your theme. You can add AlpineJS to your theme in a single step by copying the following code into the document_head.hbs template:

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>

Create the widget

If all you need to do is display the summary status description of your Atlassian Status page within Zendesk Guide you can copy-and-paste the following snippet:

Partial System Outage

<div
  x-data="{ status: {} }"
  x-init="fetch('https://zenplates.statuspage.io/api/v2/status.json').then(res => res.json()).then(json => status = json.status)"
  x-text="status.description">
</div>

This automatically fetches the latest status from your Statuspage and displays the description within a <div> element. All you need to do is replace zenplates with your unique statuspage.io subdomain so that the status of your page is the one displayed.

Styling your widget

Statuspage gives us several pieces of information, including:

  1. The status description (status.description) which is a plain text summary of the current status; and
  2. The status indicator (status.indicator) which is none (no incidents), minor, major or critical.

The following example applies some basic styling using our utilities and basic AlpineJS directives:

Partial System Outage
<div
    x-data="{ status: {} }"
    x-init="fetch('https://zenplates.statuspage.io/api/v2/status.json').then(res => res.json()).then(json => status = json.status)">
  <div class="inline-flex align-items-center py-2 px-4 border rounded hidden" :class="{ 'hidden': !status }">
    <span class="w-3 h-3 bg-red-500 circle" x-show="status.indicator === 'critical'"></span>
    <span class="w-3 h-3 bg-orange-500 circle" x-show="status.indicator === 'major'"></span>
    <span class="w-3 h-3 bg-orange-500 circle" x-show="status.indicator === 'minor'"></span>
    <span class="w-3 h-3 bg-green-500 circle" x-show="status.indicator === 'none'"></span>
    <span class="mx-2" x-text="status.description"></span>
  </div>
</div>

Of course you could also display the information within the main navigation of your page header, with the link itself directing the visitor to your Statuspage:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li
      class="nav-item hidden"
      x-data="{ status: {} }"
      x-init="fetch('https://zenplates.statuspage.io/api/v2/status.json').then(res => res.json()).then(json => status = json.status)"
      :class="{ 'hidden': !status }">
    <a class="nav-link inline-flex align-items-center" href="https://zenplates.statuspage.io" target="_blank">
      <span class="w-3 h-3 bg-red-500 circle" x-show="status.indicator === 'critical'"></span>
      <span class="w-3 h-3 bg-orange-500 circle" x-show="status.indicator === 'major'"></span>
      <span class="w-3 h-3 bg-orange-500 circle" x-show="status.indicator === 'minor'"></span>
      <span class="w-3 h-3 bg-green-500 circle" x-show="status.indicator === 'none'"></span>
      <span class="ml-2" x-text="status.description"></span>
    </a>
  </li>
</ul>

You can experiment with utilities to create your own unique widget appearance and even combine it with other patterns like the notification bars described in another guide. Whatever approach you decide on, you have the tools to make it happen in a short amount of time for free!

Questions or feedback about this guide? Let us know