Spring Deals Are in Full Bloom
How do I use the Amelia popup
The Amelia popup lets you open booking forms in a modal window without redirecting customers to a separate booking page.
Supported builders such as Gutenberg, Elementor, and Divi 5 include native popup button widgets for the Step-by-Step Booking and Events List forms. Other Amelia forms and builders can still use the manual popup setup described below.
How do native popup buttons work?
Amelia popup buttons are available in Gutenberg, Elementor, and Divi 5 builders. These native builder widgets let you add a button that opens an Amelia booking form in a popup without manually configuring trigger classes or custom links.
You can currently use:
- Amelia – Booking Button for the Step-by-Step Booking form.
- Amelia – Events List Button for the Events List form.
The button text can be fully customized, and the button itself can be styled using your page builder’s native styling options.
Popup buttons also support the Preselect booking parameters option, allowing you to preselect:
- Categories
- Services
- Employees
- Locations
- Events
- And other supported booking parameters
If no booking parameters are preselected, the popup opens the default booking view and displays all available items.
To configure a popup button:
- Add the popup button widget to the page.
- Customize the button text.
- Optionally configure Preselect booking parameters.
- Style the button using the builder styling options.
When visitors click the button, the selected Amelia booking form opens in a popup modal.
How does the manual Amelia popup work?
The manual approach allows you to use the popup with all Amelia forms and it can be triggered by buttons, text links, icons, or any element that supports adding a class name. The popup is built into Amelia, so it does not require external plugins or additional purchases.
Once the trigger is clicked, the booking form appears in a modal window and closes when the customer completes or exits the flow.
How do I create a manual popup trigger?
Add any clickable element to your page and assign a custom CSS class that Amelia will use as the trigger.
For example, in Gutenberg you can insert a Buttons block, edit its label, and then open the Advanced panel to set a custom class such as amelia-popup. This class name will later be referenced by the form.
How do I manually connect a form to a popup trigger?
Place the booking form anywhere on the page by using Amelia’s builder widgets or by adding the shortcode manually. Amelia hides the form automatically when defined as a popup, and shows it only when the trigger is clicked. If you are typing the shortcode manually, add the following attributes:
trigger="your-class" trigger_type="class" in_dialog="1"
For example, to load the basic, unfiltered Step-by-step booking form with the trigger class amelia-popup:
[ameliastepbooking trigger="amelia-popup" trigger_type="class" in_dialog="1"]
If you are using a supported builder (Gutenberg, Elementor, or Divi), insert the form widget, enable Show in Amelia popup, and enter the trigger and trigger type in the side menu.
Can I trigger the popup with text links or icons?
Yes, any HTML element that can contain a class attribute can trigger the popup. For example, you can create a simple hyperlink and assign the same trigger class. The href value can be a placeholder, because the action comes from the class itself and not the link target.
Which forms and builders support native popup buttons?
Native popup button widgets are currently available only for the:
- Step-by-Step Booking form
- Events List form
These native popup widgets are supported in:
- Gutenberg
- Elementor
- Divi 5
All other Amelia booking forms and page builders currently require the manual popup setup using shortcode triggers and trigger classes.
What should I keep in mind when configuring Amelia popups?
- Native popup button widgets are currently available only for the Step-by-Step Booking and Events List forms.
- Native popup buttons are supported in Gutenberg, Elementor, and Divi 5.
- All other Amelia forms and builders require the manual popup setup using trigger classes and shortcode attributes.
- Manual popup triggers work with any element that supports adding a CSS class.
- The booking form shortcode can be placed anywhere on the page.
- Always match the trigger class between the button, link, or trigger element and the form shortcode.
- The
in_dialog="1"shortcode attribute is required for manual popup setups. - If no booking parameters are preselected, the popup opens the default booking view showing all available items.