FS Cookie Consent not allowing script

BLUF

When the script is managed by FS Cookie Consent, it does not run at all.

When the script is not managed by FS Cookie Consent, the cookie dismissing the notification bar is removed on browser reload/refresh.

Update 1

Tried wrapping the script in the Consent API as worked in this post, but that did not solve my issue. console.log('Consent instance:', instance); worked but the script did not run.

  • The close button uses a WF Interaction to hide the notification bar.
  • The script is placed in a code embed element placed after the .notification_component element (div).

Also, could not locate any documentation for the Consent API.

Setup

FS Cookie Consent is correctly set up for full GPDR compliance, and all scripts are managed.

Issue 1

My design includes a notification bar with a close button. I would like to “snooze” the notification bar for five days when a visitor dismisses by clicking the close button, using the script below.

This script does not log anything in the browser console, when managed by Finsweet Cookie Consent. When I remove the fs-consent-categories="essential" fs-consent-scripttype="text/javascript" type="fs-consent" the script logs statements.

Why is this occuring? How do I remaing GPDR compliant and still dismiss the notification for 5 days?

Issue 2

Running the script with fs- attributes removed, when I dismiss and refresh this is logged:

Cookie found: notificationDismissed=true
Notification bar hidden due to existing cookie.
Running unit tests...
Cookie set: testCookie=true; expires in 1 day(s)
Cookie found: testCookie=true
Cookie not found: nonExistentCookie
All tests completed.

and the notification bar remains hidden. However, examining Dev tools → application → cookies, the notificationDismissed cookie is gone and a second refresh returns the bar.

Is Finsweet Cookie Consent removing the notificationDismissed cookie after it is found, or otherwise interefering with the script? Subsequent refreshes display the notification bar.

The script

<!-- This script is managed by Finsweet Cookie Consent -->
<script fs-consent-categories="essential" fs-consent-scripttype="text/javascript" type="fs-consent">
  // Function to check if cookies are enabled
  function areCookiesEnabled() {
    // Temporarily set a test cookie
    document.cookie = "testCookie=1; domain=.jessicapaschke.com; Secure; SameSite=Lax";
    const cookiesEnabled = document.cookie.indexOf("testCookie=") !== -1;

    // Delete test cookie
    if (cookiesEnabled) {
      document.cookie = "testCookie=1; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.jessicapaschke.com; Secure; SameSite=Lax";
    }
    return cookiesEnabled;
  }

  // Function to set a cookie with an expiration date and proper attributes
  function setCookie(name, value, days) {
    if (!areCookiesEnabled()) {
      console.warn("Cookies are disabled in this browser.");
      return;
    }
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "; expires=" + date.toUTCString();
    // Always use Secure and SameSite=Lax when on HTTPS
    const domain = "; domain=.jessicapaschke.com";
    const path = "; path=/";
    const secure = "; Secure";
    const sameSite = "; SameSite=Lax";

    document.cookie = `${name}=${value}${expires}${path}${domain}${secure}${sameSite}`;
    console.log(`Cookie set: ${name}=${value}; expires in ${days} day(s)`);
  }

  // Function to retrieve a cookie by name
  function getCookie(name) {
    if (!areCookiesEnabled()) {
      console.warn("Cookies are disabled in this browser.");
      return null;
    }
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) {
      const cookieValue = parts.pop().split(";").shift();
      console.log(`Cookie found: ${name}=${cookieValue}`);
      return cookieValue === 'true'; // Convert string to boolean
    }
    console.log(`Cookie not found: ${name}`);
    return null;
  }

  // Execute this code when the window finishes loading
  window.onload = function() {
    if (!areCookiesEnabled()) {
      console.warn("Cookies are disabled. Notification bar behavior will not be stored.");
      return;
    }

    const notificationBar = document.getElementById('notification_component');
    const closeButton = document.getElementById('notification-close-button');

    if (notificationBar) {
      if (getCookie('notificationDismissed')) {
        notificationBar.style.display = 'none';
        console.log('Notification bar hidden due to existing cookie.');
      } else {
        console.log('Notification bar visible. No dismissal cookie found.');
      }
    }

    if (closeButton && notificationBar) {
      closeButton.addEventListener('click', function() {
        notificationBar.style.display = 'none';
        setCookie('notificationDismissed', true, 5);
        console.log('Notification bar dismissed and snoozed for 5 days.');
      });
    }
  };
</script>

Hello @zephyr! Could you please a link to the published site? I will take a look!

@Support-Luis - Absolutely!

Live: https://jessicapaschke.webflow.io/nav-bar-development

Read-Only: https://preview.webflow.com/preview/jessicapaschke

Hello @zephyr I would recommend using local storage instead Cookie storage options since this setup is primarily for normal UX within your site.

@robert.kibet thanks for the suggestion—any ideas if this method would conflict with GPRD compliance or FS Cookies Consent?

It should be fine for your use-case since you’re using that stored value to determine if a notification should be shown to the user or hidden. Local storage would work much better here @zephyr

1 Like

@robert.kibet — local storage works great! Thanks for the suggestion.

@Support-Luis — the issue remains:

  • When the script is managed by FS Cookie Consent, it does not run at all. Even the first debugging statement—console.log("[DEBUG] DOM Content Loaded.");—is never present in the console.

  • When the script is not managed, the local storage script works perfectly across refreshes.

<!--script fs-consent-categories="essential" fs-consent-scripttype="text/javascript" type="fs-consent"-->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    console.log("[DEBUG] DOM Content Loaded.");

    // Query the elements
    var allBars = document.querySelectorAll(".notification_component");
    var closeButton = document.querySelector(".notification-close");

    // Log if they were found
    console.log("[DEBUG] notificationBar:", allBars);
    console.log("[DEBUG] closeButton:", closeButton);

    var now = Date.now();

    // Check if we should hide bars on page load
    var dismissedUntil = localStorage.getItem("notificationDismissedUntil");

    if (dismissedUntil && parseInt(dismissedUntil, 10) > now) {
      console.log(
        "[DEBUG] The bar should be hidden because the stored time is still in the future."
      );
      // If it's still in the future, hide all bars
      allBars.forEach(function (bar) {
        bar.style.display = "none";
      });
    } else {
      console.log(
        "[DEBUG] The bar should be shown (no valid dismissedUntil or it's expired)."
      );
    }
    // Attach a delegated click listener to each bar
    allBars.forEach(function (bar) {
      bar.addEventListener("click", function (event) {
        if (event.target.matches(".notification-close")) {
          console.log("[DEBUG] Close button clicked on bar:", bar);

          // Hide that specific bar (JS hide or let Webflow Interaction handle it)
          // bar.style.display = "none";

          // Set localStorage to remember dismissal for 5 days
          var fiveDaysFromNow = now + 5 * 24 * 60 * 60 * 1000;
          localStorage.setItem(
            "notificationDismissedUntil",
            fiveDaysFromNow.toString()
          );
          console.log(
            "[DEBUG] notificationDismissedUntil set to:",
            fiveDaysFromNow
          );
        }
      });
    });
  });
</script>