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