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

 /* Cookie Dialog */
    #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({
    // A custom title for the popup
    title: "Cookies & Privacy",
 
    // Add your own cookie message here, if you prefer not to use the
    // default one. HTML can be included within this message.
    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 to your privacy policy for more information
    link: "/privacy-policy",
 
    // Time before the popup is displayed after page load (in milliseconds)
    delay: 2000,
 
    // Days for the cookie to expire
    expires: 30,
 
    // Optional callback function when 'Accept' button is clicked
    onAccept: function() {
        // Do whatever you need to here...
    },
 
    // Unchecks all checkboxes on page load that have class .ihavecookies
    // applied to them. Set to true to turn this option on
    uncheckBoxes: false,
 
    // Set labels for links and buttons
    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.',
 
    // Array of cookie types for which to show checkboxes.
    // - type: Type of cookie. This is also the label that is displayed.
    // - value: Value of the checkbox so it can be easily identified in
    //          your application.
    // - description: Description for this cookie type. Displayed in
    //                title attribute.
    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.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.