@certivu/badge

@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