Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save elias1435/f29e77e10b427705fef60017022925c1 to your computer and use it in GitHub Desktop.
Save elias1435/f29e77e10b427705fef60017022925c1 to your computer and use it in GitHub Desktop.
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]
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment