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.
<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.
<div
data-glimly-card="<token>"
data-theme="dark"
data-services="api,web,workers"
></div>data-theme—auto(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>.jsonon 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.