In Elementor Pro 2.7 we are adding two event triggers to our Popups:
elementor/popup/show– when a Popup is opened/shownelementor/popup/hide– when a Popup is closed/hidden
One thing we get a lot of requests for is a way to track Popups and a way to initialize JavaScript-based elements when a popup is shown. To allow that we added these to events mentioned above so now every time a Popup is shown we trigger the elementor/popup/show event and when a popup is closed we trigger the elementor/popup/hide event.
Usage:
The usage is very simple, you just add an event listener to the desired event with your callback, for example tracking popup opened events:
jQuery( document ).on( 'elementor/popup/show', () => {
// do your tracking here
} );The event callback is called with 3 variables:
Event– the dom event object.popupId– the id of the popup which triggered the eventpopupDocument– The elementor popup document object instance
This allows you to have even more control, for example, if I want to run my tracking code only when a specific popup is closed:
jQuery( document ).on( 'elementor/popup/hide', ( event, id, instance ) => {
if ( id === 123 ) {
// do your tracking here
}
} );As always, your feedback is welcome.
28 Responses
This is awesome stuff, keep these kind of write-ups coming!
Can you trigger these events with JS? If I needed to setup a custom click event, what would I use? See below example.
// jQuery Click Function
$( “#foo” ).on( “click”, function() {
// trigger the “‘elementor/popup/show'” event here
});
Why is this necessary? Because not every element has the option to setup a modal. This is the issue. In my example, I have a menu item that should open a login modal. But I can’t trigger the modal from within the Nav Menu widget.
How exactly do I use this?
In my pop-up, do I insert a HTML widget and then place the code there? Or do I insert it on the page where pop-up is supposed to appear?
I have tried both and none of them work.
Can you please write an example. I have a form on which users are not supposed to select some field, if they do, I want a popup to display saying they can’t select that field
It doesn’t work. Please see: http://experiments.bdwm.be/elementor/
I have added the correct code in the footer.
Related github issues that confirm that it’s not working:
– https://github.com/elementor/elementor/issues/10690
– https://github.com/elementor/elementor/issues/11196
The pure JS version doesn’t seem to be working, even when placed inside jQuery’s ready function. Any idea why?
Here’s a Github thread about it: https://github.com/elementor/elementor/issues/10690
Thank you @Ohad
Great doc. Very useful
Just to save everybody some time. Plain Javascript Events are not working.
document.addEventListener( ‘elementor/popup/show’, () => {
// do your tracking here
} );
There is already a issue:
https://github.com/elementor/elementor/issues/10690
Use the jquery version only
You are correct. We have removed the Vanilla JS example from the doc. Thanks for the heads up.
would be nice to have popups based on the real time and shown without refreshing the site.
I’m having issues submitting Elementor forms embedded in popups to Hubspot because the popup and the form don’t exist on the page on load.
Is there a way to initialise the popups when the page is loaded and not only when it’s triggered to be displayed? In that case, I’d have the html of the popup and of the form in the page from the beginning and I’d show the popup later on.
Do you find any solution for it?
Hi, it’s my first time doing a pop-up tracking.
Do I add this code in functions.php?
Hello, your code sample doesn’t work!
Uncaught ReferenceError: id is not defined
I tried with popupId too, the variable is null.
I thought, the ID should be the same as wordpress’s post-id…
I think I may have found a bug:
On Safari, there’s no way to identify the element that opened the popup because (assuming we used a for this) event.currentTarget.activeElement is the button on Firefox and Chrome, but on Safari event.currentTarget.activeElement is the document.
The same happens to event.delegateTarrget.activeElement and event.target.activeElement
On Safari, I was not able to find a variable to identify that the opened the popup.
This was the issue I was having as well. Its been over a year and it’s not fixed.
What is for Elementor image lightbox. I need to add a custom code when the lightbox close button is click.
How to get the button/link clicked and triggered the popup?
where shall I implement the code? functions.php? I am new to this.
Not working as described.
1. Must be attached to `window` and not `document`.
2. Only passes event object to the callback. Id and instance are undefined.
This doesn’t work since elementor pro 3.9
this code is not working any more after elementor 3.9. How can I fix this?
Try upgrading to 3.9.2
Where can I find documentation with all the events used by Elementor?
I’m looking for Lightboxes
Are these events valid for lightbox as well? Thanks
Hello, I am trying to manually trigger the PopUp by manually so I can add an event listener on a button. I created a PopUp with the id ‘798’. In WordPress the shortcode is ““.
When I attempt to assign a reference to the Popup, I get undefined in the Elementor Custom Code warning. Code Snippet below
document.addEventListener(‘DOMContentLoaded’, function () {
var popupId;
var popupInstance;
var menuTrigger = document.querySelector(‘.subscribe_btn’);
if (menuTrigger) {
menuTrigger.addEventListener(‘click’, function (e) {
alert (‘clicking subscribe’);
e.preventDefault();
if (popupInstance) {
//popupInstance.showPopup();
}
});
}
function initializePopup() {
//e.preventDefault();
popupId = ‘798’; // Replace ‘your-popup-id’ with the actual ID of your Popup.
popupInstance = elementorProFrontend.getPopup(popupId);
alert(‘popupInstance :::: ‘ + popupInstance);//// —— >> popupInstance is undefined
}
// Check if Elementor Pro Frontend API is available
if (typeof elementorProFrontend !== ‘undefined’) {
// If it’s available, initialize the Popup
initializePopup();
} else {
// If it’s not available yet, listen for the ‘elementor/frontend/init’ event
document.addEventListener(‘elementor/frontend/init’, initializePopup);
}
});
JS code for popup is not working for me.
Can anybody help?
Hi,
I would like to refresh the popup data after hiding it.
I added several product filters, radiobuttons etc. in the popup. After closing the popup and opening again, all the selected options are lost.
How can I do that?