Status page layout
Customize your status page’s appearance, organize services into groups, select embed options for your website, and use the announcement bar to share important updates.
This article will guide you in further customizing your status page. Now that you’ve completed the key configurations, you can explore various design options to make your page reflect your brand.
Status page appearance
You can adjust the appearance of your status page to reflect your company brand. Choose between light and dark mode and upload your logotype and favicon.
Status page layout options
Service groups: How to group related services together
Service groups let you group related services together on a status page. This allows users to quickly see the overall health of a system and identify any issues that may be impacting multiple services.
Below is an example service group from our status page. When the service group is collapsed, it shows a combined status and uptime graph. When the service group is expanded, it shows the status and uptime graph for each service individually. The overall status of multiple services in a service group is calculated by taking the status of the service with the highest impact. Similarly, the uptime percentage and outage graph is calculated by combining the outages of all services.
To create a service group
Navigate to the status page for which you want to create a service group
Go to the Services tab.
Click on the Create service group button and give it a name.
You can add services to the service group during creation or later by dragging and dropping services into the group.
Use the following settings on a service group and service to further customize how they appear on your status page:
Expand group on page: Activate this option if you want to expand the entire service group by default on your status page
Show uptime history: Activate this option if you want to show the service's historical uptime and its SLA
Services layout: single vs responsive columns
You can choose between two layout options for displaying services on your status page.
A single column presents items in a vertical list.
Responsive columns arrange items in a grid with up to 3 columns that adapt to your screen size.
To change the service on a status page
Go to Status pages and click on the status page you want to change its layout.
Click on the Services tab
Select your layout option and click save
Embed the status of your status page on your website
Communicate incidents to your users right where they are using your service: on your website or web app.
To embed the status of your status page in your web app or website, you can use ilert's floating status widget or status badge. The status page widget will only be visible if there is an ongoing incident or scheduled maintenance and will be hidden if all services are operating normally. The status widget will always be visible and show the overall status of your status page.
To configure your status page floating widget:
Go to Status Pages
Click on the Status Page where you would like to configure the widget
Click on the Status embed tab
Select Floating widget
Configure your widget by choosing your colors and widget position, copy the generated snippet code.
Paste the generated code snippet from step 4 into the
<head>section of your target page.Test the widget by creating a test maintenance window or incident.
The localization of the widget will be automatically detected using the viewer's browser language. If you want to set the language to a fixed setting, you can optionally provide the query parameter &lng=en or &lng=de to the scripts already existing parameters.
Announcement Bar
Share essential announcements via your status page. Enable an announcement bar in the status page settings. To make your message more engaging, use simple Markdown and emojis. The announcement bar will be shown at the top of your status page.
Last updated
Was this helpful?