How to Add the Search Booking Form to Your Website

You have several possibilities to show your services on your website by choosing which Amelia booking shortcode you want to insert:

• Front-end Booking Search
• Front-end Booking Catalog
• Step-By-Step Booking Wizard

In order to add one of the booking forms to your website, you will need to add Amelia shortcode to one (or more) of your website’s pages. Below you will find instructions on how to add Amelia shortcode using different page builders: Gutenberg, Elementor, and Classic editor.

If you use another page builder or cannot find the shortcode button you can use the following shortcodes for adding the Search booking form:

• [ameliasearch] if you want to show the basic search view,
• [ameliasearch today=1] if you want to show the search view with a preselected current date

and if you have Packages (pro or elite Amelia license) you can choose whether you will show only services or only packages with these two shortcodes:

• [ameliasearch show=services] if you have Packages enabled, but you only want to show services in the form,
• [ameliasearch show=packages] if you have Packages enabled, and you only want to show packages in the form.

Just put the shortcode on the page and “Publish” or “Update” it. You will find all the shortcodes available for Amelia on the Amelia Shortcodes page.

Gutenberg Blocks

First go to WP Pages, choose “Add New” and in the top right corner or below the page title you will see the “+” (“Add Block”) option. Once you click on this option you will have the option to choose Amelia or you can write Amelia in the Search block.

When you click on one of the options for displaying the booking form, the shortcode will appear in the block. When you choose Amelia – Search view, in the menu on the right side, you will see an option to enable “Preselect Current Date” if you want to show the booking form for Today only. If you have Packages (Elite or Pro Amelia license) you will have an option Show All to choose whether you want to show only services, only packages, or both.

If you choose something in these fields you will notice that the shortcode is automatically changed.

When you finish preparing your Amelia shortcode, click on the “Publish” button to save your changes and publish the page.

Elementor Page Builder

When you open Elementor Page Builder editor on your website where you have the Amelia plugin installed and set up, you will be able to search for Amelia or to scroll until you get to the Amelia blocks inside the Elementor interface as shown on the image below.

When you choose the desired block, drag-and-drop it to the page. After that, if Amelia – Search view is chosen, in the left side menu you will see some additional options. There is an option to enable “Preselect Current Date” if you want to show the booking form for Today only, and if you have Packages (Elite or Pro Amelia license) you will have an option Show All to choose whether you want to show only services, only packages, or both.

After you are finished do not forget to click PUBLISH to publish your page.

Classic Editor

When you go to “Pages” in the WordPress admin panel, and then on the “Add New” button, you will see the Amelia insert shortcode button in the editor.

After you click on it, the Amelia booking widget will open and you will be able to select the view. When you choose Amelia – Search view, in the menu on the right side, you will see an option to enable “Preselect Current Date” if you want to show the booking form for Today only. If you have Packages (Elite or Pro Amelia license) you will have an option Show All to choose whether you want to show only services, only packages, or both. After you choose the shortcode you want, click “OK“, and “Publish” your page.

Search Booking View on Front-end

You can use the “Front-end Booking Search” view when you want to give your customers the possibility to search for appointments by selecting several filters so that they could find the best time slots and services for their needs.

There are five filters they can use to find an appropriate time slot:

1. Date – This filter is required and other filters cannot be used until the date is selected.
2. Time Range – This gives the option to select a time range preferred for the appointment.
3. Services – This gives the option to select one or more services for which customers want to see in available appointments.
4. Location – Gives the option to select the desired location.
5. Employee – Offers customers to select the employee.

Your customers can select as many filters they need, just remember that it is required to select a date first. By default, the page will be empty until some filter is selected. If you don’t want that, you can check the option “Preselect Current Date” in the Amelia shortcode builder after you choose the Search view. In that way, your Search page will always show available appointments for the current day.

After they select the date, they will immediately see the initial results, and by choosing any other additional filter these results will be narrowed down in real-time. After they are done filtering, they can search on the list for a specific appointment by their name, and sort those results by “Ascending” and “Descending” name, and “Ascending” and “Descending” price.

When they have found an appointment, by clicking on the “Book” button they will be offered different options depending on the service:

1. “Bringing anyone with you?” – If the service allows group appointments, your customers will see this option with a drop-down to select the number of persons. Capacity for a group appointment can be defined on the back-end of your service dialog and separately for every employee.
2. “Select the Extra” – If the service has extras, your customers will see this option with a checkbox beside each one and once they check extra the quantity option will enable them to choose how many extras they want.

Once they choose these two and click “Next” they will see available time slots for the appointment. Also note that if your service doesn’t have the possibility for a group appointment and doesn’t have extras, after clicking on the “Book” button they will see time slots right away.

After they choose a time slot and click “Book”, a booking widget will appear with three sections of data:

1. A section with customer’s information – On the left side customers will be required to enter their first and last name, and email, while entering a phone number is optional. Customers will also be able to choose between different Payment Methods, depending on the chosen ones in the Payment Setting on the back-end of the plugin.
2. A section with appointment information – Customers will see which employee, date, and time they have chosen. If they’ve made a mistake, they can go back on the “Cancel” button before confirming the booking.
3. A section with pricing calculation – Customers will see the price of the appointment, the price of a chosen extra, and the total cost that will depend on the number of persons in the booking. The total cost can be decreased using a coupon you’ve configured on the Finance page of your back-end.

After they click “Confirm”, they have an option to add this appointment to their calendar if they wish, but they can also close the window, as the booking is already finished at this point. Note that if you enable the “PayPal” payment method before adding the appointment to the calendar your customers will be redirected to PayPal to log in and confirm the payment.