As previously announced via banners and our newsletters, support is no longer available through this platform.

For easier navigation, you can still click on "Submit a Ticket" here, choose the appropriate category, and you'll be redirected to the correct support channel for your plugin.

You can still access your previous tickets and browse public tickets, but please note that responding to tickets is no longer possible.

Paid customers: Please log in to your store account for support.

Pre-purchase questions: Use the support widget in the bottom-right corner of our websites:
https://wpamelia.com
https://wpdatatables.com
https://wpreportbuilder.com

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'.