Badges

Developer docs

Every badge is rendered and signed on noticedsites.com from your award ID, so the award, date and site name can't be edited. Find your award IDs in Dashboard → Submissions → Get your badge.

1. Image (no JavaScript)

SVG (≤ 3 KB) or PNG for email signatures and places that don't take SVG.

svg

<a href="https://www.noticedsites.com/b/go/aw_9f3c" target="_blank" rel="noopener">
  <img src="https://www.noticedsites.com/b/aw_9f3c.svg?variant=inline&amp;size=md&amp;theme=auto"
       alt="Noticed Sites award" width="200" height="56">
</a>

png

<a href="https://www.noticedsites.com/b/go/aw_9f3c" target="_blank" rel="noopener">
  <img src="https://www.noticedsites.com/b/aw_9f3c.png?variant=inline&amp;size=md&amp;theme=auto&amp;scale=2"
       alt="Noticed Sites award" width="200" height="56">
</a>

2. iframe

A sandboxed cross-origin frame. No script runs inside it, and the link opens your site's page on Noticed Sites.

html

<iframe src="https://www.noticedsites.com/b/aw_9f3c.html?variant=inline&amp;size=md&amp;theme=auto" title="Noticed Sites award"
        width="200" height="56" style="border:0" loading="lazy"
        sandbox="allow-popups allow-popups-to-escape-sandbox"></iframe>

3. Script tag

≤ 4 KB gzip, async, CLS 0. It only inserts the iframe above (with optional fixed positioning for ribbons).

html

<script src="https://www.noticedsites.com/badge.js" async data-award-id="aw_9f3c"
        data-variant="inline" data-size="md" data-theme="auto"></script>
<noscript><a href="https://www.noticedsites.com/b/go/aw_9f3c">Noticed Sites award</a></noscript>

4. npm

@noticedsites/badge v2 takes only the award ID. The React wrapper server-renders a followed link and upgrades to the signed iframe on mount.

tsx

npm i @noticedsites/badge

import { NoticedBadge } from "@noticedsites/badge/react";

<NoticedBadge awardId="aw_9f3c" variant="inline" theme="auto" />

Attributes

Attribute	Values	Default
award-id	Your award ID (from the dashboard)	required
variant	inline · seal · ribbon-right · ribbon-left · ribbon-top-right · ribbon-top-left	inline
size	sm · md · lg (inline/seal)	md
theme	light · dark · auto	auto
show-score	Boolean	false
position	fixed · inline (wrapper only)	fixed for ribbons
offset	CSS length to clear sticky headers	0
z-index	Number	9999

Verify a badge

Each SVG carries data-ns="<id>.<signature>" and an X-Noticed-Signature header, an HMAC over the award's canonical claims. Check one here:

GET /b/{awardId}.json?sig=…

{ "valid": true, "id": "aw_9f3c", "award": "sotd", "date": "2026-10-16", "score": 7.92,
  "site": { "slug": "acme-studio", "title": "Acme Studio", "url": "https://www.noticedsites.com/sites/acme-studio?ref=badge" },
  "claims": "v1|aw_9f3c|sotd||2026-10-16|acme-studio|7.92", "signature": "…", "signatureMatches": true }

CSP

Content-Security-Policy

img-src https://www.noticedsites.com;     # image badges
frame-src https://www.noticedsites.com;   # iframe / script / npm
script-src https://www.noticedsites.com;  # script tag only

Privacy

No cookies, no localStorage, no fingerprinting. We count impressions and clicks per day and embedding host (shown in your dashboard). IPs aren't stored. You don't need a consent banner for the badge.