Minimal & vanilla JS only cookie consent banner with no dependencies
Live example 1, Live example 2, CodePen examples
It’s the simplest way. Just add it to your page:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ez-consent@1.2.1/dist/ez-consent.min.js"></script>
npm install ez-consent --save
yarn add ez-consent
git submodule add https://github.com/undergroundwires/safe-email
Add it to your page:
<script type="text/javascript" src="/node_modules/ez-consent/dist/ez-consent.min.js"></script>
Or you can import ez_consent
as a module:
<script type="module">
import { ez_consent } from './ez-consent/src/ez-consent.js'; // /node_modules/ez-consent/ez-consent.js ...
ez_consent.init();
</script>
Or import it via webpack
, gulp
, rollup
etc.:
import { ez_consent } from "./node_modules/ez-consent/src/ez-consent"
ez_consent.init();
or with all optional options:
ez_consent.init(
{
is_always_visible: false, // Always shows banner on load, default: false
privacy_url: "/privacy", // URL that "more" button goes to, default: "/privacy/"
more_button: {
target_attribute : "_blank", // Determines what the behavior of the 'more' button is, default: "_blank", opens the privacy page in a new tab
is_consenting: true // Determines whether clicking on 'more' button gives consent and removes the banner, default: true
},
texts: {
main: "We use cookies", // The text that's shown on the banner, default: "This website uses cookies & similar."
buttons:
{
ok: "ok", // OK button to hide the text, default: "ok"
more: "more" // More button that shows the privacy policy, default "more"
}
}
});
The banner will be shown if the user has not yet agreed to read & understand the information. You can also force to show banner always by having force-consent
query parameter in URL. E.g. : test.com/fest?force-consent
You can choose one of the following existing theme to get going:
Source file | See it live | Preview on CodePen
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ez-consent@1.2.1/dist/themes/box-bottom-left.min.css">
Source file | See it live | Preview on CodePen
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ez-consent@1.2.1/dist/themes/subtle-bottom-right.min.css">
Or you can create your own theme & import it. Check example themes at existing themes. The HTML uses only a few classes using BEM naming convention.
You’re welcome to contribute your theme to the project in [./src/themes](https://github.com/undergroundwires/ez-consent/blob/master/src/themes)
folder by creating a pull request 👍.
The deployed packages includes a dist/
folder that adds polyfills to the files and distributes them as:
.min.js
, .min.css
) files for production usage.js
, .css
) files for debuggingCI/CD is fully automated for this repo using different Git events & GitHub actions.
Author: undergroundwires
GitHub: https://github.com/undergroundwires/ez-consent
#javascript #programming