OpenUptime

Embed your status

Show the live state of a status page on your own site, in a README or in an email, with one line of code. No API key needed.

Badge

Add the script where you want the badge to appear. Replace my-page with the slug of your status page and the host with your own domain if you self-host.

<script src="https://openuptime.app/embed.js" data-slug="my-page" async></script>
<noscript><a href="https://openuptime.app/status/my-page">System status</a></noscript>

The <noscript> line is optional: visitors without JavaScript get a plain link to the status page instead of nothing. Tip: it also works as a standalone link if you do not want the script at all.

It renders a small pill with a coloured dot and the current state, links to the status page and refreshes every minute. The badge lives in a Shadow DOM, so your site's CSS cannot break it.

The banner sits at the top of the page and only appears while something is degraded or down.

<script src="https://openuptime.app/embed.js" data-slug="my-page" data-mode="banner" async></script>

Script options

  • data-slug: the status page slug (required).
  • data-mode: badge (default) or banner.
  • data-lang: en or zh-CN. Defaults to the page's lang.
  • data-theme: light, dark or unset to follow the visitor's system.
  • data-target: a CSS selector. The badge is placed inside that element instead of next to the script tag.
  • data-always: set to true to keep the banner visible when everything is operational.

SVG badge

For a README, an email or anywhere JavaScript does not run, use the image. It is cached for a minute.

<img src="https://openuptime.app/api/public/status/my-page/badge.svg" alt="status">
[![status](https://openuptime.app/api/public/status/my-page/badge.svg)](https://openuptime.app/status/my-page)

Add ?lang=zh for Chinese text.

JSON

Build your own widget from the summary endpoint. It allows cross-origin reads from any site and is cached for 30 seconds.

curl https://openuptime.app/api/public/status/my-page/summary

{
  "slug": "my-page",
  "title": "My Product",
  "overall": "operational",      # operational | degraded | outage
  "label": "All systems operational",
  "url": "https://openuptime.app/status/my-page",
  "updatedAt": "2026-10-11T08:00:00.000Z"
}

The full board, with every component and incident, is at /api/public/status/my-page. Incident history is at /api/public/status/my-page/incidents and an RSS feed at /api/public/status/my-page/rss.

The status page editor has an Embed card that generates these snippets for you.

嵌入状态

一行代码，把状态页的实时状态显示到你自己的网站、README 或邮件里。无需 API Key。

徽章

把脚本放在想显示徽章的位置。把 my-page 换成你的状态页 slug；自托管时把域名换成你自己的。

<script src="https://openuptime.app/embed.js" data-slug="my-page" async></script>
<noscript><a href="https://openuptime.app/status/my-page">服务状态</a></noscript>

<noscript> 那一行是可选的：没有启用 JavaScript 的访客会看到一个指向状态页的普通链接，而不是空白。如果不想用脚本，直接放这个链接也可以。

它会渲染一个带彩色圆点和当前状态的小标签，点击跳转到状态页，每分钟自动刷新。徽章在 Shadow DOM 中渲染，不会被你站点的 CSS 影响。

横幅显示在页面顶部，只在有服务降级或中断时才出现。

<script src="https://openuptime.app/embed.js" data-slug="my-page" data-mode="banner" async></script>

脚本参数

  • data-slug：状态页 slug（必填）。
  • data-mode：badge（默认）或 banner。
  • data-lang：en 或 zh-CN，默认取页面的 lang。
  • data-theme：light、dark，不设置则跟随访客系统。
  • data-target：CSS 选择器。徽章会放进该元素，而不是脚本标签旁边。
  • data-always：设为 true 时，一切正常也始终显示横幅。

SVG 徽章

README、邮件等无法运行 JavaScript 的地方，请使用图片，缓存 1 分钟。

<img src="https://openuptime.app/api/public/status/my-page/badge.svg" alt="status">
[![status](https://openuptime.app/api/public/status/my-page/badge.svg)](https://openuptime.app/status/my-page)

加上 ?lang=zh 显示中文。

JSON

也可以用摘要接口自己做组件。该接口允许任意站点跨域读取，缓存 30 秒。

curl https://openuptime.app/api/public/status/my-page/summary

{
  "slug": "my-page",
  "title": "My Product",
  "overall": "operational",      # operational | degraded | outage
  "label": "所有系统运行正常",
  "url": "https://openuptime.app/status/my-page",
  "updatedAt": "2026-10-11T08:00:00.000Z"
}

包含全部组件和事件的完整数据在 /api/public/status/my-page，事件历史在 /api/public/status/my-page/incidents，RSS 在 /api/public/status/my-page/rss。

状态页编辑界面的 嵌入 卡片会自动生成这些代码。

Last updated 2026-10-11最后更新：2026-10-11