DEV Community

Cover image for How to add EU AI Act disclosure to your SaaS UI (with code)
Gatis Ozols
Gatis Ozols

Posted on • Originally published at disclos.eu

How to add EU AI Act disclosure to your SaaS UI (with code)

If your SaaS uses AI and serves EU customers, Article 50 of the EU AI Act requires you to tell users when they interact with AI. The deadline is August 2, 2026. Not 2027. Not "sometime next year." Sixty days from now.

Most founders I talk to assume this only applies to large companies. It does not. Article 50 applies to any provider or deployer of an AI system, regardless of company size.

Here is what you actually need to implement, with code you can drop into your product today.

What Article 50 requires
Four categories of AI use trigger transparency obligations:

Chatbots and AI agents (Article 50(1)): Users must know they are interacting with AI, not a human
Synthetic content (Article 50(2)): AI generated text, audio, images, or video must be marked as such
Deepfakes (Article 50(4)): AI generated or manipulated content depicting real people must be disclosed
Emotion recognition and biometric categorization (Article 50(3)): Users must be informed before these systems process them
If your product does any of these, you need visible disclosure in your UI.

  1. Chatbot disclosure This is the most common one. If your SaaS has a support chatbot, AI assistant, or any conversational AI feature, users need to see a clear notice.

AI Disclosure

You are interacting with an artificial intelligence system,
not a human. This is required under Article 50(1) of
Regulation (EU) 2024/1689 (EU AI Act).

Place this above or inside your chat window. It must be visible before the user starts typing, not buried in a settings page.

React component version:

function AIDisclosure() {
return (


AI Disclosure


You are interacting with an artificial intelligence system,
not a human. This is required under Article 50(1) of
Regulation (EU) 2024/1689 (EU AI Act).



);
}
  1. Generated content disclosure If your product generates text, images, audio, or video using AI, the output needs machine readable metadata marking it as AI generated.
AI Generated

The Regulation specifically mentions machine readable format. The data-ai-generated attribute satisfies this. C2PA metadata is the emerging standard for images and video.

  1. Deepfake disclosure If your product creates or manipulates images or video of real people using AI, the disclosure requirement is stricter.

AI generated image of [person name]



This image was generated or substantially modified using
artificial intelligence. Disclosure required under
Article 50(4) of Regulation (EU) 2024/1689.

  1. Emotion recognition and biometric categorization If your product analyzes facial expressions, voice tone, body language, or categorizes users by biometric data, you need informed consent before processing.

Biometric Processing Notice


This feature uses artificial intelligence to analyze
[facial expressions / voice patterns / biometric data].
Processing is governed by Article 50(3) of
Regulation (EU) 2024/1689 (EU AI Act).

  I understand and consent


  Decline
Enter fullscreen mode Exit fullscreen mode

This one requires explicit user action before you start processing. A banner is not enough.

Where to place disclosures
The Regulation says disclosures must be provided "in a clear and distinguishable manner" at the point of interaction. That means:

Chatbots: Inside or directly above the chat interface
Generated content: Adjacent to the output, visible without scrolling
Deepfakes: Caption or overlay on the media itself
Biometric processing: A blocking modal before processing begins
Burying it in your Terms of Service does not count. Footer links do not count. The disclosure must be where the user encounters the AI.

Testing your implementation
After adding the code, check three things:

Visibility: Can a user see the disclosure without scrolling or clicking?
Timing: Does it appear before the AI interaction starts?
Machine readability: Do your data- attributes render correctly in the DOM?
Open your browser DevTools and inspect the elements. The data-ai-generated attributes should be present and readable by automated tools.

Open source templates
All the code above comes from our open source EU AI Act compliance checklist. The full repository includes:

HTML templates for all four Article 50 categories
French translations (German and Spanish coming via community contributions)
An Annex III classifier script to check if your AI system qualifies as high risk
Markdown versions for documentation
GitHub: github.com/GatisOzols/eu-ai-act-checklist

MIT licensed. Fork it, adapt it, ship it.

What happens if you skip this
Article 99 of the EU AI Act sets fines up to 15 million EUR or 3% of global annual turnover for transparency violations. For a SaaS, the more immediate risk is enterprise customers asking for proof of compliance during procurement. If you cannot show Article 50 disclosures in your UI, you lose the deal.

Sixty days is enough time to implement all of this. The code is above. The templates are open source. The deadline is not moving.

Top comments (0)