Category: Design

Status.io status pages are developed with accessibility in mind. VPAT® Status.io has completed the VPAT® (Voluntary Product Accessibility Template) Revised Section 508 Edition based on VPAT® Version 2.4 for the status page product. We use this report to help guide our efforts to continue improving accessibility. Customizable Design Each status page is fully customizable by […]

Fully customize your status page by using custom HTML, CSS and JavaScript. Custom code can be used to change the look and feel of your status page, from minor changes such as fonts and colors, to major changes such as creating an entirely new layout. Custom code can also be used to add functionality such […]

By default containers are labeled as Locations when displayed within incident and maintenance events on the status page. You may choose to rename the label to something more suitable for your situation. In the below example, we changed the container label to Data Centers. Rename the container label from the Settings/Incident & Maintenance tab in […]

Infrastructure Explained: Components represent core system functions (ex. website, API). Containers are logical groups used to organize components by location or service type. Infrastructure Layout Options: Containers are displayed below each component on the status page. Use the container display setting to choose to hide the containers or arrange them in either a horizontal or vertical […]

The last updated time is displayed in the status bar at the top of the status page. Be default the last updated time is only updated when a change is made to the status page. Optionally turn on the setting Automatically update the last update time to force the last updated time to always show […]

By default the status history is accessible via the History link at the bottom of the status page. If you’d prefer to display some or all of the history on the main page: Select the Design/History tab in the dashboard and scroll down to the setting “Display limited history on the status page” and toggle […]

Use JavaScript to modify or increase the functionality of your status page. Add your custom JavaScript from the Design tab in the Dashboard. All JavaScript code should be wrapped in SCRIPT tags. Warning: Due to the nature of web design, please test your JavaScript to ensure compatibility. 

Customize your status page using HTML. Almost every element of the page can be customized using HTML. Add your custom HTML from the Design tab in the Dashboard. Warning: Due to the nature of web design, please test your HTML to ensure compatibility. 

Use style sheets to alter the appearance of your status page. Every element of the page can be customized using CSS. Add your custom CSS from the Design tab in the Dashboard. Warning: Due to the nature of web design, please test your CSS to ensure compatibility.  Example CSS structure: body { color: #dbd9d9; background-color: […]

Add Google Translate to your status page to enable end-users to choose which language they prefer. This is a non-official feature. Notes: Add this code snippet to the “HTML Header” in the Design tab <div id=”google_translate_element”></div><script type=”text/javascript”> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: ‘en’, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, ‘google_translate_element’); } </script><script type=”text/javascript” src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>