Live preview
The badge below probes /beak/metrics in real time and reflects the current API state.
Embed snippet
Paste this single <script> tag anywhere in your HTML. The widget self-renders into a <div id="sd-status"> target and probes /beak/metrics on load.
<!-- Space Duck API Status Badge -->
<div id="sd-status"></div>
<script>
(function() {
var API = 'https://czt9d57q83.execute-api.us-east-1.amazonaws.com/prod/beak/metrics';
var target = document.getElementById('sd-status');
if (!target) return;
function render(state, label) {
var cls = state === 'ok' ? '' : (state === 'warn' ? ' sd-warn' : ' sd-err');
target.innerHTML =
'<span style="display:inline-flex;align-items:center;gap:8px;padding:8px 14px;' +
'border-radius:999px;font-family:system-ui,sans-serif;font-size:13px;font-weight:700;' +
(state==='ok' ? 'background:#f4fff6;border:1px solid #b8dfc4;color:#155724' :
state==='warn' ? 'background:#fff8ec;border:1px solid #f0d29c;color:#8b5a00' :
'background:#fff4f4;border:1px solid #efc2c2;color:#9f2d2d') + '">' +
'<span style="width:10px;height:10px;border-radius:50%;flex-shrink:0;background:' +
(state==='ok' ? '#20a15a' : state==='warn' ? '#d89c16' : '#d43f3f') + '"></span>' +
label + '</span>';
}
render('warn', 'Space Duck API: Checking…');
fetch(API)
.then(function(r) { return r.ok ? r.json() : Promise.reject(r.status); })
.then(function(d) {
var ok = d && (d.status === 'ok' || d.ducklings !== undefined);
render(ok ? 'ok' : 'warn', ok ? 'Space Duck API: Operational' : 'Space Duck API: Degraded');
})
.catch(function() { render('err', 'Space Duck API: Unavailable'); });
})();
</script>
Minimal CDN version
Prefer a single CDN-hosted script? Use this one-liner to load the widget asynchronously from Duck Galaxy.
<div id="sd-status"></div>
<script src="https://spaceduckling.com/assets/sd-status-widget.js" async></script>
What the embed does
🟢 Live probe
On every page load the widget fetches /beak/metrics and maps the response to Operational / Degraded / Unavailable.
🪶 Zero dependencies
Pure vanilla JS. No npm, no bundler, no framework. Works in any static site, CMS, or legacy HTML page.
🎨 Auto-styled
Three colour states (green / amber / red) with matching border and pill style. Looks sharp on light or dark backgrounds.
🔒 CORS-safe
The Beak metrics endpoint allows cross-origin reads. The embed runs client-side with no server proxy needed.
⚡ Non-blocking
The API probe runs after page load so it never blocks your site's critical rendering path or LCP score.
Graceful fallback
If the probe times out or the network is unavailable, the badge shows "Unavailable" rather than hiding or erroring silently.
Badge states
States are derived from the /beak/metrics HTTP response: 200 with a valid JSON body = Operational; 200 with unexpected shape = Degraded; non-200 or network error = Unavailable.