--- title: "Status page embed: widget and uptime badges | Logdash" description: "Embed live status in your website: a React or Svelte widget on a public JSON API, or SVG badges in classic, status and card styles, light or dark." url: https://logdash.io/status-page/embed --- # 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. ## Status page widget 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. ```bash # 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/`, 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 ```typescript const badge = 'https://api.logdash.io/public_dashboards/your-status-page-id/badges/your-badge-key.svg'; export function StatusBadge() { return ( API status ); } ``` - `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 1. **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. 2. **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. 3. **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. ## Keep reading [All status page guides](https://logdash.io/status-page): One page per question, from the status page API to a free page on your own domain. [Status page examples](https://logdash.io/status-page/examples): The status pages worth copying are GitHub for incident updates, Vercel for per-region components, Stripe for a short component list, Linear for showing an unflattering number and Cloudflare for maintenance notices. [Status page best practices](https://logdash.io/status-page/best-practices): Host the status page apart from your app, drive it from real checks, list only what customers can tell apart, show uptime over a stated window rounded down, and post a timestamped update at least every hour during an incident. [Status page API](https://logdash.io/status-page/api): Every status page you publish in Logdash is also public JSON at api.logdash.io/v1/status\_pages/:id, with no API key and CORS open to any origin, so you can render it on your own site in your own design. [Uptime monitoring](https://logdash.io/features/monitoring): HTTP checks as often as every 15 seconds. When one fails, Telegram tells you before your users do.