Create an Amelia booking popup

Amelia booking forms can be opened in a popup from a WoodMart button, link, icon, or another clickable element. WoodMart provides compatible styling, while the booking form, trigger, services, and availability are configured in Amelia.

Prepare Amelia

Before adding the popup, create at least one service category and service in Amelia. Configure the service duration, price, and availability required for your booking workflow.

Configure an employee or provider and assign the required services and working hours. The available provider options depend on your Amelia plan.

Use an Amelia popup button

Current Amelia versions provide dedicated popup button blocks and widgets for the Step-by-Step Booking and Events List forms in Gutenberg and Elementor. If the required popup button is available in your editor, add it to the page, configure its text and booking parameters, and publish the page. Amelia will handle the trigger automatically.

Use the manual method below when you want to open the form from an existing WoodMart element, use another Amelia form, or work with WPBakery.

Create a manual popup trigger

1. Add the button, link, or icon that should open the booking form.

2. Assign a unique CSS class to the element. This example uses amelia-popup.

• Elementor: open the element’s Advanced tab and enter the class under CSS Classes.
• Gutenberg: open the block’s Advanced settings and enter the class under Additional CSS class(es).
• WPBakery: enter the class in the element’s Extra class name field.

Add the booking form

1. Add the Amelia booking form to the same page as the trigger. Use an Amelia block or widget in Gutenberg and Elementor, or insert the form shortcode in WPBakery.

2. In the booking form settings, open Load booking form manually, enter amelia-popup as the trigger, select Class as the trigger type, and enable Show in Amelia Popup.

For a shortcode-based setup, add:

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

The trigger value must exactly match the CSS class assigned to the button. Amelia hides the form until a visitor activates the trigger.

Test the popup

Publish or update the page, open it on the frontend, and click the trigger. Confirm that the popup opens, the expected services are available, and customers can complete every booking step.

Customize the booking form

Navigate to Dashboard -> Amelia -> Customize and open Step-by-step. Configure the layout, colors, typography, labels, fields, and individual booking steps, then publish the form settings.

For plugin-specific configuration, see the official Amelia guides for booking popups, service categories, and Step-by-Step form customization.