Display GDPR Compliant Cookie Consent Popup Using jQuery Plugin – jquery.ihavecookies.js

jquery.ihavecookies.js lightweight jQuery plugin that displays a cookie cookie consent message as required by EU regulation. The plugin displays a message on the user’s first visit to your website and, by default, again 30 days after their last visit.
The visitor must click the accept button within the popup for the cookie to be set thus granting their consent (GDPR).
 GDPR Compliant Cookie Consent Popup
As you have read with the recent EU regulations, visitors now must be able to opt-in to marketing, preferences, etc themselves. The plugin has an option that enables checkboxes to be unchecked automatically on page load.



When you load the page you will see an example of the cookie message popup in the bottom right corner.If you don’t see it, clear your cookies or delete the cookie called cookieControl.

Integrate GDPR Compliant Cookie Consent Popup

Libraries

The plugin dependent on jQuery library so first include latest jQuery library after that add jquery.ihavecookies.js

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.ihavecookies.min.js"></script>

CSS

Add following CSS on page for styling Cookie Consent Popup

 
    #gdpr-cookie-message {
        position: fixed;
        right: 30px;
        bottom: 30px;
        max-width: 375px;
        background-color: var(--purple);
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 6px 6px rgba(0,0,0,0.25);
        margin-left: 30px;
        font-family: system-ui;
    }
    #gdpr-cookie-message h4 {
        color: var(--red);
        font-family: 'Quicksand', sans-serif;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
    }
    #gdpr-cookie-message h5 {
        color: var(--red);
        font-family: 'Quicksand', sans-serif;
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 10px;
    }
    #gdpr-cookie-message p, #gdpr-cookie-message ul {
        color: white;
        font-size: 15px;
        line-height: 1.5em;
    }
    #gdpr-cookie-message p:last-child {
        margin-bottom: 0;
        text-align: right;
    }
    #gdpr-cookie-message li {
        width: 49%;
        display: inline-block;
    }
    #gdpr-cookie-message a {
        color: var(--red);
        text-decoration: none;
        font-size: 15px;
        padding-bottom: 2px;
        border-bottom: 1px dotted rgba(255,255,255,0.75);
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message a:hover {
        color: white;
        border-bottom-color: var(--red);
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message button {
        border: none;
        background: var(--red);
        color: white;
        font-family: 'Quicksand', sans-serif;
        font-size: 15px;
        padding: 7px;
        border-radius: 3px;
        margin-left: 15px;
        cursor: pointer;
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message button:hover {
        background: white;
        color: var(--red);
        transition: all 0.3s ease-in;
    }
    button#gdpr-cookie-advanced {
        background: white;
        color: var(--red);
    }
    #gdpr-cookie-message button:disabled {
        opacity: 0.3;
    }
    #gdpr-cookie-message input[type="checkbox"] {
        float: none;
        margin-top: 0;
        margin-right: 5px;
    }



JS

Then initialise the plugin using following syntax.

$('body').ihavecookies();

You can also customize your Cookie Consent Popup by using following options.

$('body').ihavecookies({
    
    title: "Cookies & Privacy",
 
    
    
    message: "Cookies enable you to use shopping carts and to personalize
              your experience on our sites, tell us which parts of our
              websites people have visited, help us measure the effectiveness
              of ads and web searches, and give us insights into user
              behavior so we can improve our communications and products.",
 
    
    link: "/privacy-policy",
 
    
    delay: 2000,
 
    
    expires: 30,
 
    
    onAccept: function() {
        
    },
 
    
    
    uncheckBoxes: false,
 
    
    moreInfoLabel: 'More information',
    acceptBtnLabel: 'Accept All Cookies',
    advancedBtnLabel: 'Customise Cookies',
    cookieTypesTitle: 'Select cookies to accept',
 
    // Labels and description for the "Necessary" cookie type
    fixedCookieTypeLabel:'Necessary',
    fixedCookieTypeDesc: 'These are cookies that are essential for the website to work correctly.',
 
    
    
    
    
    
    
    cookieTypes: [
        {
            type: 'Site Preferences',
            value: 'preferences',
            description: 'These are cookies that are related to your site preferences, e.g. remembering your username, site colours, etc.'
        },
        {
            type: 'Analytics',
            value: 'analytics',
            description: 'Cookies related to site visits, browser types, etc.'
        },
        {
            type: 'Marketing',
            value: 'marketing',
            description: 'Cookies related to marketing, e.g. newsletters, social media, etc'
        }
    ],
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.