Implementing a cookie consent banner on your Jekyll website is an essential step to comply with privacy regulations like GDPR and to build trust with your visitors. This guide will walk you through the process of adding a simple yet effective cookie consent banner to your static site.

Understanding Cookie Consent Banners

A cookie consent banner is a message that appears when visitors first arrive at your website, informing them about the use of cookies. It often includes options to accept or customize cookie preferences. For static sites like those built with Jekyll, implementing this feature requires adding some HTML, CSS, and JavaScript to your site.

Steps to Implement a Cookie Consent Banner

  • Create the Banner HTML: Add the HTML code for the banner in your site's layout or include file.
  • Style the Banner: Use CSS to position and style the banner so it’s visible but unobtrusive.
  • Add JavaScript: Implement JavaScript to handle user interactions, such as accepting cookies and hiding the banner.
  • Persist User Choice: Use cookies or local storage to remember if a user has accepted the banner.

Sample Implementation

Below is a simple example of how to implement a cookie consent banner in your Jekyll site.

1. Add this HTML to your layout file, such as _layouts/default.html:

<div id="cookie-banner">This website uses cookies. <button id="accept-cookies">Accept</button></div>

2. Include the following CSS in your stylesheet:

<style>#cookie-banner { position: fixed; bottom: 0; width: 100%; background: #222; color: #fff; padding: 10px; text-align: center; } #cookie-banner.hidden { display: none; }</style>

3. Add this JavaScript before the closing </body> tag:

<script> document.addEventListener('DOMContentLoaded', function() { var banner = document.getElementById('cookie-banner'); var acceptBtn = document.getElementById('accept-cookies'); if (!localStorage.getItem('cookiesAccepted')) { banner.classList.remove('hidden'); } else { banner.classList.add('hidden'); } acceptBtn.addEventListener('click', function() { localStorage.setItem('cookiesAccepted', 'true'); banner.classList.add('hidden'); }); }); </script>

Conclusion

Adding a cookie consent banner to your Jekyll website is straightforward and helps ensure compliance with privacy laws. By customizing the HTML, CSS, and JavaScript, you can create a user-friendly notification that respects your visitors’ privacy preferences while maintaining a clean site design.