Many website owners want to inform visitors about their use of cookies, especially with privacy regulations like GDPR. While Jekyll sites are static and don't have built-in tools for this, you can add a custom cookie consent banner manually. This guide will walk you through the process of creating a simple, effective cookie consent banner for your Jekyll site.

Why Add a Cookie Consent Banner?

Adding a cookie consent banner helps you comply with privacy laws and builds trust with your visitors. It informs users about data collection and offers them the choice to accept or decline cookies. A custom banner can be styled to match your website’s design and provide a better user experience.

Steps to Create a Custom Banner

  • Include HTML for the banner in your site's layout.
  • Add CSS styles to make it visually appealing.
  • Implement JavaScript to handle user interactions and store their preferences.

1. Add HTML to Your Layout

Insert the following HTML code into your _layouts or directly into your main HTML file, such as default.html. Place it just before the closing </body> tag.

<div id="cookie-banner">

  <p>We use cookies to improve your experience. By continuing to browse, you accept our cookie policy.</p>

  <button id="accept-cookies">Accept</button>

  <button id="decline-cookies">Decline</button>

</div>

2. Add CSS Styles

Create a CSS file or add styles within a <style> block in your HTML. Example styles:

style

  #cookie-banner {

    position: fixed;

    bottom: 0;

    width: 100%;

    background-color: #333;

    color: #fff;

    text-align: center;

    padding: 15px;

  }

  #cookie-banner button {

    margin: 0 10px;

    padding: 8px 16px;

  }

3. Add JavaScript for Interaction

Insert this script before the closing </body> tag or in a separate JS file.

script

  if (!localStorage.getItem('cookieConsent')) {

    document.getElementById('cookie-banner').style.display = 'block';

  } else {

    document.getElementById('cookie-banner').style.display = 'none';

  }

  document.getElementById('accept-cookies').addEventListener('click', function() {

    localStorage.setItem('cookieConsent', 'accepted');

    document.getElementById('cookie-banner').style.display = 'none';

  });

  document.getElementById('decline-cookies').addEventListener('click', function() {

    localStorage.setItem('cookieConsent', 'declined');

    document.getElementById('cookie-banner').style.display = 'none';

  });

Final Tips

Test your banner across different browsers and devices to ensure it appears correctly. Customize the styles and text to match your site's branding and legal requirements. Remember to update your privacy policy accordingly.