GDPR and Informed Consent Cookies Bar

Yesterday we talked about the importance of websites being GDPR compliant, and we gave readers a customizable cookie bar to help them get one step closer to becoming GDPR compliant.

With the discussions surrounding GDPR, however, there's a growing concern that it might not be enough for a website to simply tell its users how their information is being used. Internet privacy proponents have promoted the concept of "informed consent" -- web users need to give explicit permission stating that a website may use submitted information in the ways detailed by a site.

Thus, we've created a secondary HTML cookies bar that doesn't just inform users of the information usage; it requires they accept the terms and conditions of the website.

This slight difference can mean very different things under the scope of GDPR compliance. While an alert at either the top or bottom of a site could work for now, it might not be enough for future applications of GDPR. 

In the hope of spreading the word, here's how to build out a simple HTML cookies bar focused on informed consent 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 (following up on our previous iteration) accepts the "consent" attribute. Just set this to "true" to add the "Accept" button.

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.