GDPR Compliance and the Use of Cookie Consent Bars
With GDPR in full swing, your website will need the tools to be GDPR compliant.
The European Union's GDPR regulations are in full swing, and websites around the world are struggling to comply to the changes. This is especially true for a variety of organizations who either wanted to wait and see how the regulations would impact their interests or how others were implementing the changes.
First, what is the GDPR? The General Data Protection Regulation (GDPR) is a comprehensive set of regulations governing data protection and the privacy of individuals within the EU that went into effect on May 25, 2018. While there remains considerable uncertainty around these requirements and how they will be enforced, it’s generally believed that companies (including those based in the US) may be fined if they fail to take adequate steps to address the basic principles of the GDPR.
The regulations are extensive and the specifics somewhat confusing. One of the key concepts requires that website visitors should be aware of what information a website collects about them and how the organization plans on using that information. One of the best ways to notify your website visitors of this information (and get on track to becoming GDPR compliant) is through a cookie consent bar/notice.
In the hope of spreading the word, here's how to build out a simple HTML cookies bar so your website can get one step closer to GDPR compliance:
For the greatest compatibility with existing websites, the following HTML does not rely on Bootstrap or any other styling dependencies. This will allow you to easily insert the snippet into your existing templates.
The CSS styles the banner as a fixed element to the bottom of the page. Feel free to customize this CSS to match the specifics of your individual site.
The JS simply initializes the popover and uses it's options to allow it to close on click. If clicked, a localStorage object is stored so that your users don't repeatedly see the banner.
Want to see how it all looks before committing to its use? Check out the JSFiddle below. Be sure to scale your browser window to various sizes to see how the banner would look on mobile display.
In our next blog post, we'll discuss the issue of "Explicit Consent" in acknowledging the site's use of cookie, a confirmation button the user must click, how all of the above code can be used to create this type of web design element.