Embed the availability badge
A small pill showing current availability and, when one is known, the next opening date. It is an iframe, it needs no script on your page, and it sets no cookie.
The snippet
Replace YOUR_USERNAME with the freelancer’s Candid Beacon username, then paste this where the badge should appear.
<iframe src="https://app.candidbeacon.com/embed/badge?u=YOUR_USERNAME" title="Availability status" loading="lazy" style="width:100%;max-width:448px;height:48px;border:0;overflow:hidden"></iframe>This is the same snippet the app’s own “Add to your site” screen produces. It is built here from the same values, and a test fails if the two ever disagree.
Its size, and where the numbers come from
Width is fluid up to 448px; height is fixed at 48px. Those are the badge’s measured intrinsic size rather than round numbers: the pill is 44px tall in every state, and its widest state - “Full” alongside a next-opening date - is 445px. 448 is the next step up on an 8-point grid, so the pill never wraps at full width, and 48 leaves room for the single line of wrap that happens on host pages narrower than about 320px.
An iframe cannot size itself to its contents across origins, so these are the numbers to give it. Making the frame shorter clips the wrap; making it much taller leaves the pill floating in dead space, because the badge document centres itself vertically inside whatever height it is given.
What it shows
| State | The pill reads |
|---|---|
| Available | Available. No date line - the label already says they are free now. |
| Busy or Full | Busy or Full, plus Next opening: 3 Sep 2026 when a date is known. |
| Away | Away, plus Back on 24 Dec 2026 when a return date is set. |
| Unresolvable | Unavailable, in the same neutral grey as Away. |
Every state also carries a distinct shape beside the word - a tick, a half-filled circle, a slashed circle, a pause - so the badge does not rely on colour alone, and it ends with a small “Powered by Candid Beacon” attribution. When the username resolves, the whole pill is a link to that person’s full Beacon page, opening in a new tab.
The badge carries no freshness marker, unlike the Beacon page. The pill is deliberately minimal, and a freshness phrase does not fit it. If it matters to you how recently a status changed, link to the Beacon page - see Keep it from going stale.
A username nobody owns
A typo, or a username belonging to an account that has since been deleted, renders the neutral Unavailable pill. It never paints an error into your page, and it never links anywhere. The response carries a 404 status in that case - so it is discoverable if you are checking - but what appears on the page is the neutral badge, not a browser error.
If the embed is missing its ?u= parameter entirely, or the badge cannot be fetched at all, the frame stays blank rather than showing anything.
Framing, caching and privacy
- This is the one Candid Beacon page that permits framing. Every other page on the app refuses it outright. The badge sets its own framing policy for exactly this purpose, so it works on any origin without anything being configured for your domain.
- It caches for ten seconds. Short enough that a status change reaches your visitors promptly, long enough that a popular page does not re-fetch on every view.
- It sets no cookie and needs no script from you. Nothing is recorded about the people who see it.
- It can never show more than the Beacon page does. Both read the same published data through the same code, so there is no state in which the badge reveals something the freelancer’s own page does not.