Show a message after the cookie Consent Popup - This gist contains JavaScript code for displaying a customizable banner on a website after the user has accepted cookie consent. The code checks for the presence of a specific cookie and shows the banner with configurable content once the user has provided consent. This code can be integrated into …

checkCookieConsentAndShowPopup.js

// the name of the cookie to check before showing the popup
const COOKIE_NAME = "cookieyes-consent";
const COOKIE_POPUP = "ctaBannerShown";
const COOKIE_POPUP_CLASS = "popup-cta";
const COOKIE_POPUP_LINK = "//google.com";

/**
 * The content of the banner
 *
 * @type {{reject: string, text: string, title: string, accept: string}}
 */
const bannerContent = {
  title: "Title",
  text: "Text lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
  accept: "OK",
  reject: "NO"
}

/**
 * Checks if the user has accepted the cookie consent.
 *
 * @param {string} cookie - The name of the cookie to check.
 * @return {boolean} Returns true if the user has accepted the cookie consent, false otherwise.
 */
function hasAcceptedCookieConsent(cookie) {
  // Check if the cookie exists
  const cookieValue = getCookie(cookie);

  if (cookieValue === 'yes') {
    return true;
  }

  if (cookieValue) {
    // Split the cookie value by comma
    const values = cookieValue.split(",");

    // Initialize consent to "no" by default
    let consent;

    // Iterate through the values and find the "consent" key
    values.forEach(value => {
      const [key, val] = value.split(":");
      if (key === "consent") {
        consent = val;
      }
    });

    return consent === "yes";
  }
}

/**
 * Checks if the cookie consent has been given and shows a popup banner if not.
 *
 * @return {undefined} This function does not return a value.
 */
function checkCookieConsentAndShowPopup() {

  if ( getCookie( COOKIE_POPUP ) === "yes") return;

  let popup;

  if ( hasAcceptedCookieConsent( COOKIE_NAME ) ) {
    if ( !document.getElementById( COOKIE_POPUP_CLASS ) ) {
      // Create and display the popup banner
      popup = document.createElement("div");
      popup.id = COOKIE_POPUP_CLASS;

      // Add title, text, and a CTA button
      popup.innerHTML = `
        <h4>${bannerContent.title}</h4>
        <p>${bannerContent.text}</p>
        <div class="button-wrapper">
          <button class="popup-button outlined" onclick="closePopup()">${bannerContent.reject}</button>
          <button class="popup-button" onclick="okPopup(COOKIE_POPUP_LINK)">${bannerContent.accept}</button>
        </div>
        <style>
          #${COOKIE_POPUP_CLASS} {
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            z-index: 9999999;
            background: white;
            width: 700px;
            box-sizing: border-box;
            padding: 1rem;
          }
          #${COOKIE_POPUP_CLASS} .button-wrapper{
            display: flex;
            justify-content: right;
          }
          #${COOKIE_POPUP_CLASS} .popup-button {
            font-size: 14px;
            font-family: inherit;
            line-height: 24px;
            padding: 8px 27px;
            font-weight: 500;
            margin: 0 8px 0 0;
            border-radius: 2px;
            white-space: nowrap;
            cursor: pointer;
            text-align: center;
            text-transform: none;
            min-height: 0;
            color: #FFFFFF;
            border-color: #33368c;
            background-color: #33368c;
          }
          #${COOKIE_POPUP_CLASS} .popup-button.outlined {     
            color: #33368c;
            border-color: #33368c;
            background-color: transparent;
          }
        </style>
      `;

      document.body.appendChild(popup);
    }
  }
}

/**
 * Retrieves the value of a cookie with the specified name from the document's cookies.
 *
 * @param {string} name - The name of the cookie to retrieve.
 * @return {string|null} The value of the cookie if found, or null if the cookie does not exist.
 */
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split("=");
    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
}

/**
 * Closes the popup element with the given ID.
 *
 * @param {string} id - The ID of the popup element to be closed.
 * @return {void} This function does not return any value.
 */
function closePopup() {
  document.getElementById(COOKIE_POPUP_CLASS).remove();
}

/**
 * A function that sets a cookie, closes a popup, and redirects to a new page.
 *
 * @param {string} href - The URL to redirect to.
 * @return {undefined} This function does not return a value.
 */
function okPopup(href) {
  document.cookie = COOKIE_POPUP + "=yes";
  closePopup()
  window.location.href = href
}

// Call the checkCookieConsentAndShowPopup function on page load
checkCookieConsentAndShowPopup();