CookieInfo.js – EU Cookie Law Compliance Script

Introduction

The EU Cookie Law, also known as the ePrivacy Directive, is a European Union law that requires websites to obtain explicit consent from visitors before storing or accessing cookies on their devices. The law aims to protect users' privacy and give them more control over the information collected about them online.

To comply with this law, many websites use a script called CookieInfo.js, a popular JavaScript library that helps websites obtain consent from visitors and store cookies in accordance with the EU Cookie Law. In this tutorial, we will guide you through the process of using CookieInfo.js to ensure your website is compliant with the EU Cookie Law.

Step 1: Include the CookieInfo.js Script

To start using CookieInfo.js, you need to include the script in your website's HTML file. You can do this by adding the following code to the head section of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/cookieinfo@1.4.0/dist/cookieinfo.min.js"></script>

Make sure to replace the version number (1.4.0) with the latest version available on the CookieInfo.js GitHub page.

Step 2: Configure the CookieInfo.js Options

CookieInfo.js provides several options that you can configure to customize the script's behavior. You can do this by adding the following code to the head section of your HTML file:

<script>
  CookieInfo.config({
    // Set the cookie domain
    domain: 'yourdomain.com',
    // Set the cookie path
    path: '/',
    // Set the cookie expiration date (in days)
    expires: 30,
    // Set the cookie name
    name: 'cookieinfo',
    // Set the cookie value
    value: 'true',
    // Set the cookie type (e.g., "strict", "relaxed", or "none")
    type: 'strict',
    // Set the cookie language
    language: 'en',
    // Set the cookie version
    version: '1.0',
  });
</script>

Replace yourdomain.com with your website's domain name, and adjust the other options as needed.

Step 3: Add the CookieInfo.js Button

To obtain consent from visitors, you need to add a button to your website that triggers the CookieInfo.js script. You can do this by adding the following code to your website's HTML file:

<button id="cookieinfo-button">Accept Cookies</button>

Make sure to give the button an ID of "cookieinfo-button" so that CookieInfo.js can find it.

Step 4: Trigger the CookieInfo.js Script

To trigger the CookieInfo.js script, you need to add an event listener to the button you created in Step 3. You can do this by adding the following code to your website's JavaScript file:

document.getElementById('cookieinfo-button').addEventListener('click', function() {
  CookieInfo.show();
});

This code tells CookieInfo.js to display the consent form when the button is clicked.

Step 5: Handle Cookie Consent

Once a visitor has accepted or declined cookies, CookieInfo.js will store their preference in a cookie. You can then use this cookie to determine whether to set or retrieve cookies on the visitor's device.

To handle cookie consent, you can add the following code to your website's JavaScript file:

if (CookieInfo.getConsent()) {
  // Set cookies on the visitor's device
  document.cookie = 'cookieinfo=true; expires=' + new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toGMTString();
} else {
  // Do not set cookies on the visitor's device
  document.cookie = 'cookieinfo=false; expires=' + new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toGMTString();
}

This code checks whether the visitor has accepted cookies and sets or retrieves cookies accordingly.

Conclusion

By following these steps, you can use CookieInfo.js to ensure your website is compliant with the EU Cookie Law. Remember to customize the script's options to fit your website's specific needs, and to handle cookie consent accordingly.