How do you trigger Elementor Popup via code

Question

is anybody here using Elementor? How do you trigger the Popup via code? For example.

function popup_call(){
    ...
    if(....){
        //trigger the popup here...
    } 
}

Solution 1

This question has already been answered:

// accessible on window.elementorProFrontend
elementorProFrontend.modules.popup.showPopup( { id: 123 } );

https://github.com/elementor/elementor/issues/7077#issuecomment-595570337

or try to bind your popup to a button, hide the button with css

.yourbtn {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

and use click with js (jquery)

 $('.yourbtn').click();

If the second method helps you, do not forget to hide the button from screen readers aria-hidden="true" and tabindex="-1"

Solution 2

Elementor's Popup needs to be register and trigger. This topic might help you.

Use the wp_footer hook to register your popup.

add_action( 'wp_footer', 'your_popup_function', 10, 5);
function your_popup_function(){
    
    if(..assuming your condition is true..){
        
        $popup_id = '2409'; //your Popup ID.
        ElementorPro\Modules\Popup\Module::add_popup_to_location( $popup_id ); //insert the popup to the current page

        ?><script>
        jQuery( document ).ready( function() { //wait for the page to load
            /* You can do more here, this will just show the popup on refresh of page, but hey this is JQuery so you can do more things here depending on your condition to trigger the popup */
            jQuery( window ).on( 'elementor/frontend/init', function() { //wait for elementor to load
                elementorFrontend.on( 'components:init', function() { //wait for elementor pro to load
                    elementorFrontend.documentsManager.documents[<?php echo $popup_id ;?>].showModal(); //show the popup
                } );
            } );
        } );
         </script>;
         <?php
    }
    
    return; //return nothing by default and do not show the popup.
 }

Read the comments for more clarification.

Solution 3

https://github.com/sukiwp/popup-trigger-url-for-elementor-pro

You are required to set the Display Conditions settings of your popup to pages where you want the popup to show. Otherwise, your popup won't show up.

Comments

[Zian Tap Chan]

Problem is it says Uncaught TypeError: Cannot read property 'showPopup' of undefined.

[Zian Tap Chan]

Also, let's say, I did the second method. Then how will I trigger that button under my functions.php or via code? I have a conditional statement where it will only show if its true.

[Unbywyd]

Show the popup is required on the client side (js), where does the function.php and server side? Have you looked at the link that I sent above and tried all the options?

[iqbal malik]

hello sir, i am using that code, elementor popup appears but the vanished in seconds.

[Morten Bak]

When using elementorProFrontend.modules.popup.showPopup( { id: 123 } ); make sure you have set your popup visibility rule to include the page/entire page you are triggering it on.

[OldGreg]

This is a really great start to a very concerning issue - elementor doesn't make anything easy to hide the html of a popup until it is invoked. I am trying to only load the popup html when I click a specific button the front end. Do you have any suggesitons on how to load the popup to current page only when a specific button is pressed, not just being present on the page? We want to completely remove the popup HTML from the page and only inject it when a button of a specific class is pressed.