jQuery GDPR Compliant Cookie Consent Popup Plugin – ihavecookies

GDPR compliant cookie consent popup plugin is a lightweight jQuery plugin that shows a cookie consent message required by EU guideline. The plugin is supposed to displays a message on the user’s first visit to your website and then again 30 days after their last visit.

One thing is needed to keep in mind that the visitor must click the accept button in the popup for the cookie to be set for granting consent.

It offered many options to help with customization such as title, message, delay, expire, link and so on.

How to use:

Download and insert the JavaScript jquery.ihavecookies.js afterward jQuery but do it before closing the body tag.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jquery.ihavecookies.js"></script>

Reset the jQuery ihavecookies.js plugin and postulate the title & message displayed in the Cookie Consent Popup.

Create a Pie Chart Using HTML5 Canvas Element

$('body').ihavecookies({
  title: "Cookies & Privacy",
  message: "This website uses cookies to ensure you get the best experience on our website.",
  link:"/privacy-policy/", //Specify the path to your privacy policy page.
  expires: 20, // 20 days cookie expiration date.
  delay: 3000, // Specify the time before the popup is displayed after page load (in milliseconds).
});

Set the cookie types.

$('body').ihavecookies({
    // Optional callback function when 'Accept' button is clicked
    onAccept: function() {
        // Do whatever you need to here...
    },

    // 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'
        }
    ],
});

Generated HTML code of the Cookie Consent Popup.

<div id="gdpr-cookie-message" style="">
  <h4>Cookies & Privacy</h4>
  <p>This website uses cookies to ensure you get the best experience on our website.</p>
  <p><a href="/privacy-policy/">More information</a>
    <button id="gdpr-cookie-accept" type="button">Accept</button>
  </p>
</div>

Options

There are many options available to help with customization:

Awesome UX Kit with 26 AI Wireframes for iOS7

Option	Default Value	Description
title	“Cookies & Privacy”	A custom title for the popup
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.”	Add your own cookie message here, if you prefer not to use the default one. HTML can be included within this message.
link	“/privacy-policy”	Link to your privacy policy for more information
delay	2000	Time before the popup is displayed after page load (in milliseconds)
expires	30	Days for the cookie to expire
onAccept	function(){}	Optional callback function when ‘Accept’ button is clicked
uncheckBoxes	false	Unchecks all checkboxes on page load that have class .ihavecookies applied to them. Set to true to turn this option on
moreInfoLabel	‘More information’	Label for link to privacy policy
acceptBtnLabel	‘Accept All Cookies’	Label for accept cookies button
advancedBtnLabel	‘Customise Cookies’	Label for customise cookies button
cookieTypesTitle	‘Select cookies to accept’	Title for customise cookies section
fixedCookieTypeLabel	‘Necessary’	Label for the “necessary” cookie type
fixedCookieTypeDesc	‘These are cookies that are essential for the website to work correctly.’	Description for the “necessary” cookie type
cookieTypes	Array	Array of cookie types for which to show checkboxes for – See code example below.

File Information

File Size	11 KB
Last Update	10 Month Ago
Date Published	2 Years Ago
License	MIT