Setting up the Atlassian Statuspage integration for Guide

<div class="article-banners">
<div id="docs-wmp-link"><a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" target="_blank" rel="noopener">What's my plan?</a></div>
<div id="suite_gpee" class="article-banner">
<table>
<tbody>
<tr>
<td><strong>All Suites</strong></td>
<td>Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>
<div id="support_with_guide_all" class="article-banner">
<table>
<tbody>
<tr>
<td><strong>Support with</strong></td>
<td>Guide Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body">
<p class="p" dir="ltr">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. The status widget appears in the help center only when there's an impact to service.</p>
<p class="p"><img id="statuspage_support_chat__image_twr_krm_qjb" class="image img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/statuspage_guide.png" width="500"></p>
<p class="p" dir="ltr">You must be an admin to set up and configure the Atlassian Statuspage widget for Guide and you must have a public page for <a class="xref" href="https://www.statuspage.io" target="_blank" rel="noopener">Atlassian Statuspage</a>. You set up the widget by adding a JavaScript snippet that runs a script to display status page incidents in your help center.</p>
<p class="p" dir="ltr">This article contains the following topics:</p>
<div class="p">
<ul id="statuspage_support_chat__ul_ozw_1x5_cjb" class="ul">
<li class="li"><a class="xref" href="#topic_nj4_sjg_cjb">Uploading the script as a help center theme asset</a></li>
<li class="li"><a class="xref" href="#topic_cr4_wjg_cjb">Adding the code snippet to the header template</a></li>
<li class="li"><a class="xref" href="#topic_rtf_xjg_cjb">Deleting the Atlassian Statuspage widget</a></li>
</ul>
</div>
<p class="p" dir="ltr">Related articles:</p>
<ul id="statuspage_support_chat__ul_wj3_w3g_cjb" class="ul">
<li class="li" dir="ltr">
<p class="p" dir="ltr"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408827893658" target="_blank" rel="noopener">Installing and using the Atlassian Statuspage integration for Support</a></p>
</li>
</ul>
</div>
<div id="topic_nj4_sjg_cjb" class="topic nested1" aria-labelledby="ariaid-title2">
<h2 id="ariaid-title2" class="title topictitle2">Uploading the script as a help center theme asset</h2>
<div class="body">
<p class="p">The first part of setting up the status page integration is uploading the JavaScript file as a help center theme asset.</p>
<div class="p">
<div class="div">
<p class="p" dir="ltr"><strong class="ph b">To upload the JavaScript file to your theme assets</strong></p>
<ol id="topic_nj4_sjg_cjb__ol_vdp_2x5_cjb" class="ol">
<li class="li" dir="ltr">Download the <a class="xref" href="https://support.zendesk.com/hc/en-us/article_attachments/4408851945754" target="_blank" rel="noopener">statuspage-widget.js</a> file.</li>
<li class="li" dir="ltr"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank" rel="noopener">Knowledge admin</a>, click <strong class="ph b">Customize design</strong> (<img id="topic_nj4_sjg_cjb__d7e59" class="image" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span></li>
<li class="li" dir="ltr">On the theme you want to edit, click <strong class="ph b">Customize</strong> to open it, then click <strong class="ph b">Edit code</strong>.
<div class="p">
<br><img id="topic_nj4_sjg_cjb__image_cyj_2gv_cjb" class="image img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/statuspage_guide_theme_asset.png" width="600">
</div>
</li>
<li class="li">In the assets directory, click <strong class="ph b">Add asset</strong>.
<div class="p">
<br><img id="topic_nj4_sjg_cjb__image_ubg_hgv_cjb" class="image img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/statuspage_guide_add_asset.png" width="600">
</div>
</li>
<li class="li">Select the the<strong class="ph b"> statuspage-widget.js</strong> file on your computer, and click <strong class="ph b">Open</strong>.
<div class="p">
<br><img id="topic_nj4_sjg_cjb__image_avb_kgv_cjb" class="image img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/statuspage_guide_upload_file.png" width="600">
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
<div id="topic_cr4_wjg_cjb" class="topic nested1" aria-labelledby="ariaid-title3">
<h2 id="ariaid-title3" class="title topictitle2">Adding the code snippet to the header template</h2>
<div class="body">
<p class="p">To complete setting up the integration, a script is added in the header template to display status page incidents in your help center.</p>
<p class="p"><strong class="ph b">To add the code snippet to the header template</strong></p>
<div class="p">
<ol id="topic_cr4_wjg_cjb__ol_v13_ry5_cjb" class="ol">
<li class="li" dir="ltr"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank" rel="noopener">Knowledge admin</a>, click <strong class="ph b">Customize design</strong> (<img id="topic_cr4_wjg_cjb__d7e59" class="image" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span></li>
<li class="li" dir="ltr">On the theme you want to edit, click <strong class="ph b">Customize</strong> to open it, then click <strong class="ph b">Edit code</strong>.</li>
<li class="li">In your theme code configuration page under the <strong class="ph b">templates</strong> directory, click the <strong class="ph b">header.hbs</strong> template file.
<p class="p">The file content is displayed.</p>
<div class="p">
<br><img id="topic_cr4_wjg_cjb__image_rdn_ngv_cjb" class="image img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/statuspage_guide_headerfile.png" width="600">
</div>
</li>
<li class="li">In the <strong class="ph b">header.hbs</strong> file, paste the following snippet after the &lt;header/&gt; tags:
<pre class="pre codeblock"><code>&lt;script type="text/javascript" id="statuspage-widget" statuspage="https://YOUR_STATUSPAGE_URL" src="{{asset 'statuspage-widget.js'}}"&gt;&lt;/script&gt;</code></pre>
<div class="p">
<br><img id="topic_cr4_wjg_cjb__image_xkv_pgv_cjb" class="image img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/statuspage_guide_add_script.png" width="600">
</div>
</li>
<li class="li">Replace <strong class="ph b">YOUR_STATUS_PAGE_URL</strong> with your public Atlassian Statuspage URL. You can also use the Zendesk test status page URL <samp class="ph systemoutput">https://test1282.statuspage.io/</samp> if you need to test and verify your installation.</li>
<li class="li">Click <strong class="ph b">Publish</strong>. The status page is displayed in your help center.
<div class="p">
<div class="note note">
<span class="notetitle">Note:</span> If the public Atlassian Statuspage URL is incorrect, or if an invalid JSON is returned, the widget will not appear in your help center. If Atlassian Statuspage is not fully operational, the widget is not displayed.</div>
</div>
</li>
</ol>
</div>
</div>
</div>
<div id="topic_rtf_xjg_cjb" class="topic nested1" aria-labelledby="ariaid-title4">
<h2 id="ariaid-title4" class="title topictitle2">Deleting the Atlassian Statuspage widget</h2>
<div class="body">
<p class="p">To delete the integration, delete the statuspage-widget.js theme asset and the snippet you added in the header template of your help center theme.</p>
</div>
</div>