Hello Helgi Skaftason Skjortnes,

Thank you for your purchase and apologies for replying late, we don't work on weekends.

Unfortunately, there is some conflict between Elementor Pop-Up and Amelia. There is some customization that needs to be done in order for Amelia to work in these popups. And the JS bellow sometimes needs to be changed as well, that can depend on the shortcode you use , number of popups you have, etc.

You need to add some jS and CSS to the back-end, so if you don't have a place for that in your WP, 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":

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

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

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

Let me know if this helped or if you have any further questions. 

If you want to add these type of shortcodes you need to add the IDs in the JS code as well. Please look at the attachment, there is an example with 4 shortcodes, some IDs, so you will find the switch statement here in the JS and for each ID you need to add one case. I added two cases in this code for IDs 1 and 2. So, please replace the JS code with this one:

if(!('ameliaBooking'in window)) {
  window.ameliaBooking={};}if(!('disableAutomaticLoading'in window['ameliaBooking'])) {
  window.ameliaBooking.disableAutomaticLoading=true;}document.addEventListener('DOMContentLoaded', function(event) {
  function ameliaBookingLoading (buttonId, index) {
    var ameliaPopUpLoaded = false;    var ameliaBookingButtonLoadInterval = setInterval(
      function () {
        var ameliaPopUpButton = document.getElementById(buttonId);
        if (!ameliaPopUpLoaded && ameliaPopUpButton !== null && typeof ameliaPopUpButton !== 'undefined') {
          ameliaPopUpLoaded = true;
          clearInterval(ameliaBookingButtonLoadInterval);
          ameliaPopUpButton.onclick = function() {
            var ameliaBookingFormLoadInterval = setInterval(
              function () {
                  var ameliaPopUpForms = document.getElementsByClassName('amelia-elementor-popup');
                  if (ameliaPopUpForms.length) {
                    clearInterval(ameliaBookingFormLoadInterval);
                    for (var i = 0; i < ameliaPopUpForms.length; i++) {
                      switch (index) {
                        case (1):
                          window.ameliaBooking.load(ameliaPopUpForms[i], null, {service: 1});
                          break;
                        case (2):
                          window.ameliaBooking.load(ameliaPopUpForms[i], null, {service: 2});
                          break;
                        
                      }
                                          }
                  }
                },
              1000
            );
          };
        }
      },
      1000
    );
  }
  ameliaBookingLoading('ameliaPopUpButton', 1);
  ameliaBookingLoading('ameliaPopUpButton2', 2);
  ameliaBookingLoading('ameliaPopUpButton3', 3);
  ameliaBookingLoading('ameliaPopUpButton4', 4);
  var ameliaForms = document.getElementsByClassName('amelia-elementor-form');
  for (var i = 0; i < ameliaForms.length; i++) {
    window.ameliaBooking.load(ameliaForms[i], null, {});  }});

And for each button you add for a popup you need to have a separate button ID, this part of the code is for that:

ameliaBookingLoading('ameliaPopUpButton', 1);
  ameliaBookingLoading('ameliaPopUpButton2', 2);
  ameliaBookingLoading('ameliaPopUpButton3', 3);
  ameliaBookingLoading('ameliaPopUpButton4', 4);

So, this is an example with 4 buttons, and if you have more buttons you would need to add here 5, 6, 7, etc...

Let me know if this helped.

I also wonder, can I restrict one e-mail / customer to only be allowed to buy a trial class once?

Hello Dou.

This is a 3.5-year-old ticket, so it is no longer relevant.

Please make sure to update Amelia to the latest version (7.3), clear the cache, and test again.

If you face any issues with Amelia and Elementor, please open a new ticket and we'll gladly assist.

Hello Sebastien.

All Amelia forms offer this possibility but if there are multiple employees or locations assigned to the service, they will be offered before the date/time selection.

In that case, you would need to predefine those as well. For example:

[ameliastepbooking service=1 employee=1 location=1]

It depends on your setup.