Docs / label.js

Marking content

Attributes

Text

Put data-disclarion on the element that holds the AI text, and nothing else:

<article>
  <h1>Linen shirt, sand</h1>
  <p class="meta">Updated 3 hours ago</p>

  <!-- Only the AI-written text goes inside the marked element. -->
  <div data-disclarion="ai-generated" data-disclarion-provider="openai" data-disclarion-model="gpt-5">
    <p>A relaxed linen shirt in a warm sand tone, cut for hot days and easy layering.</p>
    <p>Pre-washed for softness, with mother-of-pearl buttons.</p>
  </div>
</article>

label.js fingerprints the marked element's text in the visitor's browser. It draws the label as the last thing inside that element.

What to keep outside the marked element

Keep anything that changes per visitor or over time outside the marked element: dates, "3 hours ago", user names, prices, share buttons.

Any change to the text makes it new content, with a new record.

If more than 10 new text fingerprints appear on one page within 10 minutes, that page registers no new items for an hour. The dashboard then shows "The marked text on this page keeps changing".

If a changing part has to sit inside, wrap it in data-disclarion-ignore:

<div data-disclarion="ai-assisted">
  <p>This summary was drafted with AI and edited by our team.</p>
  <span data-disclarion-ignore>Last updated: 25 October 2026</span>
</div>

Short text

Text shorter than 20 characters still gets a label, but no record and no verify link.

Images

Put data-disclarion on the <img> element itself. On a wrapper <div>, it would be treated as text.

<img
  src="https://www.example.com/images/spring-hero.png"
  alt="A linen shirt on a sunlit chair"
  width="1200" height="800"
  data-disclarion="ai-generated"
  data-disclarion-provider="openai"
  data-disclarion-model="gpt-image-1">

• label.js draws the label over the top-right corner of the image. The label is a separate element, placed right after your <img>. Your image and its file are never changed.
• Images narrower than 200 pixels get a compact label, without the "Labeled by Disclarion" line. The whole compact label is a link to the verify page.
• label.js sends the image's src address. Our server downloads the image once from that address to fingerprint it.
• The image can be on another host (a CDN, Cloudinary, S3). But it must appear in your page's HTML, or be on the same domain as your site. Otherwise it is never downloaded and gets no record.
• Images with a data: or blob: address get a label but no record. The console says so.
• Lazy-loaded images without a src yet are picked up when the src is set.
• If the src changes, the old label is removed and the new image is registered.

What the label looks like

The label is small and dark. It shows the EU's "AI" icon (the basic icon from Annex 1 of the EU Code of Practice on AI-generated content) and "AI-generated" (or "AI-modified"). Under it, a "Labeled by Disclarion" line links to the item's public verify page.

On images it sits in the top-right corner; on text it is the last thing inside the marked element. Screen readers read the text and the link, which says it opens in a new tab; the icon is hidden from them. The link can be reached with the keyboard.

It is the same standard label on every site, and you can't restyle it. label.js draws it in its own isolated element (<disclarion-label> with a closed shadow root). Your CSS doesn't reach it, and its CSS doesn't leak into your page.

On the live disclarion.com homepage, the sample image and its caption carry this label.