Unobtrusive popup windows using session storage

Pop up window 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.

Utilizing session storage for pop-up windows in website design offers several benefits:

1. Personalization: Session storage allows you to store data temporarily on the client side, enabling personalized pop-up content based on a user’s specific session or interactions.

2. Improved User Experience: By leveraging session storage, you can ensure that users don’t repeatedly see the same pop-up during a single session, preventing potential annoyance and improving overall user satisfaction.

3. Contextual Messaging: Session storage enables the pop-up content to adapt dynamically based on user behavior within the session, providing more relevant and contextually appropriate messages.

4. Reduced Intrusiveness: With session storage, you can control the frequency of pop-ups, making them appear at strategic moments. This helps maintain a balance between engagement and avoiding an intrusive user experience.

5. Data Persistence: Information stored in session storage persists across page reloads within a single session, allowing for a consistent experience if a user navigates through different pages on the website.

6. Efficient Resource Usage: Unlike local storage, session storage is temporary and cleared when the session ends, which can be beneficial for managing resources efficiently, especially for temporary pop-up content.

7. Compliance with User Preferences: Utilizing session storage allows you to respect user preferences by managing pop-up behavior within a single session, aligning with privacy and user-centric design principles.

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);
  }
});