Starte PrivacyKit in wenigen Minuten mit schlanken Webkomponenten, die in Frameworks und auf statischen Websites gleichermaßen funktionieren.
Fügen Sie das Skript in den <head> und den Einwilligungsdialog auf Ihrer Seite ein, um zu starten. PrivacyKit wird als statische Assets über ein CDN ausgeliefert — keine npm-Installation und keine Abhängigkeitskonflikte.
<html>
<head>
<!-- Fügen Sie die PrivacyKit-Webkomponenten hinzu: consent-dialog, consent-guard, consent-missing, compliance-monitor -->
<script type="module" src="https://cdn.privacykit.eu/v1/privacykit.esm.js"></script>
<script nomodule src="https://cdn.privacykit.eu/v1/privacykit.js"></script>
<!-- Fügen Sie die PrivacyKit-JavaScript-API für programmgesteuerten Zugriff auf Einwilligungen hinzu (optional) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Fügen Sie consent-dialog hinzu -->
<consent-dialog theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit enthält standardmäßig eine 10-tägige Testphase, damit Sie integrieren und testen können, bevor Sie ein Abonnement aktivieren. Der Aktivierungsstatus ist über die JavaScript-API verfügbar, wird in der Browser-Konsole protokolliert und kann außerdem über die Aktivierungsstatus-Abfrage geprüft werden.
Beginnen Sie mit einem integrierten Theme und feinjustieren Sie einzelne Design Tokens, oder passen Sie das Dialog-Styling vollständig an Ihre Marke an.
<consent-dialog variant="standard" theme="standard" style="
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-text-color: #3a3530;
--pk-primary-color: #b08968;
--pk-secondary-color: #d6c2b2;
--pk-text-color-on-primary: #212121;
--pk-focus-ring-color: #866346;
--pk-border-color: #d6dbe4;
--pk-border-width: 3px;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-spacing-unit: 0.6rem;
--pk-control-radius: 10px;
--pk-dialog-radius: 20px;
--pk-dialog-shadow: 0 10px 20px rgba(0, 0, 0, 50%);
--pk-dialog-max-height: min(70dvh, 500px);
">
</consent-dialog>
Consent Guards verhindern, dass Skripte von Drittanbietern und eingebettete Inhalte ausgeführt werden, bis eine Einwilligung erteilt wurde. Verwenden Sie <consent-missing>, um Nutzer bei Bedarf über nicht verfügbaren Inhalt zu informieren.
<body>
<!-- Fügen Sie consent-guard-Komponenten hinzu, um vor Skripten von Drittanbietern zu schützen -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Fügen Sie consent-guard-Komponenten hinzu, um vor eingebetteten Inhalten zu schützen -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Bitte akzeptieren Sie Analyse- und Marketing-Cookies, um diesen Inhalt zu sehen.</p>
</consent-missing>
</body>
Wichtig: Beachten Sie, dass verwaltete Ressourcen im Beispiel data-src statt src verwenden und type="text/plain" für Skripte verwendet wird. PrivacyKit aktiviert verwaltete Inhalte erst nach erteilter Einwilligung — andernfalls können Ressourcen sofort laden und im Compliance Monitor als fest eingebunden erscheinen.
Fügen Sie PrivacyKit Compliance Monitor hinzu, um Tracker zu entdecken, den Consent-Schutz zu validieren und nicht verwaltete Aktivitäten auf Ihrer Website zu erkennen.
<body>
<!-- Fügen Sie compliance-monitor hinzu, um die Durchsetzung der Einwilligung kontinuierlich zu validieren -->
<compliance-monitor></compliance-monitor>
</body>Nutzen Sie window.PrivacyKit, um Einwilligungen zu lesen, Einwilligungsausdrücke zu prüfen, Dialoge zu öffnen und auf Änderungen der Einwilligung zu reagieren. Das ist hilfreich, wenn Ihre Anwendung programmgesteuerte Kontrolle benötigt, z. B. in React, Vue oder einfachem JavaScript.
const api = window.PrivacyKit;
api.onReady(() => {
const consent = window.PrivacyKit.readConsent();
const initialState = consent ? JSON.stringify(consent, null, 2) : "";
console.log(initialState);
});
api.onConsentChanged((consent) => {
const updatedState = consent ? JSON.stringify(consent, null, 2) : "";
console.log(updatedState);
});
function handleOpenConsentDialogBtnClick() {
api.openConsentDialog();
}
function handleOpenPrivacyPolicyDialogBtnClick() {
api.openPrivacyPolicyDialog();
}
function handleToggleComplianceMonitorBtnClick() {
api.toggleComplianceMonitor();
}
Verbessern Sie die Developer Experience mit Autovervollständigung, Typsicherheit und nativer Unterstützung für PrivacyKit Web Components.
In modernen Toolchains (Next.js / Vite / TypeScript 5+) müssen .d.ts-Dateien außerhalb von src explizit eingebunden werden, damit der Compiler sie erkennt.
{
"include": ["src", "types/**/*.d.ts"]
}
Framework-spezifische Hinweise für die Integration der PrivacyKit-Custom-Elements.
<consent-dialog> funktioniert in Server Components — füge es direkt in dein Layout ein.'use client'-Komponente auf.Vermeiden Sie Flackern, bevor die Webkomponenten geladen sind. Ohne dieses Snippet können geschützte Inhalte kurz aufblitzen, wenn:
consent-dialog kann kurz aufblitzen, wenn Sie slotted Elemente verwenden und sie rendern, bevor die Komponentendefinition geladen ist.consent-guard kann kurz aufblitzen, wenn er für bedingtes HTML verwendet wird und der Inhalt rendert, bevor die Komponente aktiviert ist.consent-missing kann kurz aufblitzen, wenn er als Fallback verwendet wird und er rendert, bevor die Komponente aktiviert ist.Fügen Sie Styling in Ihrem Light DOM hinzu, um Flackern zu vermeiden.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}