How To: Use Cookies to Hide Alert Bars and Pop-ups

by Utsab Karki, Senior WordPress Developer

Insights / Website Development / How To: Use Cookies to Hide Alert Bars and Pop-ups

Alert bars and pop-ups can be great ways to convey important messages on your website, but they can very easily get annoying to your users if they keep seeing the same information on every page of your site – over and over again.

That’s why it’s important to give your users the ability to hide these alert bars and popups once they have seen them, and experience the site without these sticky notifications. Ideally, closing the alert bar or pop-ups will hide them for an extended period of time – not just one visit to the site.

In order to let users hide these notifications for multiple site visits, we’ll need to add a button to the alert bar or popup that, when clicked, hides the notification.

As a reminder, here’s what our pop-up code looks like:

<div class="popup-container" style="display:none;">
     <div class="close-button">X</div>
     <div class="popup-content">
          <div class="popup-content-inner">
               { Popup Content Goes Here }
          </div>
     </div>
</div>

The important class here – which you can add to your alert bar – is the “close-button” div.

When the user clicks on the close button, we need to tell the browser that the user has closed the alert bar or popup and not to display it for the user while they browse through the rest of the site. We achieve this by utilizing the browser’s sessionStorage property.

The sessionStorage property stores data in the browser for the length of time the browser tab is open and gets cleared when the browser tab is closed. Each browser tab gets a unique sessionStorage property for each site visit.

When the user clicks on the close button, we want to use the sessionStorage property and set a unique key-value pair that can be accessed when the user browses to other pages on the site. In order to set the key-value pair, add the following jQuery to the site.

$('.close-button').on('click', function(){
     if (window.sessionStorage) {
          sessionStorage.setItem("popupClosed", "1");
     }
     $('.popup-container').css('display', ‘none’);
     return false;
});

In this code, we assume that the class for the close button is close-button and the class for the container of the pop-up is popup-container. When the user clicks on the close button, we check to see if the sessionStorage property is available and, if it is, we store a key-value pair of popupClosed and 1 respectively. Then, we add the CSS property of display: none; to the container.

This will hide the pop-up (or alert bar) when the button is closed.

When the user goes to a different page on the site, we need to check if this key-value pair exists in the sessionStorage property and, if it does, we need to hide the alert bar or popup using this jQuery script.

if (sessionStorage.getItem("popupClosed")) {
     if ($('.popup-container').length) {
          $('.popup-container').css('display', ‘none’);
     }
}

In this code, we check to see if the popupClosed key exists and, if it does, if the pop-up is present on the page. If both are true, then we hide the pop-up on the page.

Again, this method works to hide the pop-up or alert bar until the user closes the current tab. But if we want to hide the alert-bar or pop-up for a set amount of time when the user closes the tab, then we need to utilize cookies.

Cookies are also stored in a browser’s storage system, but in addition to a key and value pair, it also allows us to store additional data – like an expiration date and time for the cookie. In order to achieve this, we add the following jQuery code that gets triggered when the user closes the popup or alert-bar.

$('.close-button').on('click', function(){
     var date = new Date();
     date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
     document.cookie = 'popupClosed=true; expires=' + date.toUTCString() + '; path=/';
     $('.popup-container').css('display', ‘none’);
});

In this code, when the close button is clicked, we set a cookie with a name of popupClosed and a value of true and hide the popup. We also set a date and time for the cookie to expire 24 hours from the current date and time (calculating the time in milliseconds).

Now, with the cookie set, we just need to add the following jQuery script to read the cookie when the user visits any page on the site. Since expired cookies are removed from the browser, if the cookie exists and has a value of true, we hide the popup or alert-bar.

if ($('.popup-container').length) {
     var nameEQ = name + "=";
     var cookies = document.cookie.split(';');
     for (var i = 0; i < cookies.length; i++) {
          var cookieName = 'popupClosed=';
          var cookie = cookies[i];
          while (cookie.charAt(0) == ' ') cookie = cookie.substring(1, cookie.length);
          if (cookie.indexOf(cookieName) == 0 && cookie.substring(cookieName.length, cookie.length) === 'true') {
               $('.popup-container').css('display', 'none');
          }
     }
}

With just a few lines of code, we can present important information to users while giving them the ability to hide it and not get annoyed seeing the same information on every page. If you need help implementing a similar feature on your website or for any other digital marketing needs, reach out to us.