#Website widget

The widget puts a small square card, about 80 pixels wide, in a corner of your own website: a bar for each of the last 14 days, the uptime over the last 30, and, if you turn it on, that UpHeron knows of no vulnerabilities in the site. A click opens your status page. On phones it shrinks to a round button; a tap shows the details and a button to the status page.

It is free on every plan. You need an UpHeron account (Free is enough), because the widget shows one of your status pages: every monitor gets its own, and any published page without a password works.

#Add it

1. In the dashboard, open Status pages and choose Badges and widget in the page's menu. A monitor's own page is named after the monitor.
2. Under Website widget, choose the corner and the other options. The previews show it on a wide window and on a phone.
3. Copy the line and add it to every page of your website, just before </body>:

<script src="https://upheron.com/widget.js?page=acme-status-3k7q2" async></script>

acme-status-3k7q2 is your page's address: the part of its link after /status/.

#Where the line goes

In Next.js, add it to app/layout.tsx (or pages/_app.tsx):

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en">
    <body>
      {children}
      <Script src="https://upheron.com/widget.js?page=acme-status-3k7q2" strategy="lazyOnload" />
    </body>
  </html>;
}

#Options

Options go in the script's address after page, each after a &. Build yours here, or see them all:

Something else in that corner, such as a chat button or a cookie banner? Move the widget up with y, or to another corner. On phones with a notch or a home bar, the offsets start at the edge of the safe area.

#What it shows

• The status: the uptime turns amber while something is slow or recovering and red during an outage, and today's bar shows the day's failed checks. The card's tooltip says the status in words; the panel on phones has it with a colored dot.
• Uptime: the share of successful checks over the last 30 days, never rounded up to 100% while a check failed, and a bar for each of the last 14 days (30 in the panel on phones). A page that hides its uptime bars shows none here either.
• Secure, 0 CVEs: only after you turn on Say "Secure" while the websites on this page have no known vulnerabilities, and only while each website on the page was checked for vulnerabilities in the last three days, UpHeron found the software it runs, and no vulnerability or end-of-support release is open. While one is open, the widget leaves the line out instead of announcing it to your visitors; it comes back once the fix is in.

A page of several monitors shows them together: an outage when any of them is down, and their uptime combined. The widget uses the page's language (on Pro and Business), links to the page's own domain once it has one, and its phone panel says "UpHeron monitoring" at the top unless the page hides UpHeron's branding. It refreshes every 5 minutes while the page is open; changes reach it within a minute.

#Privacy and security

• It sets no cookies and stores nothing in the visitor's browser, so it needs no cookie consent.
• It is light: about 6 KB compressed, loaded after your page, and served from Cloudflare's cache near each visitor. The line you add stays the same; the widget behind it, and the status it shows, refresh within the hour and the minute.
• Visitors' browsers load the script and the page's status from upheron.com, like any image or font from another site. UpHeron uses their address only to limit requests and doesn't keep it.
• It shows only what your status page already shows to anyone, plus the security line if you turn it on.
• It draws in a shadow root: your CSS doesn't change it, and its CSS doesn't change your page. It builds itself without HTML strings or inline styles, so it works under a strict Content Security Policy that allows script-src https://upheron.com and connect-src https://upheron.com, and with Trusted Types.

#Draw your own

https://upheron.com/status/<page>/widget.json has what the widget shows, and any website may read it (CORS). It answers within a minute of a change:

{
  "lang": "en",
  "name": "Acme",
  "url": "https://upheron.com/status/acme-status-3k7q2",
  "tone": "up",
  "days": ["up", "up", "partial", "up"],
  "uptime": "99.98%",
  "secure": true,
  "branded": true,
  "text": { "status": "All systems operational", "uptime": "99.98% uptime", "period": "30 days", "short": "30d", "secure": "Secure", "cves": "0 CVEs", "safe": "No known vulnerabilities", "header": "UpHeron monitoring", "show": "Show the status of Acme", "close": "Close", "open": "Open the status page" }
}

tone is up, degraded, down or unknown. days holds the last 30 UTC days, oldest first: up, partial (some checks failed), down (at least half failed) or empty (no checks). uptime is null before the first check. text has every word in the page's language. Each visitor may read it 300 times a minute.

Other ways to show a page on every plan: an SVG badge for READMEs, and a one-line status in an iframe.

#When it doesn't show

• Nothing appears. The browser's console says why: a page that isn't right, or a page that isn't published or has a password (the widget shows only what anyone may see). Open https://upheron.com/status/<page>/widget.json to check.
• It covers something, or something covers it. Change y, x or the corner, or leave it out of small windows with hide-below.
• A WordPress site the UpHeron plugin registered. Those monitor themselves without an account, and the widget needs one: add the site to your account, then use its page.