Status widget and badge

Show visitors that everything is up, right on your own website. The widget is a small live pill for your footer; the badge is an image for places that can't run scripts. Both show a published status page and are free on every plan.

Add the widget

In the app, open Status pages and click Embed on the page you want to show. Copy the snippet and paste it where the widget should appear, typically in your site's footer:

html

<script src="https://spotdowntime.com/embed.js" data-status-page="your-page" async></script>

The widget shows the overall status (All systems operational, Partial outage, Major outage or Under maintenance). Clicking it lists each service with its status and links to your full status page.

Let your AI assistant add it

Using Claude Code, Cursor, GitHub Copilot, Windsurf or another AI coding assistant? Open your website's project and paste this prompt. The assistant finds your footer and adds the widget the right way for your framework (Next.js, React, Vue, WordPress, plain HTML…), and updates your Content Security Policy if you have one.

The AI assistant tab in the Embed dialog gives you this prompt with your status page already filled in. Here, replace your-page with your page's address:

prompt

Add the Spot Downtime status widget to this website's footer, so visitors can see our services are up.

Details
- Status page: https://spotdowntime.com/status/your-page
- Widget script: <script src="https://spotdowntime.com/embed.js" data-status-page="your-page" async></script>
- Optional attributes: data-theme="light" or "dark" (default follows the visitor's system setting), and data-target="#element-id" to render inside an existing element instead of where the script tag is.
- Docs: https://spotdowntime.com/docs/status-widget

What to do
1. Find the site-wide footer: the component, layout or template rendered on every page. If there is no footer, use the main layout.
2. Add the widget there exactly once, in the way that fits this project:
   - Plain HTML or server templates (PHP, Django, Rails, Laravel Blade, Jinja, Liquid, Hugo, Jekyll, Eleventy…): put the script tag where the widget should appear in the footer.
   - Next.js (App Router or Pages Router): add an empty placeholder in the footer, e.g. <span id="spotdowntime-status" />, and load the script with next/script in the same footer component: <Script src="https://spotdowntime.com/embed.js" data-status-page="your-page" data-target="#spotdowntime-status" strategy="afterInteractive" />. next/script doesn't render in place, so data-target is required.
   - React (Vite, CRA), Vue, Nuxt, Svelte, SvelteKit, Angular, Astro: add the placeholder element in the footer component, and load the script once (e.g. in index.html before </body>, or the framework's head/script API) with data-target pointing at it. Never inject the script on every render or route change. Keep the placeholder in a component that stays mounted (the layout footer).
   - WordPress: add it to the footer through a Custom HTML block or widget in the footer area, or a child theme's footer.php. Never edit core or parent-theme files.
   - Shopify, Webflow, Squarespace, Wix, Framer, Ghost: these are set in the site builder, not in code. Tell me exactly where to paste the script tag (the footer code injection / custom code setting).
3. If the site sets a Content-Security-Policy (response headers in framework config or middleware, a <meta http-equiv="Content-Security-Policy"> tag, or hosting config like vercel.json, netlify.toml, _headers or nginx), add https://spotdowntime.com to script-src and to connect-src. Don't loosen anything else.
4. Don't change other markup, styles or dependencies. Keep the script async so it never slows the page down.
5. When done, tell me which files you changed, and how to check it: open the site and look at the footer. It should show a small pill like "● All systems operational"; clicking it lists each service with its status.

Review the assistant's changes before you deploy, as you would any code change.

Options

Attribute	Values	What it does
`data-status-page`	Your page's address, e.g. acme	Required. Which status page to show.
`data-theme`	`auto` (default), `light`, `dark`	auto follows the visitor's light or dark mode setting.
`data-target`	A CSS selector, e.g. `#status`	Put the widget inside that element instead of right after the script tag.

Add the badge

For README files, site builders that don't allow scripts, and emails, use the image badge instead:

html

<a href="https://spotdowntime.com/status/your-page">
  <img src="https://spotdowntime.com/api/v1/public/status/your-page/badge.svg" alt="Status">
</a>

In Markdown, e.g. a GitHub README:

markdown

[![Status](https://spotdowntime.com/api/v1/public/status/your-page/badge.svg)](https://spotdowntime.com/status/your-page)

Change the left-hand text with ?label=, e.g. badge.svg?label=uptime or ?label=API (up to 30 characters).

Content Security Policy

If your site sends a Content-Security-Policy header, allow spotdowntime.com so the browser can load the widget and its status:

http

Content-Security-Policy: script-src 'self' https://spotdowntime.com; connect-src 'self' https://spotdowntime.com

For the badge, allow it in img-src. Without these, the browser blocks the widget and your page carries on normally; the reason appears in the browser console.

How it works

The widget loads one small script (a few KB, no dependencies) and draws itself in an isolated Shadow DOM, so your site's CSS can't break it and it can't affect your page.
It checks the status every minute while the tab is visible, and stops when it's removed from the page.
Status comes from your monitors, cached for about 30 seconds, so the widget and badge reflect an outage within a minute or two.
It only shows what your public status page shows: service names you chose and their status. Never URLs, hosts or error details.
The status page must be published. Unpublishing it hides the widget and the badge.
The widget sets no cookies and collects nothing about your visitors.

Troubleshooting

Problem	Fix
Nothing appears	Check the browser console. Usually the status page isn't published, the address in data-status-page is wrong, or your Content Security Policy blocks the script.
The popover is cut off	A parent element has overflow: hidden. Give the widget more room above it, or move it with data-target.
The badge shows an old status	Image caches. The badge is cached for about a minute; some services (like GitHub) cache images longer.

Want visitors to hear about outages, not just see them? Turn on email subscriptions on the status page; see setting up a status page.

Something missing or unclear? Tell us.