Implementing a Cookie Consent Banner in Hugo

by

Implementing a cookie consent banner on your Hugo website is essential for compliance with privacy laws like GDPR and CCPA. It informs visitors about the use of cookies and obtains their consent before tracking begins.

A cookie consent banner enhances transparency and builds trust with your visitors. It also helps ensure your website complies with legal requirements, avoiding potential fines and legal issues.

  • Choose a Cookie Consent Library: Select a JavaScript library like Cookie Consent by Osano or Osano’s open-source options.
  • Add the Script to Your Hugo Site: Integrate the library into your site’s head or footer partials.
  • Create the Banner HTML: Add the HTML for the banner in your site’s layout files.
  • Configure the Banner: Customize the appearance and behavior via CSS and JavaScript options.
  • Test Your Implementation: Ensure the banner appears correctly and records user consent as needed.

Example Implementation

Here is a simple example using a popular cookie consent script:

First, add this script to your head section in layouts/_default/baseof.html:

<script src="https://cdn.cookieconsent.popupsmart.com/cc.js" data-design="classic">

Then, include the following script to initialize the banner, preferably just before the closing </body> tag:

<script>
  window.addEventListener("load", function() {
    window.cookieconsent.initialise({
      "palette": {
        "popup": {
          "background": "#000"
        },
        "button": {
          "background": "#f1d600"
        }
      },
      "theme": "classic",
      "content": {
        "message": "We use cookies to improve your experience.",
        "dismiss": "Got it!",
        "link": "Learn more",
        "href": "/privacy-policy/"
      }
    });
  });
</script>

Best Practices

  • Make the banner unobtrusive but visible.
  • Provide a link to your privacy policy.
  • Allow users to set preferences or reject cookies if possible.
  • Test your banner on different devices and browsers.

By following these steps, you can ensure your Hugo website complies with privacy regulations and respects your visitors’ privacy preferences.