GDPR Compliance and the Use of Cookie Consent Bars

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.

If you have visted any number of websites recently, you will see that an alert (either at the top or bottom of a site) is becoming common place. This notification, generally speaking, tells the user that a given site collects certain information and more details can be found on, say, the site's privacy policy. This type of element is being widely adopted because it confronts some of the big concepts of GDPR.

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:

HTML

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.

Solodev Shortcode

For Solodev users, we have created a custom shortcode that can be easily included in the base template of sites. The shortcode allows you to customize the color accents of the banner to better match your branding and to specify the unique link to your privacy policy.

CSS

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.

JS

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.