Starte PrivacyKit in wenigen Minuten mit schlanken Webkomponenten, die in Frameworks und auf statischen Websites gleichermaßen funktionieren.
Füge PrivacyKit per CDN-Skripte oder durch Installation des NPM-Pakets ein. Wähle die Methode, die zu deinem Projekt passt.
Füge die Skripte in den <head> deiner Website ein. Funktioniert mit WordPress, Shopify, Wix und jeder Website, auf der du HTML hinzufügen kannst.
<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></consent-dialog>
</body>
<html>Beginnen Sie mit einem integrierten Theme und einer Layout-Variante, feinjustieren Sie dann einzelne Design Tokens, oder passen Sie den Dialog vollständig an Ihre Marke an.
<consent-dialog theme="standard" variant="standard"></consent-dialog>Integrierte Themes basieren auf Design Tokens. Überschreiben Sie nur die Tokens, die Sie für ein individuelles Erscheinungsbild benötigen, während der Rest des gewählten Themes unverändert bleibt.
<consent-dialog variant="standard" theme="standard" style="
--pk-transparency: 0%;
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-text-color: #3a3530;
--pk-text-color-on-primary: #212121;
--pk-primary-color: #b08968;
--pk-secondary-color: #d6c2b2;
--pk-focus-ring-color: #866346;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-spacing-unit: 0.6rem;
--pk-control-border-color: #d6dbe4;
--pk-control-border-width: 3px;
--pk-control-border-radius: 10px;
--pk-dialog-border-color: #d6dbe4;
--pk-dialog-border-width: 3px;
--pk-dialog-border-radius: 20px;
--pk-dialog-max-height: min(70dvh, 500px);
--pk-dialog-shadow: 0 10px 20px rgba(0, 0, 0, 50%);
">
</consent-dialog>Verwenden Sie <consent-guard>, um zu steuern, wann Skripte von Drittanbietern und eingebettete Inhalte basierend auf der Einwilligung der Besucher geladen werden dürfen. Sie können jeden Tracker in einen eigenen Consent Guard einbetten oder mehrere Tracker, die dieselbe Einwilligung erfordern, in einem einzigen Consent Guard zusammenfassen.
<!-- Fügen Sie consent-guard-Komponenten hinzu, um Drittanbieter-Skripte zu schützen -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://example.com/analytics.js?id=XXXXXX"></script>
</consent-guard>
<consent-guard consent="marketing">
<script type="text/plain" data-src="https://example.com/marketing.js?id=XXXXXX"></script>
</consent-guard>
Ändern Sie den script-Typ zu text/plain und ersetzen Sie src durch data-src für verwaltete Ressourcen. PrivacyKit stellt die ursprünglichen Attribute wieder her und lädt die Ressource automatisch, sobald die erforderliche Einwilligung erteilt wurde.
Platzierung: Fügen Sie Consent Guards nach Möglichkeit im <body> des Dokuments hinzu. Viele CMS und Website-Baukästen lassen benutzerdefinierte Skripte nur im <head> zu — falls das auf Ihre Plattform zutrifft, platzieren Sie den Consent Guard mitsamt dem enthaltenen Skript stattdessen am Ende des <head>-Bereichs.
Umschließen Sie eingebettete Inhalte, wie <iframe>-Elemente, direkt dort, wo sie auf der Seite erscheinen. Verwenden Sie optional <consent-missing>, um alternative Inhalte anzuzeigen, bis die erforderliche Einwilligung erteilt wurde.
<consent-guard id="yt-embed" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
</consent-guard>
<consent-missing for="yt-embed">
<p>Bitte akzeptieren Sie Analyse- und Marketing-Cookies, um diesen Inhalt zu sehen.</p>
</consent-missing>
Füge PrivacyKit Compliance Monitor hinzu, um Tracker zu erkennen, den Consent-Schutz zu validieren und nicht verwaltete Aktivitäten auf deiner Website aufzudecken — und gib Entwicklern und Compliance-Teams Zugang zur Laufzeit-Validierung, ohne die Besuchererfahrung zu beeinträchtigen.
<body>
<!-- Fügen Sie compliance-monitor hinzu, um die Durchsetzung der Einwilligung kontinuierlich zu validieren -->
<compliance-monitor></compliance-monitor>
</body>Sehen Sie PrivacyKit in Aktion mit Live-HTML- und React-Beispielen.
Jede Demo enthält einen Compliance Monitor zur Echtzeit-Inspektion der Tracker-Ausführung, ein Consent Test Panel zur Simulation von Einwilligungsstatus und Erstbesucher-Verhalten sowie interaktive consent-guard-Beispiele — die validieren, dass Skripte und eingebettete Inhalte basierend auf der erteilten Einwilligung korrekt blockiert oder zugelassen werden. Beide enthalten außerdem einen consent-dialog, der mit design-tokens gestaltet ist. Die HTML-Demo integriert sich über CDN script-tags, die mit jedem SSR-Setup kompatibel sind.
PrivacyKit enthält standardmäßig eine 10-tägige Testphase, damit Sie die Plattform integrieren und testen können, bevor Sie ein Abonnement aktivieren.
Nach Ablauf der Testphase läuft PrivacyKit in einem eingeschränkten Modus weiter, anstatt bestehende Integrationen zu deaktivieren.
Der Aktivierungsstatus ist über die JavaScript-API verfügbar, wird während der Initialisierung in der Browser-Konsole protokolliert und kann auch über die Aktivierungsstatus-Abfrage geprüft werden.