@certivu/badge

A self-contained <certivu-badge> web component that displays the provenance status of AI-generated content. It calls the public, CDN-cacheable Certivu status endpoint and renders a compact trust pill that expands into a provenance panel.

• Framework-free custom element — works with React, Vue, Svelte, Astro, plain HTML.
• Zero runtime dependencies. Encapsulated with Shadow DOM.
• Themable via CSS custom properties (Warm Dusk defaults).
• Fails safe — a network or lookup error never throws or breaks the host page.

Certivu verifies signed provenance when present. A "Provenance not found" result does not imply content is human-made, and does not mean content is fake — it simply means no Certivu provenance record was matched for the supplied token.

Install

npm

npm i @certivu/badge

import "@certivu/badge"; // auto-registers <certivu-badge>

<certivu-badge token="ctv_..."></certivu-badge>

CDN (no build step)

<script src="https://cdn.certivu.ai/integrations/badge.js"></script>
<certivu-badge token="ctv_..."></certivu-badge>

Usage

<!-- Compact pill (default) -->
<certivu-badge token="ctv_abc123"></certivu-badge>

<!-- Full variant, custom API base -->
<certivu-badge
  token="ctv_abc123"
  variant="full"
  api-base="https://api.certivu.ai"
></certivu-badge>

Click (or focus + Enter/Space) a verified badge to toggle an inline provenance panel showing organization, model, signed timestamp, and generator status, plus a link to verify on Certivu. Press Escape to close it.

Attributes

| Attribute | Required | Default | Description | | ---------- | -------- | -------------------------- | ------------------------------------------------------------------ | | token | Yes | — | The ctv_... provenance token to look up. | | api-base | No | https://api.certivu.ai | Base URL of the Certivu API. | | variant | No | compact | compact or full. full appends the CERTIVU wordmark. |

Changing token or api-base after mount re-fetches automatically.

States

| State | Pill | Notes | | -------------------- | ----------------------------- | ------------------------------------------------------ | | Loading | Checking… | Shown while the status request is in flight. | | Verified | ✓ Verified by Certivu | valid === true and generator is active. Clickable. | | Provenance not found | Provenance not found | Invalid token, no record, or revoked generator. | | Error | Unable to verify | Network/other error. Never throws. |

Theming

Set CSS custom properties on the element (or any ancestor) to restyle it:

<certivu-badge
  token="ctv_abc123"
  style="
    --certivu-badge-bg: #0f0d1a;
    --certivu-badge-fg: #d8d0e8;
    --certivu-badge-muted: #9a94ac;
    --certivu-badge-accent: #3dd68c;
    --certivu-badge-neutral: #9a94ac;
    --certivu-badge-radius: 8px;
    --certivu-badge-font: 'Inter', system-ui, sans-serif;
  "
></certivu-badge>

| Custom property | Default | Affects | | -------------------------- | ------------------------ | ------------------------------------ | | --certivu-badge-bg | #1e1c2c | Pill and panel background. | | --certivu-badge-fg | #d8d0e8 | Primary text. | | --certivu-badge-muted | #9a94ac | Secondary text / labels. | | --certivu-badge-accent | #3dd68c | Verified accent (dot, text, link). | | --certivu-badge-neutral | #9a94ac | Neutral state dot / revoked status. | | --certivu-badge-radius | 999px | Pill corner radius. | | --certivu-badge-font | system sans-serif stack | Font family. |

The pill and panel are also exposed as ::part(pill) and ::part(panel) for deeper styling from the host page.

License

MIT