Content

Cookie consent

A cookie banner with Accept, Reject and a choices dialog. Scripts you mark wait until the visitor agrees.

Try it

The banner appears at the bottom of this page. Your choice is saved in the browser under a demo name.

HTML

<button class="pw-btn pw-btn--primary" id="demo-consent-show">Show the banner</button>
<button class="pw-btn" data-pw-consent-open>Open the choices</button>
<p class="demo-out" id="demo-consent-out" style="flex-basis:100%"></p>

JavaScript

var out = document.getElementById('demo-consent-out');
function start() {
  Partwise.consent({
    key: 'partwise-demo-consent',
    title: 'Cookies',
    text: 'We use cookies to keep you signed in and, if you agree, to count visits.',
    policyUrl: '#main', policyLabel: 'Privacy policy',
    categories: [
      { id: 'necessary', label: 'Necessary', text: 'Needed for the site to work.', required: true },
      { id: 'analytics', label: 'Analytics', text: 'Anonymous visit counts.' },
      { id: 'marketing', label: 'Marketing', text: 'Lets us show you relevant offers.' }
    ],
    onChange: function (choices) { out.innerHTML = 'Saved: <code>' + JSON.stringify(choices) + '</code>'; }
  });
}
document.getElementById('demo-consent-show').addEventListener('click', function () {
  start(); Partwise.consent.reset();
});
start();
if (Partwise.consent.get()) out.innerHTML = 'Saved earlier: <code>' + JSON.stringify(Partwise.consent.get()) + '</code>';

How to use it

Mark scripts that need consent like this. They do not run until the visitor allows their category:

<script type="text/plain" data-pw-consent="analytics" data-src="https://example.com/analytics.js"></script>

<script type="text/plain" data-pw-consent="marketing">
  // inline code works too
</script>

<iframe data-pw-consent="marketing" data-src="https://example.com/embed"></iframe>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`key`	`pw-consent`	Name under which the choice is saved in the browser.
`version`	`1`	Raise it to ask everyone again, for example after you add a category.
`days`	`180`	After this many days the banner comes back.
`position`	`bottom`	`bottom`, `bottom-left` or `bottom-right`.
`categories`		A list of `{ id, label, text, required }`.
`labels`		`{ accept, reject, choose, save }` for your own words.
`onChange`		A function called with the choices.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:consent`	On `document`, with `choices`.

From your script

Partwise.consent.get();                 // { necessary: true, analytics: false } or null
Partwise.consent.allowed('analytics');
Partwise.consent.open();                // the choices dialog
Partwise.consent.reset();               // forget the choice and show the banner

Good to know

Reject is as easy to reach as Accept, which privacy rules in many countries expect.
The banner is the first thing in the page for keyboard and screen reader users.
This is a tool, not legal advice. Which cookies need consent, and what your banner must say, depends on your country and your site.
The choice is saved in the browser of the visitor (localStorage). It is not sent to a server.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/40-code-tour.css, js/50-more.js, css/12-dialog.css, js/12-dialog.js, css/02-forms.css (switch).