https://github.com/undergroundwires/ez-consent
🍪 Minimal & vanilla JS only cookie consent banner with no dependencies with Google consent mode support
https://github.com/undergroundwires/ez-consent
compliance-as-code consent-mode cookie-banner cookie-consent cookie-consent-banner cookie-law gdpr google-tag-manager privacy
Last synced: 4 months ago
JSON representation
🍪 Minimal & vanilla JS only cookie consent banner with no dependencies with Google consent mode support
- Host: GitHub
- URL: https://github.com/undergroundwires/ez-consent
- Owner: undergroundwires
- License: mit
- Created: 2020-05-17T22:20:04.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-09-23T17:04:42.000Z (9 months ago)
- Last Synced: 2025-09-29T01:01:49.485Z (9 months ago)
- Topics: compliance-as-code, consent-mode, cookie-banner, cookie-consent, cookie-consent-banner, cookie-law, gdpr, google-tag-manager, privacy
- Language: JavaScript
- Homepage:
- Size: 4.84 MB
- Stars: 19
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ez-consent
>  A minimal, vanilla JavaScript cookie consent banner with no dependencies.
[](https://www.npmjs.com/package/ez-consent)
[](https://www.jsdelivr.com/package/npm/ez-consent)
- Vanilla JavaScript only ✔️
- It does not track you ✔️
- Very lightweight with no dependencies ✔️
- Single line to get started ✔️
- Everything customizable, including language ✔️
- Supports [Google consent mode](https://support.google.com/google-ads/answer/10000067?hl=en) ✔️
Examples:
- [Live example 1](https://privacylearn.com/?force-consent)
- [Live example 2](https://erkinekici.com/?force-consent)
- [CodePen examples](https://codepen.io/collection/XRjMGP)
[](https://github.com/undergroundwires/ez-consent/issues)
[](./.github/workflows/publish.yaml)
[](./.github/workflows/build-and-test.yaml)
[](./.github/workflows/bump-and-release.yaml)
[](./.github/workflows/quality-checks.yaml)
[](https://github.com/undergroundwires/bump-everywhere)
## Usage
### Quick Start: CDN
The simplest way to get started is to add it to your page:
```html
```
See [Initialize the script](#2-initialize) for additional options and alternative ways.
_[top↑](#ez-consent)_
### Advanced Usage
1. [Import](#1-import)
2. [Initialize](#2-initialize)
3. [Style](#3-style) (optional)
#### 1. Import
Here are some examples how you can install the script:
- Using NPM: `npm install ez-consent --save`
- Or using yarn: `yarn add ez-consent`
- Using git submodule (not recommended):
- Go to the folder you wish to have the repository
- Run `git submodule add https://github.com/undergroundwires/safe-email`
Add it to your page:
```html
```
Or you can import `ez_consent` as a module:
```html
import { ez_consent } from './ez-consent/src/ez-consent.js'; // /node_modules/ez-consent/ez-consent.js ...
ez_consent.init();
```
Or import it via `webpack`, `gulp`, `rollup` etc.:
```js
import { ez_consent } from './node_modules/ez-consent/src/ez-consent';
```
_[top↑](#ez-consent)_
#### 2. Initialize
When importing a script using the `` element, it's recommended to use the `onload` attribute to initialize it.
This approach allows you to use `defer` attribute, which improve webpage performance and user
experience by optimizing script loading. This can help your pages rank better in search engines.
```html
<script
type="text/javascript"
src="/node_modules/ez-consent/dist/ez-consent.min.js"
defer
onload="
ez_consent.init({
privacy_url: '/privacy',
texts: {
buttons: {
ok: 'OK',
more: 'More',
},
},
});
"
>
```
Or, you can initialize later using this snippet:
```js
ez_consent.init();
```
See all options:
```js
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/"
consent_duration: 'P10Y', // Consent duration (cookie expiry date), default: 10 years. ISO 8601 format, decimals are not supported.
enable_google_consent_mode: false, // Sends consent state to Google (enables Google consent mode)
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, // Controls whether clicking the 'more' button automatically 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/accept button that shows the privacy policy, default "more"
},
},
css_classes: {
// CSS class name overrides
container: 'container', // Main container element, default: "cookie-consent"
message_text: 'mainText', // Main message text container, default: "cookie-consent__text"
buttons: {
wrapper: 'buttonsWrapper', // Button container, default: "cookie-consent__buttons"
more: 'moreButton', // More info button, default: "cookie-consent__button cookie-consent__button--more"
ok: 'okButton', // More/accept button, default: "cookie-consent__button cookie-consent__button--ok"
},
},
});
```
The banner will be shown if the user has not yet agreed to read & understand the information.
You can force the banner to always show by including the `force-consent` query parameter in the URL.
Example for `https://test.com/fest` page: `test.com/fest?force-consent`.
_[top↑](#ez-consent)_
#### 3. Style
##### Existing Themes
You can choose one of the following existing themes to begin:
###### box-bottom-left.css
[Source file](./src/themes/box-bottom-left.css) | [See it live](https://cloudarchitecture.io/?force-consent) | [Preview on CodePen](https://codepen.io/undergroundwires/pen/qBdzmyj)
```html
```
###### subtle-bottom-right.css
[Source file](./src/themes/subtle-bottom-right.css) | [See it live](https://erkinekici.com/?force-consent) | [Preview on CodePen](https://codepen.io/undergroundwires/pen/MWwMmqw)
```html
```
##### Custom Themes
Or you can create your own theme & import it. Check example themes at [existing themes](./src/themes/). [The HTML](./src/ez-consent.js#L18) uses only a few classes using [BEM](https://getbem.com/naming/) naming convention.
You can also add your own class names using `css_classes` option, see [initialization](#2-initialize) for details.
You're welcome to contribute your theme to the project in [`./src/themes`](./src/themes/) folder by creating a pull request 👍.
_[top↑](#ez-consent)_
## Distributed files
The repository and deployed packages include a `dist/` folder that adds polyfills to the files and distributes them as:
- minified (`.min.js`, `.min.css`) files for production usage
- non-minified (`.js`, `.css`) files for debugging
_[top↑](#ez-consent)_
## GitOps
CI/CD is fully automated for this repo using different Git events & GitHub actions.
_[top↑](#ez-consent)_