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://d1rsfp2c29g6x.cloudfront.net/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.