Tutorial

Elementor Popup once per session

Uses Plugins

Elementor PRO

Description

Inspired by a question in the Global Elementor Community (FB). This video shows a way to have a Popup open only once per session. To be clear, I’m not a fan of popups that open without the user doing something first. However, it is quite common.

1

Create a Popup

  1. Create a standard Elementor Popup
  2. Set the Display Conditions for the pages you want to use it on
  3. Take a note of the Popup ID
2

JavaScript Code

In this example add an HTML Widget to the page

Copy and paste the code below into the Widget

Change the "popupId" constant you the ID of your popup

Code (click to copy)

Code for HTML Widget or wherever you want it. (javascript)

Place the following code wherever you want it.

Just change the "popupId" to your popup ID

<script>
;((w,d) => {
    w.addEventListener('elementor/frontend/init', ()=>{
        const $ = jQuery;

        /*
        Session storage to record if a popup has been closed.
         */
        let popupsClosed = JSON.parse(sessionStorage.getItem('wpg_popups_closed')) || [];
        $( d ).on( 'elementor/popup/hide', (e,id) => {
            //Id id not already in session storage, add it.
            if(false === popupsClosed.includes(id)){
                popupsClosed.push(id);
                sessionStorage.setItem('wpg_popups_closed', JSON.stringify(popupsClosed));
            }
        })

        /*
        Open popup if ID is not in session storage
         */
         elementorFrontend.on( 'components:init' , ()=>{
            const popupId = 9877; //ID of Popup to open
            if(false === popupsClosed.includes(popupId)){
                elementorProFrontend.modules.popup.showPopup( { id:popupId });
            }
         
         });
    })

})(window,document)
</script>