03Card install

A multi-Service embed
for your /status section.

The Card is a live-updating widget that shows all of an Account's Services with 90 days of uptime bars and an Incident banner. It's a Pro-tier feature — the upgrade target above the Badge.

The snippet

One <script> tag plus a <div> per Card. The script is shared — drop it once on the page even if you mount multiple Cards.

HTML
<script src="https://glimly.dev/c/embed.js" async></script>
<div data-glimly-card="<token>"></div>

Options

Per-embed overrides ride on data-attributes — no JavaScript config needed. Theme and services filter are the two you'll reach for most.

HTML · dark theme, filtered Services
<div
  data-glimly-card="<token>"
  data-theme="dark"
  data-services="api,web,workers"
></div>
  • data-themeauto (default), light, dark.
  • data-services — comma-separated Service IDs. Restricts the Card to a subset of your Account's Services.

Polling & freshness

  • The bundle fetches /c/<token>.json on first paint.
  • Polls every 30 seconds while the page is visible.
  • Pauses when the tab is hidden (Page Visibility API). Re-fetches immediately on re-focus, then resumes the 30-second cadence.
  • The "updated Xs ago" string ticks locally each second without re-fetching — feels live without thrashing the network.

Shadow-DOM isolation

The Card mounts inside an attached shadow root, so host-page CSS can't bleed in and the Card's CSS can't leak out. You don't need to namespace your own styles around it.

Failure modes

  • Unknown token → renders a neutral header with "Status unavailable", no rows. No 404 at the HTTP layer.
  • JSON fetch fails (network blip, 5xx) → keeps the last successful render and retries on the next polling tick.
  • JS bundle fails to load → the host page's <div> stays empty. Graceful degradation.

Caching

Every /c/<token>.json response is CloudFront-cached for 15 seconds at the edge, with the same stale-while-revalidate / stale-if-error window as the Badge. The JS bundle itself is hash-versioned and cached for ~31 days; deploys cache-bust by URL.

Test against three host pages

Before publishing a Card on a high-traffic page, pre-flight the embed in three places: your own site, a CodePen, and any third-party host. Open DevTools and watch the network panel: the page should make a /c/<token>.json request every 30 seconds while focused, and stop polling the moment you switch away from the tab. Switching back fires an immediate refetch.

Card install · Docs · Glimly · Glimly