ProofClaw

Embed Trust Widget

Add a ProofClaw trust widget to any website. The widget fetches live trust data and renders a compact card showing shield score, tier, publisher verification, and links to the full Trust Center.

Open Embed Wizard

Script snippet (recommended)

Add the script tag once, then place data-proofclaw-agent divs wherever you want a widget. The script is under 5 KB, cached for 1 hour, and deferred until the DOM is ready.

<script defer src="https://www.proofclaw.io/embed/widget.js"></script>

<!-- Full widget -->
<div data-proofclaw-agent="threat-radar"></div>

Badge-only mode

Shows only the badge image linked to the Trust Center. Great for footers, sidebars, and README badges.

<div data-proofclaw-agent="threat-radar"
     data-badge-only="1"></div>
Replace threat-radar with your agent ID. You can place multiple widgets on the same page.

Iframe fallback

If you cannot run third-party scripts, use an iframe instead. The iframe embed renders a self-contained HTML page with the same widget.

<iframe
  src="https://www.proofclaw.io/embed/threat-radar"
  width="440"
  height="90"
  frameborder="0"
  style="border:none;overflow:hidden"
  title="ProofClaw Trust Widget"
></iframe>

Badge-only iframe

<iframe
  src="https://www.proofclaw.io/embed/threat-radar?badge=1"
  width="140"
  height="56"
  frameborder="0"
  style="border:none;overflow:hidden"
  title="ProofClaw Trust Badge"
></iframe>

Query parameters:

  • ?theme=darkDark color scheme
  • ?compact=trueCompact mode (smaller height)
  • ?badge=1Badge-only mode

React component

Drop-in React component that loads the embed script and manages the widget lifecycle. Works with any React 18+ project.

"use client";

import { useEffect, useRef } from "react";

const SCRIPT_URL = "https://www.proofclaw.io/embed/widget.js";
let scriptLoaded = false;

function loadScript() {
  if (scriptLoaded) return;
  scriptLoaded = true;
  const s = document.createElement("script");
  s.src = SCRIPT_URL;
  s.async = true;
  document.head.appendChild(s);
}

export function ProofclawWidget({
  agentId,
  theme = "light",
  compact = false,
  badgeOnly = false,
}: {
  agentId: string;
  theme?: "light" | "dark";
  compact?: boolean;
  badgeOnly?: boolean;
}) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    loadScript();
    const el = ref.current;
    if (el) {
      el.removeAttribute("data-proofclaw-loaded");
      el.textContent = "";
    }
  }, [agentId, theme, compact, badgeOnly]);

  return (
    <div
      ref={ref}
      data-proofclaw-agent={agentId}
      data-theme={theme}
      {...(compact ? { "data-compact": "1" } : {})}
      {...(badgeOnly ? { "data-badge-only": "1" } : {})}
    />
  );
}
// Usage
<ProofclawWidget agentId="threat-radar" />
<ProofclawWidget agentId="threat-radar" badgeOnly />
<ProofclawWidget agentId="threat-radar" theme="dark" compact />

Next.js

Use next/script for the global script tag, then render widgets in any component.

// app/layout.tsx
import Script from "next/script";

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://www.proofclaw.io/embed/widget.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
// app/page.tsx  (or any server/client component)
export default function Page() {
  return (
    <div data-proofclaw-agent="threat-radar" />
  );
}
Or use the React component above for full prop-driven control.

Attributes

AttributeValuesDescription
data-proofclaw-agentagent IDRequired. The agent to display.
data-themelight | darkColor scheme. Defaults to light.
data-compact1 | trueCompact mode hides publisher info and links.
data-badge-only1 | trueRenders only the badge image linked to the Trust Center.

Which URL should I use?

ProofClaw serves trust data from two domains. Pick the one that fits your use case.

Use caseBase URLPaths
Partner embed (script / iframe)www.proofclaw.io/embed/widget.js, /embed/<id>
Raw trust JSON / badge SVG (direct)trust.proofclaw.io/api/trust/<id>, /api/badge/<id>
App-resolved API (proxied)www.proofclaw.io/api/trust/<id>, /api/badge/<id>
The website proxy (www.proofclaw.io/api/...) resolves trust data through the Next.js app and adds fixture fallback in dev. The trust subdomain (trust.proofclaw.io/...) hits the trust-serve backend directly and is the canonical source for CI/CD pipelines and programmatic verification.

Download embed pack

Ready-to-use files for common setups. Each link downloads a single file.

proofclaw-embed.htmlProofclawWidget.tsxREADME.md

Live preview

The widgets below are rendered by the same embed script partners use.

Default

Badge only

The live preview fetches from the trust API. If the trust backend is unavailable, you will see a "Trust data unavailable" fallback.

Copy & paste

Script snippet

<script async src="https://www.proofclaw.io/embed/widget.js"></script>

<!-- Full widget -->
<div data-proofclaw-agent="threat-radar"></div>

Iframe snippet

<iframe
  src="https://www.proofclaw.io/embed/threat-radar"
  width="440"
  height="90"
  frameborder="0"
  style="border:none;overflow:hidden"
  title="AgentShield Trust Widget"
></iframe>

Badge-only iframe

<iframe
  src="https://www.proofclaw.io/embed/threat-radar?badge=1"
  width="140"
  height="56"
  frameborder="0"
  style="border:none;overflow:hidden"
  title="AgentShield Trust Badge"
></iframe>

Validate endpoints

Check that the trust and badge endpoints are reachable and returning the expected content for threat-radar.

Smoke test

Run these commands to verify all embed endpoints are live.

# 1. widget.js headers (expect content-type: application/javascript)
curl -sSI https://www.proofclaw.io/embed/widget.js | head -4

# 2. Embed page (expect 200)
curl -sSo /dev/null -w "%{http_code}\n" https://www.proofclaw.io/embed/threat-radar

# 3. Trust API — JSON (expect 200, content-type: application/json)
curl -sSI https://trust.proofclaw.io/api/trust/threat-radar | head -4

# 4. Trust API — badge SVG (expect 200, content-type: image/svg+xml)
curl -sSI https://trust.proofclaw.io/api/badge/threat-radar | head -4

# 5. Website API — trust JSON (expect 200)
curl -sSo /dev/null -w "%{http_code}\n" https://www.proofclaw.io/api/trust/threat-radar

# 6. Website API — badge SVG (expect 200)
curl -sSo /dev/null -w "%{http_code}\n" https://www.proofclaw.io/api/badge/threat-radar

Troubleshooting

Badge image broken or blank

Verify the badge URL returns content-type: image/svg+xml. If you see text/html instead, you may be hitting a Next.js error page. Confirm the agent ID exists and the trust-serve backend is running.

Iframe not rendering

The embed pages at /embed/<id> do not set X-Frame-Options, so they should load in any iframe. If blocked, check your own site's CSP frame-src directive allows www.proofclaw.io.

Trust data unavailable

If the widget shows "Trust data unavailable", the upstream trust-serve may be down. Check /status for live endpoint health. In local dev, ensure TRUST_UPSTREAM_URL is set or enable fixtures with TRUST_FIXTURES_ENABLED=1.

← Back to Docs