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:

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:

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:

At runtime, the <div id="replace-with-subscribe"></div> will automatically replaced and your header will look like this:

 

Last modified on May 7, 2020
Cached at 7:25 PM on Oct 31, 2020 |

Additional Help

Ask the Community