How can I have a status page similar to https://status.atlassian.com/ ?

[Amit Nangare]

We have 2 products with separate components and customers and would like to have a landing page similar to https://status.atlassian.com/. The user can then decide the product they would like to know the status of and subscribe for updates to that product. What is the best way to achieve this and which subscription is required to make this work?

[Shivam Naik]

Hi @Amit Nangare ,

Happy to help!

The Atlassian Page https://status.atlassian.com/ is actually a combination of image panes linked to the main Statuspage product pages. So for instance, clicking on JIRA software will take you from https://status.atlassian.com/ to https://jira-software.status.atlassian.com/.

Ultimately what you'll need to consider is site/page customization mentioned here https://support.atlassian.com/statuspage/docs/css-and-javascript-snippets-for-customizations/ to customize how those pages look and get them looking closer to how Atlassian has theirs.

Please let me know if you have any follow up questions!

[Amit Nangare]

Thanks for the response @Shivam Naik

I'm not looking to have the exact same look and feel but have the structure of a parent page with individual image panes which have the high-level status and link to the detailed status page.

Can you clarify if the parent page in this instance (https://status.atlassian.com/)  is part of the status page offering or is it a separate page that we will need to host on our website?

Also, do we need a specific subscription tier to have 2 different detailed status pages (eg- https://jira-software.status.atlassian.com/) for the 2 products linked from the parent page?

Thanks!

[Shivam Naik]

Hi @Amit Nangare ,

status.atlassian.com is not the Statuspage itself, its a page hosting Statuspage Embeds and links to the Statuspage Product sites themselves. Below is the web code for the JIRA Software pane for example:

<a href="https://jira-software.status.atlassian.com/" target="_blank" class="page-status-container span6 status-none" id="page-7yh3h3y0c0x1">

        <div class="logo">

          <img src="https://wac-cdn.atlassian.com/dam/jcr:a89c4cb0-5e3f-4b0c-90aa-8d4323c7be25/logos-jira software-icon-contained-gradient-blue-161x161@2x">

        </div>

        <div class="status-info">

          <div class="product-name">Jira Software

             </div>

          <div class="stub-for-status">Operational</div>

        </div>

      </a>

In order to use Embeds, the plan will need to be Public in order for that to work, but if you intend to create that for Private users, it could work as well.

Please let me know if you have any follow up questions!