Quickstart:

  1. Create a new message, choose a name and optionally add a message body.
  2. Get the api key, it starts with ops_msg_...
dashboard
  1. Use the API, e.g via curl, replace the last part of the URL with your API key:
    curl https://dashboard.oopsalert.com/api/v1/messages/ops_msg_M....a

You will get an output like this:

{"enabled":false}
  1. Enable the message in the dashboard, add a body if you didn’t do that when creating the message.
enable
  1. Use the API again and now the output will be:
{"name":"Demo","contents":"Oops! Something bad happened! We are working on fixing it!","enabled":true}

Webpage example

  1. Create a simple web page with html. For example:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OopsAlert Demo</title>
  </head>
  <body>
    <div class="content">
      <h1>Welcome to the Demo Page</h1>
      <p>This is a simple demo page to showcase OopsAlerts functionality.</p>

      <h2>How it works</h2>
      <p>The OopsAlert will automatically poll an endpoint every 30 seconds to check if the message is enabled.</p>

      <h2>Sample Content</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
    </div>
  </body>
</html>
  1. the oopsalert.js client (or write your own)
  2. Add the following script tags:
    <script src="oopsalert.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        OopsAlert.init({
          apiKey: "<ADD YOUR API KEY>",
          checkInterval: 30000
        });
      });
    </script>

  1. Replace "<ADD YOUR API KEY>" with the api key found on https://dashboard.oopsalert.com

  2. Enable the message in the dashboard and open the example page in a browser.

example