GDPR and Informed Consent Cookies Bar


When it comes to informing users about the use of cookies on your website, you may need to consider explicit informed consent and have your users actively confirm they understand your policies.

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.

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.