Live status widget

Showcase live status with the embedded widget

This widget showcases the latest system health and embeds in your HTML by simply pasting our code. It is traditionally placed in a website's footer, contact pages, and support documentation and it is not uncommon to place it under navigation such as header dropdown or sidebars. The choice is yours.

Status priority order

The status is displayed based on the highest priority of your components' statuses. Below is the priority list from highest to lowest.

Planned Maintenance
Critical Outage
Partial Outage
Degraded Performance
Operational

Consider your status page with 4 components A, B, C, and D. If components A, B, and C are in the Degraded Performance state and D is in the Critical Outage state, then the widget will show Critical Outage. This is how the above priority comes to play in the embedded widget.

Customisation

Spike offers out of the box support for Light, Dark, and System modes. You can further override our default CSS to modify the look and feel. All HTML classes are prefixed with spike-- class names.

Visit your status page dashboard at https://statuspage.spike.sh
Navigate to Widget from the sidebar
Click Get code and paste it in your <body> tag

Below is an example of snippet on initialising with configuration options.

<script>
    // Initialize the widget with custom settings
    Spike.initializeStatusWidget({
        element: "#spike-live-status", // set your html element's unique identifer
        statusPageId: "<your unique id>", // do not change this
        theme: "system", // Other options -> light, dark
        console: true // Set to 'false' to disable error logs
    })
</script>

Customise it to meet your frontend stack's needs on loading and initialising the snippet.

Security

Select your domains and them to allowlist for the widgets to load. Use an asterisk (*) to allow all subdomains - *.example.com. While debugging, we suggest using a provider like ngrok and temporarily adding their domains to test.

PreviousEmbed status page notifications on your website NextCreate Uptime monitor

Last updated 3 months ago

Was this helpful?

<script> // Initialize the widget with custom settings Spike.initializeStatusWidget({ element: "#spike-live-status", // set your html element's unique identifer statusPageId: "<your unique id>", // do not change this theme: "system", // Other options -> light, dark console: true // Set to 'false' to disable error logs }) </script>