The Atlassian Statuspage integration for Guide allows customers to see status page incidents on your Help Center pages. This keeps customers informed of any service incidents or degradation, reducing the need for them to raise support requests.
This article is intended for administrators and describes the steps to set up and configure the Atlassian Statuspage widget for Guide. You set up the widget by adding a JavaScript snippet that runs a script to display status page incidents in Help Center.
To set up the widget, you must be on the Zendesk Guide Professional or Enterprise plan and have a public Atlassian Statuspage URL.
This article contains the following topics:
Related articles:
Uploading the script as a Help Center theme asset
The first part of setting up the status page integration is uploading the JavaScript file as a Help Center theme asset.
To upload the JavaScript file to your theme assets
- Download the statuspage-widget.js file.
- In Guide, open your theme, then click Edit code.
- In the assets directory, click Add asset.
- Select the the statuspage-widget.js file on your computer, and click Open.
Adding the code snippet to the header template
To complete setting up the integration, a script is added in the header template to display status page incidents in Help Center.
To add the code snippet to the header template
- In Guide, open your theme, then click Edit code.
- In your theme code configuration page under the templates directory, click the header.hbs handlebar file. The file content is displayed.
- In the header.hbs file, paste the following snippet after the <header/> tags:
<script type="text/javascript" id="statuspage-widget" statuspage="https://YOUR_STATUSPAGE_URL" src="{{asset 'statuspage-widget.js'}}"></script>
- Replace YOUR_STATUS_PAGE_URL with your public Atlassian Statuspage URL. You can also use the Zendesk test status page URL https://test1282.statuspage.io/ if you need to test and verify your installation.
- Click Publish. The status page is displayed in Help Center.
Note: If the public Atlassian Statuspage URL is incorrect, or if an invalid JSON is returned, the widget will not appear in Help Center. If Atlassian Statuspage is not fully operational, the widget is not displayed.
Deleting the Atlassian Statuspage widget
To delete the integration, delete the statuspage-widget.js theme asset and the snippet you added in the header template.
14 Comments
Question
Can the script be edited to use other pages like if we made one ourselves from Prometheus and then modified the script to use our own pages?
Still for customers etc just not Atlassian
What does it look like in Guide once it's been added? Could you post an example of the result?
Ditto Adam Pepper, what does this look like? If there is no other configuration, seems like it would be a banner or pop-up (like the Web Widget).
Adam Pepper, they have an example on the announcement. Looks like it is a banner right under your header (since that is where they placed the script). Seems like a headache to implement if your header is not like the Copenhagen theme.
Hi Jeremy, you could edit the script but it wouldn't be supported by Zendesk.
Hi Adam, the header looks like the screenshot below. It's really easy to implement if you just download the file and follow the steps outlined above. It would look great on most themes and should only take a couple of minutes!
@David Gillespie
The reason I ask is we run services, SAS installations on service providers AWS etc and it would be useful to point something like this at different providers so customers can see if there are planned outages or interruptions in the main services that might affect their installation.
I've converted my main page to a similar thing already but a more stylish solution would be welcome.
Hello! Am I correct that if there is no current status incident, then no banner will display? If true, is there any way to test the banner functionality in the event there is no current status incident?
Is there a way to scope this to only watch for status changes to a single component on the status page? We have multiple products and a branded help centre for each one. We don't want to display a warning when any incident occurs, just one affecting that brand.
Thanks.
What incident types does it show are scheduled maintenance excluded? Thanks.
David Gillespie I have the same question as Annie Ashenfelter - Is there a way to test by a console command in the browser?
Atlassian has a way to test their embeddable option if you use their code, I am curious if there is something similar for testing this integration even if it fires off a dummy banner with no context or content other than a basic header message showing that it is displaying correctly?
Thank you all for the recent questions!
Annie: Yes you're correct, if there is no current incident then nothing will be displayed.
Dan: We don't support targeting a specific component at the moment. Happy to take that feedback on board.
SLIP Admin: The integration shows all incidents that do not have status "resolved". So it will include both unplanned incidents and scheduled maintenance.
Annie/Jeremy: We don't have an "official" test method at the moment, however we're planning to make a test page available that can (temporarily) be used in place of YOUR_STATUS_PAGE_URL to confirm that the integration has been set up correctly.
Thanks David, you can see our integration here - https://toolkit.data.wa.gov.au/. I have done some testing and can confirm its the component status, anything other than Operational, that will trigger the status notification to be displayed.
It would be good if the affected component was shown otherwise customers might think that it's the Help guide that is under maintenance, I'm not sure how many customers would click through to view the details. But overall pleased to see this integration. Thank you.
Thanks for the input, and glad to hear the integration is covering most of what you need. I've noted your suggestion about displaying the name of the specific component that's affected.
This is very useful. Thanks for the detailed write up.
Please sign in to leave a comment.