Migrate Statuspage to use Atlassian accounts
Learn everything you need to know to migrate you and your team to Atlassian accounts.
For security reasons, we can't show your custom HTML on an activated public page when using the subdomain URL (e.g. companyname.statuspage.io).
You must set up a custom domain (e.g. status.companyname.com) in order to publish custom HTML.
The custom HTML feature lets you add a custom header and footer to your status page. When you're not using custom HTML, the DOM structure looks something like this:
1
2
3
4
<div class="layout-content">
<div class="masthead-container">...masthead here...</div>
<div class="container">...page content here...</div>
</div>
Whatever you have typed into the Custom Header box in the management area will replace the div.masthead-container. Whatever you have typed into the Custom Footer box will be appended after the div.container that holds the rest of your content. Having the custom header and custom footer outside of the div.container allows you to use the full width of the page.
Once you've added custom HTML and CSS, the DOM structure will look like this:
1
2
3
4
5
6
7
8
9
<div class="layout-content">
<div class="custom-header-container">
{{ Custom Header Inserted Here }}
</div>
<div class="container">...page content here...</div>
<div class="custom-footer-container">
{{ Custom Footer Inserted Here }}
</div>
</div>
Security headers such as X-Frame-Options are not allowed in status pages to enable cross-origin requests.
When you're not using a custom header, the subscribe button is automatically on the page in the div.masthead. You'll remember that whatever you place inside the custom header field will replace the original div.masthead.
In order to add the subscribe functionality back to your page, you'll need to add <div id="replace-with-subscribe"></div> somewhere in your custom header. This special <div> gets replaced by the subscriber button-dropdown ui element that's on all status pages.
Here's an example:
1
2
3
4
5
6
7
<header>
<nav class="container">
<div id="replace-with-subscribe"></div>
<a href="#">Contact</a>
<a href="#">Home</a>
</nav>
</header>
At runtime, the <div id="replace-with-subscribe"></div> will automatically replaced and your header will look like this:
1
2
3
4
5
6
7
8
9
10
<header>
<nav class="container">
<div class="updates-dropdown-container">
<a href="#" id="show-updates-dropdown">...</a>
<div class="updates-dropdown">...</div>
</div>
<a href="#">Contact</a>
<a href="#">Home</a>
</nav>
</header>
Was this helpful?