Tutorial

Elementor Popup once per session

Video

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.

Create a Popup

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

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>