We're Moving to a New Support Platform – Starting June 1st!

We’re excited to let you know that starting June 1st, we’ll be transitioning to a new support system that will be available directly on our product websites – Amelia, wpDataTables, and Report Builder. In fact, the new support platform is already live for Amelia and wpDataTables, and we encourage you to reach out to us there.

You'll always be able to reach us through a widget in the bottom right corner of each website, where you can ask questions, report issues, or simply get assistance.

While we still do not offer live support, a new advanced, AI-powered assistant, trained on our documentation, use cases, and real conversations with our team, is there to help with basic to intermediate questions in no time.

We're doing our best to make this transition smooth and hassle-free. After June 1st, this current support website will redirect you to the new "Contact Us" pages on our product sites.

Thanks for your continued support and trust – we’re excited to bring you an even better support experience!

Okay
  Print

Home    Articles    Amelia

Popup creation in Amelia

In this article, we will demonstrate how to create a Popup directly in Amelia (it had to be done in Elementor before).

Here are a few steps for a seamless creation of a Popup.

Creating the Trigger

In order to start creating the form in a popup you need to add a trigger. For example, if you’re using Gutenberg, you need to search for the Buttons block and add it to your page:

gutenberg-buttons

Click on the button to edit the text, and then click on the Advanced tab in the right-side menu. In there, define the class for the button (trigger).

button-class

This completes the creation of the trigger. Yes, it’s that simple. Now, you need to add the desired form to the page and add the trigger (class) to the form.

Adding the Form

Now you need to add the form to the page. It doesn’t matter where the form is added since defining it through the builder block, or through the shortcode will hide it until the popup is triggered.

All new Amelia forms work in the popup, so you can choose the form you want from the builder’s menu or you can manually type in the shortcode followed by the trigger, its type, and the command to enable the popup.

In the example above, the trigger is “amelia-popup”, the trigger type is “class”, and the command for the popup is “in_dialog=1” so if you’re manually adding the shortcode for Amelia’s Step-by-Step booking form, it’d be:

[ameliastepbooking trigger=amelia-popup trigger_type=class in_dialog=1]

If you’re using a builder, it’s much simpler than that. Type “Amelia” in the search field of the builder, and select (or drag-and-drop) the form to the page.

In the side-menu that appears, you can define the trigger (amelia-popup), select its type (class), and enable “Show in Amelia Popup”:

define-the-form

You’re done! All you need to do now is publish the page and check out how it works.

Additional Notes

  • As we develop Amelia, all cool new features, like the Amelia Popup will only be developed for the new booking forms so the old forms will not work in the popup.
  • Amelia’s blocks/widgets are currently available only in Gutenberg, Elementor, and Divi, but we will work on adding support for other builders in the future.
  • This section provides you with an example of how the Amelia Popup can be used, but it most definitely is not limited only to Gutenberg, and a button. For example, you can use this on a text block:
hyperlink

As you can see, the hyperlink #thisWorksToo doesn’t really redirect a user anywhere, but simply creates a clickable text that includes the same class “amelia-popup” that triggers the popup.

AmeliaPopup