Cookie Consent
pura-cookie-consent is a cookie consent banner pinned to the edge of the viewport (or as a floating card) with accept, decline and preferences actions, plus an explanatory popover and a native dialog to choose categories. The choice is persisted in localStorage and the banner stays hidden while a decision is on record; use it when you need to collect cookie consent in a compliant way. It exposes an agent-native layer: data-pura-consent-* attributes mirror the live state on the host and each instance registers itself in window.__puraCookieConsents by its data-pura-id, allowing agents and tools to enumerate and control the consent without accessing the Shadow DOM.
Preview
<pura-cookie-consent
id="consent"
heading="Your privacy"
position="bottom-right"
accept-label="Accept all"
decline-label="Decline"
settings-label="Preferences">
We use cookies to improve your experience and analyze traffic. You can accept, decline or adjust your preferences.
</pura-cookie-consent>
<p id="estado" style="font:14px system-ui;color:#555">Waiting for your choice...</p>
<button id="reabrir" type="button">Review consent</button>
<script type="module">
import "/pura/lib/cookie-consent.js";
const consent = document.getElementById("consent");
const estado = document.getElementById("estado");
consent.addEventListener("change", (e) => {
const cats = Object.entries(e.detail.categories)
.filter(([, on]) => on).map(([id]) => id).join(", ");
estado.textContent = `Choice: ${e.detail.choice} (${cats})`;
});
document.getElementById("reabrir").addEventListener("click", () => consent.reset());
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
storage-key | string | pura-cookie-consent | The localStorage key where the visitor's choice is stored. |
position | bottom | bottom-left | bottom-right | top | bottom | Position of the banner. bottom/top span the width of the viewport; *-left / *-right render as a card. |
accept-label | string | Aceitar | Label of the accept button. |
decline-label | string | Recusar | Label of the decline button. |
settings-label | string | Preferências | Label of the preferences/settings button. |
heading | string | — | Optional bold title shown above the message. |
no-settings | boolean | false | Hides the Preferences button when present. |
open | boolean | false | Reflected by the component; present while the banner is visible (do not set it manually). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/cookie-consent.js"></script>import "./pura/lib/cookie-consent.js";