Adding an appointment booking calendar in Elementor is a question of a WordPress reservation plugin you use.
In this tutorial, we’ll tell you how to link an appointment booking calendar using the dedicated WP scheduler plugin by MotoPress.
This plugin is a go-to solution for any appointment and service-focused businesses. It helps you operate your services, employees and their schedules, and add a real-time service & time booking widget to your WordPress site.
Also read how this plugin works for different businesses:
Linking an appointment booking calendar in Elementor will help you with the appointment widget customization in the visual editor. Since the WordPress MotoPress Appointment Booking plugin has a dedicated Elementor widget that won’t be a hassle.
What WordPress plugins you need to make it work
Two WordPress plugins need to be installed and activated:
- Elementor (free or pro)
- MotoPres Appointment Booking
You don’t need any extra specific plugins to bridge the two, needless to say. Once both are operating on your WordPress site, just start editing your regular page in Elementor.
How to link an appointment booking calendar in Elementor
Adding a booking calendar to your WP site is actually the final step. For the calendar to work properly for your clients, the plugin system must be pre-configured.
To add a booking calendar / widget in the Elementor interface, you first need to make sure that you’ve added all the needed content via the MotoPress Booking plugin and configured the essential settings.
- Your staff members
- Staff working hours
- Locations (if needed)
- Services and their settings
- General settings setup
- Email notification templates setup.
This is the most time-consuming process, the rest of the work is much easier.
Once you are all set up, go to the page where you want to add a booking calendar > open Elementor > scroll down the widgets panel to find Appointment Booking integrated widgets > choose the needed widget.
A calendar-associated one is the Appointment form widget. Once you add it to the page, you can see many settings in the widget toolkit you can customize to achieve the needed widget look:
For example, you can:
- Show or hide a service category, location and employee
- Customize field labels
- Set defaults for the widgets.
Once your client has chosen their preferences, they can choose the date and time in the booking calendar:
And they go through the next steps to submit a booking:
That’s it! You’ve linked a booking calendar to your Elementor-based site. As you see, there are different Elementor widgets attached to the Appointment Booking plugin, not just the calendar.
For example, you can also create a list of your team members, services list, employee schedules and more. Each of them will have their own list of settings.
For example, for your employee list, you can decide to show a person avatar, contact info, name, etc. as well as choose the exact people you want to showcase:
It’s also easy to add a list of services and optimally customize its content and styling:
It’s worth noting that the MotoPress WordPress Appointment Booking calendar plugin works for the Gutenberg block editor in a similar way, allowing you to customize the calendar–related blocks in the native WordPress interface.
As you see, adding an appointment scheduling and reservation booking calendar in Elementor is not a difficult task but rather a matter of a few button clicks. Of course, you need to make sure that all the plugin content is added before you can display it in the booking widget and allow your clients to book a free slot for their appointment. The drag-and-drop Elementor tools will make it as easy as possible to link an appointment calendar to WordPress.