Status page embed

Embed a Logdash status page by dropping a copy-paste component into your site, which renders live status and 90 days of history from a public JSON API, or by adding SVG uptime badges anywhere an image tag works.

The obvious way to embed a status page is an iframe, and it is the one way that does not work here. The hosted Logdash page sends frame-ancestors 'none', because a page that can be framed can be used for clickjacking. Uptime Kuma blocks framing from other domains too until you set UPTIME_KUMA_DISABLE_FRAME_SAMEORIGIN=true, and its docs say that block is what stops the page being used for phishing. So skip the frame and embed the data.

The widget is a component that lives in your codebase. Install it with shadcn and it renders the overall status, one row per monitor and 90 daily bars, styled by your Tailwind theme so it matches the page around it.

# React
npx shadcn add https://logdash.io/r/react/status-page.json

# Svelte
npx shadcn-svelte add https://logdash.io/r/svelte/status-page.json

The data comes from https://api.logdash.io/v1/status_pages/<id>, which needs no key and answers requests from any origin, so the widget runs fine on a static site. Responses are cached for 60 seconds and the client polls once a minute, pausing while the tab is hidden. If a request fails, the widget keeps the last good data instead of going blank.

Embed status page in website pages with a badge

A badge is an SVG, so it goes wherever an image goes: a marketing footer, a docs sidebar, a GitHub README. Every monitor on a published status page has a badge key, and the badge picker in the status page settings puts it into a ready snippet for you. This component swaps light and dark with the visitor system theme; in plain HTML the markup is the same with srcset instead of srcSet.

status-badge.tsx

const badge =
  'https://api.logdash.io/public_dashboards/your-status-page-id/badges/your-badge-key.svg';

export function StatusBadge() {
  return (
    <a href="https://logdash.io/d/your-status-page-id">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcSet={badge + '?style=card&theme=dark'}
        />
        <img alt="API status" src={badge + '?style=card&theme=light'} />
      </picture>
    </a>
  );
}

style=classic reads uptime 30d and a percentage, the shields.io shape READMEs expect. period sets the window: 24h, 7d, 30d (the default) or 90d. It has one colour scheme, so theme does nothing.
style=status shows the monitor name and its state: Operational, Degraded, Down or Unknown. It takes theme=light or theme=dark.
style=card shows name, uptime and 90 daily bars in a 120 pixel tall card. It takes theme, and its window is always 90 days.

Badges are cached for 60 seconds. Below Pro they carry a small Logdash mark; on Pro, the plan that also gets custom domains, the mark is gone.

Uptime Kuma embed status page options

Uptime Kuma is the usual free answer, and its embed story is close to this one: badges for status, uptime, ping, response time and certificate expiry, for any monitor on a published status page. The difference is who runs it. Kuma serves its badges from your own server, so when that box goes down the badge breaks with it.

Embedding: Logdash vs Uptime Kuma

Feature	Logdash	Uptime Kuma
Iframe the whole page	Blocked	Allowed after one env var that turns off a protection
Widget for your own pages	React and Svelte component on a public JSON API	Internal API, not supported for third parties
Badge types	Uptime, current status, 90-day card	Status, uptime, ping, response time, cert expiry
Who keeps badges online	Logdash	Your server
Free monitors	5, checked every 5 minutes	As many as your server holds

When Uptime Kuma is the better pick

You already run a server and want unlimited monitors for the price of that server. The Logdash free plan stops at 5.
You need a certificate expiry or ping badge. Logdash checks HTTP status and response time only.
You want the whole page framed as it is and accept turning off that protection.

From monitor to embed

Monitor the endpoint Add an HTTP monitor for the URL your visitors depend on. On the free plan it is checked every 5 minutes, with status code and response time stored.
Publish and embed Add the monitor to a status page and publish it, then copy the badge snippet or the status page id for the widget.
Test the alert Make the endpoint return a 503. The monitor goes down on the next check, the status badge reads Down within about 2 minutes, once its caches expire, and by then the Telegram alert is already on your phone.

Can I embed status page in website pages with an iframe?

Not the hosted Logdash page. It sends frame-ancestors 'none' to block clickjacking. Use the component, which renders the same data inside your own markup, or a badge image.

Is there a status page widget for React and Svelte?

Yes. One shadcn or shadcn-svelte command copies a status page component into your project. It polls the public API once a minute and uses your Tailwind theme.

Does the Uptime Kuma embed status page option need an iframe?

For the full page, yes, and only after you set UPTIME_KUMA_DISABLE_FRAME_SAMEORIGIN=true. Otherwise Kuma offers badges for monitors on a published status page, served from your own server.

Which status page embed works in a GitHub README?

A badge. GitHub renders SVG images and supports the picture tag with prefers-color-scheme, so the light and dark snippet from the badge picker works as pasted.