GDPR Cookie Consent Popup Plugin - jQuery ihavecookies.js

GDPR Cookie Consent Popup Plugin - jQuery ihavecookies.js

ihavecookies.js is a lightweight, easy-to-style jQuery plugin to inform your users that your site has cookies and to make your website comply with the EU cookie law.

The plugin Displays the cookie consent message on first visit or 30 days after their last visit.

1. Download and insert the JavaScript jquery.ihavecookies.js after jQuery but before the closing 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>

2. Initialize the jQuery ihavecookies.js plugin and specify the title & message displayed in the Cookie Consent Popup.

$('body').ihavecookies({
  title: "Cookies & Privacy",
  message: "This website uses cookies to ensure you get the best experience on our website."
});

3. Specify the path to your privacy policy page.

$('body').ihavecookies({
  title: "Cookies & Privacy",
  message: "This website uses cookies to ensure you get the best experience on our website.",
  link: "/privacy/"
});

4. Specify the time before the popup is displayed after page load (in milliseconds).

$('body').ihavecookies({
  title: "Cookies & Privacy",
  message: "This website uses cookies to ensure you get the best experience on our website.",
  link: "/privacy/",
  delay: 2000,
});

5. Specify the cookie expiration date.

$('body').ihavecookies({
  title: "Cookies & Privacy",
  message: "This website uses cookies to ensure you get the best experience on our website.",
  expires: 30 // 30 days
});

6. The generated HTML of the Cookie Consent Popup.

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

7. Feel free to style the Cookie Consent Popup.

#gdpr-cookie-message {
  /* your css here */
}
#gdpr-cookie-message a {
  /* your css here */
}
#gdpr-cookie-message a:hover {
  /* your css here */
}
#gdpr-cookie-message h4 {
  /* your css here */
}
#gdpr-cookie-message p:last-child {
  /* your css here */
}
#gdpr-cookie-message button {
  /* your css here */
}
#gdpr-cookie-message button:hover {
  /* your css here */
}

This awesome jQuery plugin is developed by ketanmistry. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 24.04.2018
  • Source