Uruchom PrivacyKit w kilka minut dzięki lekkim komponentom webowym, które działają zarówno w frameworkach, jak i na statycznych stronach.
Umieść skrypt w sekcji <head> i dodaj dialog zgody na stronę, aby rozpocząć. PrivacyKit jest dystrybuowany jako statyczne zasoby przez CDN — bez instalacji npm i bez konfliktów zależności.
<html>
<head>
<!-- Dodaj web komponenty PrivacyKit: 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>
<!-- Dodaj API JavaScript PrivacyKit do programowego dostępu do zgody (opcjonalnie) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Dodaj consent-dialog -->
<consent-dialog theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit domyślnie zawiera 10-dniowy okres próbny, dzięki czemu możesz zintegrować i przetestować rozwiązanie przed aktywacją subskrypcji. Status aktywacji jest dostępny przez API JavaScript, jest logowany w konsoli przeglądarki i można go również sprawdzić w narzędziu do sprawdzania statusu aktywacji.
Zacznij od wbudowanego motywu i dopracuj pojedyncze tokeny designu albo w pełni dostosuj styl okna dialogowego do swojej marki.
<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 zapobiegają wykonywaniu skryptów stron trzecich i osadzonej treści do czasu wyrażenia zgody. Użyj <consent-missing>, aby w razie potrzeby poinformować użytkowników o niedostępnej treści.
<body>
<!-- Dodaj element(y) consent-guard, aby chronić przed skryptami stron trzecich -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Dodaj element(y) consent-guard, aby chronić przed osadzoną treścią -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Aby zobaczyć tę treść, zaakceptuj cookies analityczne i marketingowe.</p>
</consent-missing>
</body>
Ważne: Zwróć uwagę, że zarządzane zasoby w przykładzie używają data-src zamiast src oraz type="text/plain" jest używane dla skryptów. PrivacyKit aktywuje zarządzaną zawartość dopiero po udzieleniu zgody — w przeciwnym razie zasoby mogą ładować się od razu i wyglądać jak zahardkodowane w Compliance Monitor.
Dodaj PrivacyKit Compliance Monitor, aby wykrywać trackery, weryfikować ochronę zgód i wykrywać niezarządzaną aktywność w całej witrynie.
<body>
<!-- Dodaj compliance-monitor, aby stale weryfikować egzekwowanie zgody -->
<compliance-monitor></compliance-monitor>
</body>Użyj window.PrivacyKit, aby odczytywać zgodę, sprawdzać wyrażenia zgody, otwierać okna dialogowe i nasłuchiwać zmian zgody. Jest to przydatne, gdy aplikacja potrzebuje programistycznej kontroli, np. w React, Vue lub czystym 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();
}
Popraw doświadczenie deweloperskie dzięki autouzupełnianiu, bezpieczeństwu typów i natywnej obsłudze web komponentów PrivacyKit.
W nowoczesnych narzędziach (Next.js / Vite / TypeScript 5+) pliki .d.ts poza katalogiem src muszą być jawnie uwzględnione, aby kompilator je wykrył.
{
"include": ["src", "types/**/*.d.ts"]
}
Wytyczne dotyczące integracji komponentów PrivacyKit w konkretnych frameworkach.
<consent-dialog> działa w Server Components — dodaj go bezpośrednio do layoutu.'use client'.Unikaj migotania zanim web komponenty się załadują. Bez tego fragmentu HTML w slotach lub za guardami może na chwilę mignąć, gdy:
consent-dialog może mignąć, jeśli slottowane elementy wyrenderują się zanim komponent zostanie zdefiniowany.consent-guard może mignąć na chwilę, jeśli jest używany do warunkowego HTML i treść wyrenderuje się zanim komponent się aktywuje.consent-missing może mignąć na chwilę, jeśli jest używany jako fallback i wyrenderuje się zanim komponent się aktywuje.Dodaj style w swoim light DOM, aby zapobiec migotaniu.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}