In this article
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:
- The status description (
status.description) which is a plain text summary of the current status; and - The status indicator (
status.indicator) which isnone(no incidents),minor,majororcritical.
The following example applies some basic styling using our utilities and basic AlpineJS directives:
<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