Creating an PopUp Triggered by External Link

Using Elementor Pro’s PopUps is easy, but what about triggering them from an external application via the url?

Philip Ingram

By PHIL INGRAM

1. On the page in which you’d like the Popup to be triggered, but only when a special url is used, add a button, heading or some other element that allows for dynamic links.

2. In this example, we’ll use a button.

3. Once your PopUp template is built, for this button’s link, choose the stack icon w/ the label “dynamic” in the upper right hand corner of the button’s link field.

4. On the corresponding drop down of options, under the Actions group, choose Popup.

5. Click in the link field where a wrench icon and the word Popup appears, from the drop down options, choose “Open Popup” from the Actions option and from the Popup option, choose your popup template by entering in the first few letters of it’s name and selecting it.

6. Now, in the advanced tab of the button, give the button an ID of #trigger (without hash), we’ll use this to simulate our click event on the page load.

7. At the bottom of the page, add an html element and for the content, paste the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<script>
(function($){
    $(document).on('ready', function(){
        if(window.location.hash) {
            var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
            //console.log(hash);
            if(hash === 'triggered'){
                //console.log('click button');
                setTimeout(function(){
                    $('#trigger a').click();
                },100);
            }
        }
    });
})(jQuery);
</script>

8. Save and visit the url from anywhere appending the #triggered hash to the url and watch as the popup automatically loads.

9. Now go back and hide the trigger button (if desired) using css or by making it hidden via the element’s responsive options.

-Fin

“That Phil Ingram guy is a real class act and really knows his stuff!”

-Real Person

Spread the word