Hey everyone!

With the Labour Day holidays coming up, we’d like to let you know about our upcoming working hours:

Thursday, May 1st: Our team will be off during Labour Day.
Friday, May 2nd: We'll also be off for an extended holiday break.

We’ll be back on Monday, May 5th, ready to respond to all messages received during this time.

In the meantime, if you need help, feel free to:

https://www.youtube.com/@AmeliaWordPressBookingPlugin/videos

https://www.youtube.com/@wpDataTables/videos

Thank you for being so understanding, and we hope you enjoy the long weekend! 

Okay
  Public Ticket #2408129
Amelia not working in Elementor Popup
Closed

Comments

  •  3
    Nishant Raj started the conversation

    The Amelia plugin is not working whit Elementor Pro popup.

    I am using [ameliabooking] shortcode in my custom Elementor popup but nothing loads.

    While using the same code in Elementor pages, everything works.

    Please help.

  •   [deleted] replied privately
  • 3nines replied

    Have this been fixed? 

    I want to upgrade to Amelia pro, but I don't know if this issue is fixed because I can't get it to work with Elementor popup. 

    I'm trying to bind this Amelia booking to a button on my site I have and from that to Elementor popup. But it's not working, when I use "[ameliabooking]" on normal page and edit with Elementor it works fine.  

    But nothing shows up when I put "shortcut" inside the Elementor popup.

    Can someone help with this or just give answer?

  • [deleted] replied

    Hello 3nines, 

    There is a conflict between Amelia and Elementor popup, unfortunately. It can work only with some customization. Some JS and CSS code needs to be added to the back-end of WP, and some IDs and classes to the buttons and popups in Elementor (in creating/editing popup/page).

    There isn't a way of changing the code in Amelia in order for this to work, but our developers will see if there is any easier solution to this but for now, some customization needs to be done.

    This is the customization needed:

    You need to add JS and CSS to the WP back-end, so if you don't have a place for that there, you can install the Add Admin JavaScript and Add Admin CSS plugins, and then apply the following:

    CSS:

    .el-select-dropdown, .el-popper {
    z-index: 9999 !important}
    .am-modal {
    z-index: 9999 !important}

    JS

    if (!('ameliaBooking' in window)) {
    window.ameliaBooking = {};
    }
    if (!('disableAutomaticLoading' in window['ameliaBooking'])) {
    window.ameliaBooking.disableAutomaticLoading = true;
    }
    document.addEventListener('DOMContentLoaded', function(event) {
    document.getElementById('ameliaPopUpButton').onclick = function() {
    setTimeout(function () {
    var ameliaPopUpForms = document.getElementsByClassName('amelia-elementor-popup');
    for (var i = 0; i < ameliaPopUpForms.length; i++) {
    window.ameliaBooking.load(ameliaPopUpForms[i], null, {});
    }
    }, 500);
    };
    var ameliaForms = document.getElementsByClassName('amelia-elementor-form');
    for (var i = 0; i < ameliaForms.length; i++) {
    window.ameliaBooking.load(ameliaForms[i], null, {});
    }
    });

    You need to add an ID to the Edit button "ameliaPopUpButton":

    5478581827.png

    Then, you need to enable "Prevent Closing on Overlay":

    4035329291.png

    And then, when you're adding the shortcode in the pop-up, you need to add the class 'amelia-elementor-popup':

    4559165604.png

    If you're adding a shortcode which is not in a pop-up, you need to add the class 'amelia-elementor-form'.