Example Automated Maintenance Page

This is an example of how you can use the Automated Maintenance Page maintenance.js client to automatically show a maintenance page when your project is in maintenance mode.

Inspect the source code to see these concepts in action.

Installation

Get your project ID from the dashboard and add the following script tag to your page (replacing the project ID):

              
<script
  src="https://maintenance.dev/maintenance.js"
  data-project-id="5c08e0e1-bad3-46f2-ba0f-e432cac5c1cf"
  defer
></script>

That's it! The maintenance.js client will automatically handle showing a maintenance page when your project is in maintenance mode (replacing the entirety of your page's <body>).

When your project is no longer in maintenance mode, the maintenance.js client will automatically restore the original page.

Customization & Additional Features

Want to do something different? No problem! The maintenance.js client provides a few extra features to help you customize the experience.

Display Maintenance Window within a container HTML element

Don't want to display the maintenance window over the entire page <body>? Simply add the CSS id maintenance-window to the HTML element you want to contain the maintenance window, and maintenance.js will take care of the rest.

            
<div id="maintenance-window">
  This content will be replaced with the maintenance window
  when maintenance mode is enabled.
</div>

This can be useful if you wish to persist certain elements on the page (such as a navigation bar) while the maintenance window is displayed (as demonstrated on this page).

Display a Loading State

Even though the maintenance.js client is very fast, it still takes a few milliseconds to load the maintenance window. If you wish to hide the main content of your page while the maintenance window is loading, we provide a custom event that you can listen for to hide the main content of your page while the maintenance window is loading.

            
<script>
  /**
    *  Listen for maintenance status changes available. Available via a custom
    *  event named "maintenance-status-changed" dispatched by maintenance.js
    *  any time the maintenance status is updated.
    */
  document.addEventListener("maintenance-status-updated", (event) => {
    let projectStatus = event.detail; // Optional: Realtime project details

    // Hide the loading spinner
    document
      .getElementById("loading-spinner")
      .style.setProperty("display", "none");

    // Show the content
    document
      .getElementById("maintenance-window")
      .style.setProperty("display", "block");
  });