Learn

Build your own AI disclosure UI with the headless SDK

Updated June 13, 2026

The managed widget renders a badge and notice for you. If you'd rather build the disclosure into your own design, the headless SDK lets you render any component you like while Disclosed keeps the two things that make the evidence valid: the disclosure wording and the logged, tamper-evident record that it was shown.

One rule up front, and it is the whole point: you cannot change the disclosure text. The SDK hands you the exact, per-language notice; you render it. If you could reword it, the evidence Disclosed produces would no longer certify what was actually shown. You own the markup, styling, position, and framework — not the words, and not the logging.

Vanilla JavaScript

<div id="your-ai-disclosure"></div>

<script src="https://cdn.disclosed.sh/widget-headless.js" data-site="site_live_xxxx"></script>
<script>
  Disclosed.ready(function (content) {
    var el = document.getElementById("your-ai-disclosure");
    el.textContent = content.notice; // e.g. "You are chatting with an AI system, not a human."
    // Hand us the rendered node. We confirm it's visible and legible, then log it.
    Disclosed.get().observe(el);
  });
</script>

content gives you { locale, notice, badge, requireAck, jurisdictions }. Use notice (or badge for a short label) verbatim. If your chatbot requires acknowledgement, call Disclosed.get().acknowledge() when the visitor confirms.

React or Next.js

npm install @disclosed/widget

import { useDisclosure } from "@disclosed/widget/react";

export function AiDisclosure() {
  const { content, ref } = useDisclosure({ siteKey: "site_live_xxxx" });
  if (!content) return null;
  // Attach `ref` to the element that contains the notice — Disclosed verifies
  // and logs it automatically.
  return <p ref={ref} className="my-disclosure">{content.notice}</p>;
}

The hook is SSR-safe and re-logs once per page view, so it works with client-side navigation out of the box.

How a render becomes "verified"

When you call observe(el) (or attach the React ref), Disclosed watches that element and only logs the render as verified once it has confirmed the element is actually on screen, opaque, at a readable size, and contains the disclosure text. That observed, verified record is what your evidence PDF counts.

For surfaces Disclosed can't observe (a <canvas> chat, a native webview), call Disclosed.get().markShown() instead. That still logs the render for the audit trail, but marks it self-reported rather than verified — and your evidence report shows verified and self-reported counts separately, so the record stays honest.

How to know it worked

Open the page. In your Disclosed dashboard, the chatbot's status flips from "Awaiting first disclosure" to Installed within seconds of the first verified render, and that event starts your evidence trail.

Disclosed provides compliance tooling and records; this document is not legal advice. Review it with your counsel before relying on it.