Elementor Popup once per session || Show after X Sessions Elementor

Elementor Popup once per session || Show after X Sessions Elementor

# 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

# JavaScript Code
1. In this example add an HTML Widget to the page
2. Copy and paste the code below into the Widget
3. Change the "popupId" constant you the ID of your 

N.B.: if you want to show x times in one sessions, there we can use Shows up to X times in Advnaced Rules.

Place the following code wherever you want it.
Just change the "popupId" to your popup ID

POPUP setting:
1. Condition > Entire Site
2. Triggers > on page load 0.3sec
3. Advance rule > Show up to X Times [Times: 1, Per: Persisting, Counting: on Colose]

elementor_popup_sessions.js

<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>