Customizable GDPR Cookie Consent Popup In JavaScript – Cookify

Category: Javascript , Recommended | November 12, 2020
Author: Jersyfi
Views Total: 1,393 views
Official Page: Go to website
Last Update: November 12, 2020
License: MIT


Customizable GDPR Cookie Consent Popup In JavaScript – Cookify


Cookify is a highly customizable GDPR cookie consent popup library to make your site or app compliant with GDPR and EU Cookie Law.

The GDPR cookie consent popup enables visitors to manage (enable and disable) cookies allowed to use, and toggle scripts on/off accordingly.

How to use it:

1. The library requires Bootstrap’s stylesheet loaded in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Load the stylesheet ‘cookify.css’ in the document.

<link rel="stylesheet" href="cookify.css" />

3. Import the Cookify as an ES module.

import {Cookify} from './cookify.js'

4. Initialize the Cookify library and add your own information to the GDPR cookie consent popup. = new Cookify({
  'init': {
    'view': {
      'info': {
        'header': 'We use Cookies',
        'text': 'This website uses cookies to ensure you get the best experience on our website.',
      'manage': {
        'header': 'Cookies Management',
        'text': 'To learn more about our use of cookies see our <a href="#" target="_blank">Privacy Policy</a>.',
      'button': {
        'svg': 'cookie', // or 'fingerprint'
    'cookies': {
      'necessary': {
        'name': 'Necessary',
        'desc': 'Are necessary to run the website',
      'analytics': {
        'name': 'Analytics',
        'desc': 'To analyse the website traffic',
      // more cookies here
  'run': true // run on page load

5. You can also pass the configs as follows:

cookify.initName(' ... ');
cookify.initExpire( ... );
cookify.initSupport( ... );
cookify.initViewInfo({ ... }); 
cookify.initViewManage({ ... }); 
cookify.initViewButton({ ... }); 
cookify.initCookies({ ... });

6. Toggle on/off scripts based on user selection.

<script src="app.js" gdpr="Necessary"><script>
<script src="analytics.js" gdpr="Analytics"><script>

You Might Be Interested In:

Leave a Reply