Status page

Status pages are one of the most important pieces of your incident management process, Creating a public status page and providing it to your users can be very beneficial, for example:

• Users/Clients can be ensured of the status of your services at any time
• It can eliminate duplicate or false tickets which can be submitted from users at the time of any incident.
• You can inform your users of future maintenance or incidents.

Create a Status Page

Creating a status page on Xitoring is very straightforward, Just navigate to Status Page from the Side menu, and Click on Create a New Status page on the top right side of the page.

In the create page you see two parts for configuration:

1. Configuration

In this section, you enter the initial details for the new status page, as described below.

Title

Provide a page title for your status page e.g. ACME Status Page

Sub Domain

You can pick a *.xitoring.io for your status page. e.g. yourcompany.xitoring.io

Custom URL

In the creating page, you enter the domain that you want your status page to be available on for example status.yourcompany.com after that, you just need to add a simple line to your domain configurations like the below:

status.yourcompany.com    CNAME    status.xitoring.com

Xitoring issues automated SSL for Status pages on custom domains, if you'd like to provide your own certificates please contact support.

Password

This is an optional field, provide a password if you want to make your Status Page private, and restricted to use only with a password.

History in Days

Set how many days of historical data you want to display on the status page (e.g., 30 days).

Logo Link

Provide the link to your logo image, which will be displayed on the status page header.

Announcement Banner

This is an optional field to provide a short text, which is always displayed on your Status Page header to everyone.

Meta description

This is an optional field to provide preferably 260 characters as a meta description for search engines.

Google Tag ID

Enter your Google Tag ID for tracking analytics if needed.

Disallow robots

Enable this option to discourage search engines from indexing your status page.

2. Assign Checks

In this section, you can select which Checks you are willing to show information and details about on the status page.

Checks can also be grouped, and you can reorder or rename checks as needed.

You can see and select all of the checks despite of whether they are checks that are related to servers or independent checks. you can also select whole checks from groups or sub-groups with just one click.

3. Email Subscription

In this section, you can configure an email subscription service for your status page. This allows you to send email updates about incidents and maintenance directly to users.

Email Subscription Settings

Fill in the following fields to set up your email subscription:

• Address: The email address from which the emails will be sent (e.g., test@mail.com).
• Name: The name that will appear as the sender (e.g., Test ).
• Host: The mail server host (e.g., mail.test.com).
• Port: The port to connect to your mail server. Note: For technical reasons, port 25 is not allowed. You can use other ports like 587.
• Encryption: Select the encryption method for your email (e.g., TLS).
• Username: The username for the email account.
• Password: The password for the email account.

This configuration ensures you can send out email updates to users who subscribe to your status page. Make sure the details are correct and that you test the connection before going live.

4. Appearance (Branding & Theme)

This section allows you to customize the visual appearance of your status page.

Branding

• Logo: Upload your logo (PNG, JPEG, JPG).
• Favicon: Upload your favicon (ICO, PNG, GIF, JPEG).
• Logo Position: Choose whether to position the logo on the Left or Center of the page.

Layout

• Choose between List or Grid layouts for how your checks and status will be displayed.

Options

• Hide Check Type: Enable this to hide the check types (e.g., Ping, HTTP) from being displayed.
• Hide Recent Incidents: Optionally hide the display of recent incidents.
• Hide Details Page: Enable this option to hide the details page.
• Hide Uptime Percentage: Optionally hide uptime percentages .
• Include Uptime Graphs: Toggle this to display uptime graphs on the status page.
• Allow Dark Mode: Enable a dark mode option.
• Allow Full Screen: Enable full-screen mode for the status page.

Graph Options

• Select the default period for uptime graphs: Last Hour, Last 24 Hours, Last 7 Days, Last 30 Days, Last Month, or This Year.
• Allow users to select a specific period to view uptime data.

Theme Customization (Light Mode & Dark Mode)

• Customize colors for different elements of your status page:

  • Primary Color: Set the primary color for the page (e.g., buttons).
  • Text Color: Set the color for general text.
  • Status Up Color: Color for systems that are operational.
  • Status Down Color: Color for systems that are down.
  • Status Pause Color: Color for systems that are paused.
  • Maintenance Color: Define the color used for maintenance .
  • Header Background Color: Set the background color for the page header.
  • Body Background Color: Choose a background color for the body section.
  • Border Color: Set the color for borders throughout the status page.
  • Tooltip Color: Choose the color for tooltips.

  you can also configure the colors for dark mode to ensure your status page matches your branding even when users switch to dark mode.

CSS Class Reference

In this section, you can add your own custom CSS to further modify the appearance of your status page. This is useful for unique styling beyond the available settings.

className	usage
.header-container	container of header section page
.header-text	Announcement banner
.logo-container	container of logo
.logo-link	link of logo (a tag)
.logo-img-box	box of image tag logo
.header-icon-btns	button icons of header
.fullscreen-btn	full screen button
.dark-mode-switch	dark mode switch
.header-refetch-text	text of header refetch
.header-timezone	header timezone
.main-container	container of main section page
.main-paper	box of main elements section
.summary-status	summary status
.main-table	main table
.main-table-group	group tables of main table
.table-group-name	group name of tables
.uptime-widget	uptime widget of table
.uptime-widget-label	label of uptime widget
.uptime-widget-type	type of uptime widget
.uptime-widget-link	link to view uptime widget
.uptime-widget-percentage	percentage of uptime widget
.uptime-widget-status	status of uptime widget
.uptime-widget-bar	bar of uptime widget
.uptime-widget-tooltip	tooltip of uptime widget
.main-table-sub-group	sub groups main table
.table-sub-group	sub group table
.title-acc	title of accordions
.recent-in-acc	recent incidents accordion
.recent-in-acc-summary	recent incidents accordion summary
.recent-in-acc-details	recent incidents accordion details
.footer-link	link of footer
.maintenance-acc	maintenance accordion
.maintenance-acc-summary	maintenance accordion summary
.maintenance-acc-details	maintenance accordion details
.title-check-page	titles of check page
.relate-incident-acc	related incidents accordion
.relate-incident-acc-summary	related incidents accordion summary
.relate-incident-acc-details	related incidents accordion details
.maintenances-check-page	maintenance check page
.auth_container	container of auth page
.auth_form	form of auth page
.auth_card	card of auth page
.auth_logo	logo of auth page
.auth_title	title of auth page
.auth_label	input labels of auth page
.auth_input	input of auth page
.auth_error	error text of auth page
.auth_submit	submit button of auth page

Custom Translations

you can modify and edit the JSON file directly to customize the text in different languages. There’s also an option to auto-translate the content into other languages via a selection box. Available language options include:

• Turkish (tr)
• Italian (it)
• German (de)
• Spanish (es)
• French (fr)
• English (en)