Embedding Art. 30 Declarations

1. Direct Link

The simplest approach - link directly to the declaration page.

URL Format:

https://yourdomain.com/[locale]/[activityId]

Example:
https://yourdomain.com/en/abc123

Usage:

<a href="https://yourdomain.com/en/abc123" target="_blank">
  View GDPR Declaration
</a>

✅ Best for: Email links, documentation, new tab navigation

2. iframe Embedding

Embed the declaration directly in your page using an iframe. Works everywhere - even on WordPress, Wix, and other CMS platforms.

Basic Usage:

<iframe
  src="https://yourdomain.com/en/abc123"
  width="100%"
  height="800px"
  frameborder="0"
  title="GDPR Article 30 Declaration"
></iframe>

Responsive Example:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://yourdomain.com/en/abc123"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    title="GDPR Article 30 Declaration"
  ></iframe>
</div>

✅ Best for: Maximum compatibility, CMS integration, external sites
📦 Size: 0 KB (no JavaScript required)
🌐 Compatibility: 99%+ (works in all browsers)

3. Web Component

Use a lightweight web component for better integration and easier syntax. The component wraps an iframe internally.

Step 1: Include the script

<script src="https://yourdomain.com/widgets/art30-declaration.js"></script>

Step 2: Use the custom element

<art30-declaration
  activity-id="abc123"
  locale="en"
  height="800px"
></art30-declaration>

All Attributes:

<art30-declaration
  activity-id="abc123"           <!-- Required: Activity ID -->
  locale="en"                    <!-- Optional: Language (default: "en") -->
  base-url="https://yourdomain.com"  <!-- Optional: Override base URL -->
  height="600px"                 <!-- Optional: Height (default: "800px") -->
  width="100%"                   <!-- Optional: Width (default: "100%") -->
></art30-declaration>

Programmatic Control:

// Get reference to the element
const declaration = document.querySelector('art30-declaration');

// Refresh/reload the declaration
declaration.refresh();

// Change attributes dynamically
declaration.setAttribute('activity-id', 'xyz789');
declaration.setAttribute('locale', 'fr');

✅ Best for: Modern websites, better developer experience
📦 Size: ~2 KB minified
🌐 Compatibility: 95%+ (Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+)

Comparison

Security & Privacy

iframe Sandboxing: iframes provide natural isolation between the declaration content and the host page. No JavaScript from the declaration can access the parent page.

Data Privacy: The declaration is rendered server-side from your MongoDB data. No sensitive data is exposed to the client beyond what's in the template.

Access Control: Consider implementing authentication checks in the embed route if you need to restrict access to declarations.