Unobtrusive popup windows using session storage

Popup windows are effective for improving conversion rates but can be annoying if not done right. For instance we don’t want to fire the popup every time a user loads a specific url. That would surely annoy them.

It really depends on what the message is within the popup.

The below method of firing a popup is more suited to updating the user with “1 time only information”. Such as “register now for upcoming event - only 3 days left” or soft sell style information such as “30% discount on shipping anywhere in Australia”.

The popup is only fired once to inform the user. That’s it for the users session. The popup is not fired again until the user closes the website and reopens it. This unobtrusive method is made possible by the wonderful session storage JavaScript.

By incorporating session storage into pop-up window strategies, websites can deliver a more personalized, context-aware, and user-friendly experience, ultimately contributing to increased engagement and satisfaction.

Show fancybox popup window every time a new session is created by the user.

The popup will only fire when the user opens a new tab containing the url.

Popup window using session storage code breakdown

1. Use jQuery to check if the document is ready for the script
2. Check sessionStorage to see if the value already exists
3. If it doesnt exist then set the session value and open a fancybox

jQuery(document).ready(function ($) {
  if (!sessionStorage.getItem("polypop")) {
    sessionStorage.setItem("polypop", "diesel");
    Fancybox.show([{ src: "#modal-1", type: "inline" }]);
  }
});

• If a user refreshes or visits another page of the website the popup will not show.
• If the user closes the browser tab and then at some point starts a new tab the popup will show.

Using session storage is perfect for programming popups. If you need to test your popup (to see how it looks or whatever) all you do is open it in a new tab.

Add a delay to the popup.

Here we use set timeout function to add a delay before running the show fancy box function.

import { Fancybox } from './vendor/fancybox.umd';

jQuery(document).ready(function ($) {
  if (!sessionStorage.getItem('polypop')) {
    sessionStorage.setItem('polypop', 'diesel');
    const show_box = () => {
      Fancybox.show([{ src: '#modal-1', type: 'inline' }]);
    };
    setTimeout(show_box, 4000);
  }
});