Badge & region embeds

@fidemark/badge ships two drop-in components that share the same React peer + Web Component API:

Component	What it does	When to use
<fidemark-badge>	Renders a pill summarising one attestation by UID.	You know the UID and want a click-through proof marker next to a credit line, footer, or sidebar.
<fidemark-region>	Wraps a content subtree, recomputes its canonical hash on the client, and verifies the bytes match an on-chain attestation.	You want visitors to see exactly which content is covered, with tamper detection at view time.

Both fit in under 15 KB and render entirely from the public verify API — no SDK, no wallet.

A live demo is at /badge-demo on any verify deployment.

---

FidemarkBadge

A 4 KB embed that renders the verification status of any Fidemark attestation as a compact pill, click-through to the full verify page.

React

npm install @fidemark/badge

import { FidemarkBadge } from "@fidemark/badge";

<FidemarkBadge uid="0xabc…" theme="light" />

Props:

Name	Type	Default
uid	string	required
apiBase	string	https://verify.fidemark.dev
theme	"light" | "dark"	"light"

The component fetches ${apiBase}/api/attestation/${uid} once per uid. While loading: shows “verifying…”. On success: pill with status. On error: red pill with the error message.

Web Component (vanilla HTML / Vue / Svelte / etc.)

The Web Component bundle is published to npm as @fidemark/badge and can be loaded straight from a public CDN. The snippet below pins to a major version on jsDelivr, so patch and minor releases land automatically while breaking changes do not:

<script type="module" src="https://cdn.jsdelivr.net/npm/@fidemark/badge@^0.1/dist/web-component.js"></script>

<fidemark-badge uid="0xabc…" theme="dark"></fidemark-badge>

Pin to an exact version (@fidemark/[email protected]) if you prefer reproducible deploys, or self-host the file from your own bundler / static origin if you would rather not depend on a public CDN. The package ships a ready-to-serve dist/web-component.js (ESM) and dist/web-component.global.js (IIFE for plain <script> tags).

Attributes:

Name	Default
uid	required
api-base	https://verify.fidemark.dev
theme	light

The web component is fully self-contained: its styles live in a Shadow DOM root and don’t leak into the host page. No React or framework runtime needed.

What it shows

Attestation state	Pill content
Valid Human Proof	✓ Human Proof
Valid Human Proof, ENS-verified	✓ Human Proof (ENS)
Valid AI Proof	✓ AI Proof · <modelId>
Revoked	✗ Revoked
Lookup error	⚠ <error message>

Clicking the badge opens the verify page in a new tab.

---

FidemarkRegion

A region wraps a content subtree, declares the attested UID + canonical hash via attributes, and runs a three-way check at view time:

1. Declared hash (in markup) — what the publisher pasted in.
2. Recomputed hash — sha256(canonicalizeDom(subtree)) computed in the browser.
3. On-chain hash — fetched from EAS via the verify API.

If the three agree and the attestation is not revoked, the corner pill says ”✓ Verified”. Any divergence flips the pill: tampered (declared ≠ recomputed), mismatch (declared ≠ on-chain), revoked, or unreachable. Visitors can click the pill to read all three hashes side by side.

Canonicalization rules are documented in the DOM canonicalization spec and are identical across the TS, Python, and Go SDKs, so a hash computed at publish time will match the hash a browser computes at view time.

React

import { FidemarkRegion } from "@fidemark/badge";

<FidemarkRegion
  uid="0xabc…"
  contentHash="0xdef…"
>
  <article>
    <h2>Attested headline</h2>
    <p>Attested body.</p>
  </article>
</FidemarkRegion>

Props:

Name	Type	Default
uid	string	required
contentHash	string	required (0x + 32 bytes hex)
apiBase	string	https://verify.fidemark.dev
outline	"subtle" | "strong" | "off"	"subtle"
className, style, children	passthrough

Web Component

<script type="module" src="https://cdn.jsdelivr.net/npm/@fidemark/badge@^0.1/dist/region.js"></script>

<fidemark-region uid="0xabc…" content-hash="0xdef…">
  <article>
    <h2>Attested headline</h2>
    <p>Attested body.</p>
  </article>
</fidemark-region>

Attributes mirror the React props (kebab-cased). The custom element is registered automatically on script load. The light DOM children stay in place (selectable, indexable by search engines, accessible to screen readers); only the pill and side panel live inside a shadow root.

Computing the canonical hash at publish time

The hash you put in content-hash must equal what the browser computes from the rendered subtree. Use any SDK to derive it:

// TypeScript
import { hashRegion } from "@fidemark/sdk/dom";
const hash = await hashRegion(document.querySelector("article#post-42")!);

# Python
from fidemark import hash_region
hash = hash_region(html, "#post-42")

// Go
hash, err := fidemark.HashRegion(htmlString, "#post-42")

Full workflow, status states, and edge cases are covered in the region verification guide.

Status states

State	Trigger
Verified	Declared = recomputed = on-chain, and not revoked.
Tampered	Declared ≠ recomputed. Page bytes drifted from what was attested.
Mismatch	Declared ≠ on-chain. Markup carries the wrong UID, or attester signed off on different bytes.
Revoked	All three hashes match but the attester revoked.
Unreachable	Could not fetch the attestation (network, malformed UID, unsupported network).

The component watches its subtree with a MutationObserver, so editing content in DevTools (or via contentEditable) flips the pill live. Run the demo at /badge-demo to see it.

---

Choosing badge vs. region

• Use <fidemark-badge> when the page already explains what is attested (a sidebar credit, an article header, a comment-thread footer). The visitor trusts the markup says what’s covered, you give them a one-click verification chip.
• Use <fidemark-region> when you want the visitor to verify the bytes themselves at view time, no trust required. Wrap the exact paragraph, image alt, or block that the attestation covers. Use multiple regions per page if different sections have different attesters (Human Proof on the body, AI Proof on a generated illustration, etc.).

A page can mix both freely: a top-of-page <fidemark-badge> summarising the attestation alongside a <fidemark-region> wrapping the body whose hash it certifies.