Use custom HTML on a status page

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.

Where Custom HTML Gets Inserted

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.

Replacing The Subscribe Button

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>

 

Additional Help