Skip to main content

Reference

Embed & Badges.

Put a branded badge in your footer, embed a live widget, or hit the JSON API from your own code.

Attribution Badge.

A small branded link for your status page or site footer. Pick the variant that contrasts with your page so people notice it.

For Dark Pages

html

Preview

CheckUpstream
<a
  href="https://checkupstream.com"
  target="_blank"
  rel="noopener"
  style="display:inline-flex;align-items:center;gap:8px;border:1px solid #E0E0E0;background:#FAFAFA;border-radius:6px;padding:6px 10px;font-family:ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#0A0A0A;text-decoration:none;"
>
  <svg viewBox="0 0 20 20" width="14" height="14" fill="none">
    <circle cx="3" cy="13" r="2" fill="#00A855"/>
    <circle cx="7" cy="16" r="2" fill="#00A855"/>
    <circle cx="11" cy="12" r="2" fill="#00A855"/>
    <circle cx="15" cy="8" r="2" fill="#00A855"/>
    <circle cx="19" cy="4" r="2" fill="#00A855"/>
    <circle cx="1" cy="1" r="1.2" fill="#00A855" opacity="0.5"/>
    <circle cx="19" cy="19" r="1.2" fill="#00A855" opacity="0.5"/>
  </svg>
  CheckUpstream
</a>
HTML

For Light Pages

html

Preview

CheckUpstream
<a
  href="https://checkupstream.com"
  target="_blank"
  rel="noopener"
  style="display:inline-flex;align-items:center;gap:8px;border:1px solid #2A2A2A;background:#050505;border-radius:6px;padding:6px 10px;font-family:ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#FAFAFA;text-decoration:none;"
>
  <svg viewBox="0 0 20 20" width="14" height="14" fill="none">
    <circle cx="3" cy="13" r="2" fill="#00FF87"/>
    <circle cx="7" cy="16" r="2" fill="#00FF87"/>
    <circle cx="11" cy="12" r="2" fill="#00FF87"/>
    <circle cx="15" cy="8" r="2" fill="#00FF87"/>
    <circle cx="19" cy="4" r="2" fill="#00FF87"/>
    <circle cx="1" cy="1" r="1.2" fill="#00FF87" opacity="0.4"/>
    <circle cx="19" cy="19" r="1.2" fill="#00FF87" opacity="0.4"/>
  </svg>
  CheckUpstream
</a>
HTML

Hosted SVG (auto-updating)

Prefer a single line of HTML? Point an <img> tag at our hosted badge endpoint. It auto-updates when we redesign and gives us impression analytics so we know which sites are featuring us. The trade-off: a runtime dependency on checkupstream.com. If you want the badge to keep working when our servers don't, stick with the inline SVG above.

<a href="https://checkupstream.com" target="_blank" rel="noopener">
  <img src="https://checkupstream.com/api/v1/badge/attribution?theme=dark"
       alt="Powered by CheckUpstream" height="28" />
</a>
HTML

Swap theme=dark for theme=light on light-backgrounded sites. Cached for 1 hour at the edge.

Live Status Badge.

An SVG badge that shows the worst current dependency status for your org. No credentials required — the URL is public and slug-scoped, the same way shields.io and Codecov badges work. If your org has sensitive infrastructure, turn the badge off in Settings → Organization → Public Badges and the endpoint will return a neutral Private badge.

<img src="https://checkupstream.com/api/v1/badge/{orgSlug}"
     alt="Dependency Status" />
HTML

Colors match the standard convention: green for healthy, yellow for degraded, orange for partial outage, red for outage.

Never embed an API Token in a badge URL

The badge endpoint does not accept ?key= or Authorization parameters. Previous versions of these docs showed an example with a bearer token in the URL — don't do that. Anything you put in a badge <img src> gets committed to every README that embeds the badge, and README files are public.

Markdown

![Dependencies](https://checkupstream.com/api/v1/badge/{orgSlug})
HTML

Per-service JS embed.

A single <script> tag renders a live reliability pill for any service we track. Zero runtime dependencies, no iframe, cached at the edge for 60 seconds. Handy for vendor status pages, comparison sites, or a README footer.

<script src="https://checkupstream.com/embed/badge.js?service=stripe"></script>
HTML

Replace stripe with any service slug (openai, github, cloudflare, etc.). The script appends a pill element immediately after itself, so the insertion point is wherever you place the <script> tag in your HTML. Invalid slugs log a console warning and render nothing.

Status Widget.

Embed a compact status list on your website. Shows real-time data from your public status page.

<iframe
  src="https://checkupstream.com/status?embed=true"
  width="320"
  height="400"
  frameborder="0"
  style="border: 1px solid #1A1A1A; border-radius: 8px;"
  title="CheckUpstream Status"
></iframe>
HTML

Machine-Readable Status.

Every service status page has a JSON endpoint. Fetch it from your own monitoring, scripts, or dashboards.

GET /status/{slug}/status.json
Bash

Returns the service name, current status, 30-day uptime percentage, and recent incidents. Cached for 30 seconds with stale-while-revalidate.

Start monitoring.

Set up in 5 minutes. Free plan includes 2 projects and 5 monitored services.

Get StartedRead the Docs