booking widget wordpress

How to Add Appointment Booking Widget to WordPress Website

Home > Blog > WordPress tutorials > How to Add Appointment Booking Widget to WordPress Website

How to add an appointment booking widget to WordPress? If you think of a beauty salon, clinic, or any other service business that takes hourly appointments, in this guide we’ll tell you how to set appointments on autopilot on your WordPress site. The MotoPress Appointment Booking plugin for WP will help us embed a booking widget to any website with any WP page builder.

This plugin is crafted by MotoPress, a team that made its name thanks to the successful Hotel Booking plugin that powers hundreds of websites on the net and helps property owners manage their rental businesses online and receive reservations.

That means you are in good hands when it comes to booking widgets, in particular, plugins!

The Appointment Booking WordPress plugin is a premium solution that helps you enable automatic appointments, whether it’s a single small shop/institution or a chain with multiple locations. The plugin is perfect for:

  • Creating a database of the staff members
  • Adding a list of bookable services and assigning employees to them
  • Setting up flexible working schedules and appointment durations
  • Adding a WordPress booking widget to a website
  • Accepting and registering incoming bookings automatically
  • Keeping all records on bookings, clients, employees and earnings in one dashboard in WordPress
  • Showcasing employees, services, etc. on the site in a preferable way.

If you are looking for a ready-made theme exclusively integrated with this WordPress scheduler plugin, check out this niche-specific collection of the WP booking themes.

In this tutorial, I’ll use the Medmix theme that is perfect for doctor scheduling sites and clinics.

So let’s take you through the steps of adding appointment booking features to your WordPress website.

Install the Appointment Booking plugin WordPress and configure the settings

First, you need to install and activate the plugin as you would normally do with any other one. It will add the Appointments menu, where all the general settings are located.

This will be your starting point. In the general settings of the booking widget, you can set up:

  • A default time step for setting appointment durations depending on a service, e.g. set 5m if you have appointments that last 45m.
  • Choose a currency to display the correct symbol next to the service price stated on the site
  • Set up email notifications.

add booking to wordpress settings

Speaking of email notifications, you’ll be able to customize admin and client notifications, apply some brand identity and all the information you want clients to get.

For example, the location, date, and time of the appointment:

appointment email

You can also send ‘cancel appointment’ emails on a client request. All in all, there are 5 types of email templates:

emails

You can also change email styles, colors, backgrounds, etc.

email styles

Add unlimited staff members

The WordPress Appointment plugin by MotoPress makes it easy to add employee profiles and build working schedules.

employees

In addition to the text bio and photo, you can include specific contact or social media information by filling in dedicated fields. The latter are most useful if you plan to feature staff profiles publicly on the site.

employee information

Otherwise, clients will only see the names when booking an appointment.

editing profile

In my Medmix theme, there are also pre-made directories listing doctor profiles – they are built manually with Elementor:

doctor profile

But if you use the plugin with any other theme, the former will give you several ways to output the list of employees automatically, using information sourced from the plugin.

Add departments, salons, clinics, or other locations where you operate

The benefit of the WordPress reservation system we’re using is that you can employ it for a multi-chain business.

Locations can be also divided into subcategories so that you can have a department location and a clinic category. This way prospects will be able to choose a clinic and even an exact department. Or, for example, you can have city locations and clinic categories.

locations

Schedule working hours of your staff

The plugin allows you to build a flexible working day for each employee as well as assign duties to them.

schedule

To personalize a staff member timetable, you are free to designate:

  • Normal working day in hours
  • Lunchtime and breaks
  • Optionally change a location depending on a weekday
  • Add days off.
staff timetable

You are free to choose multiple periods for days off – and customize them at any time:

day off

To make slight changes to the regular working day, you can add a custom working day schedule:

working days

That’s it – the process is pretty clear and you can get to the needed menus any time.

Add services you provide

It shouldn’t take a lot of time to add, categorize and customize services, which categories function as search filters and facilitate the search process for clients.

Services are obligatory in the appointment booking widget WordPress, but you can also output them on the page to inform clients about your offerings:

departments

  • Price
  • Duration
  • Buffer times​ before and after the appointment to help employees prepare for the appointment
  • Assign staff members to the services.
service settings

When choosing the staff members, you can also set different tiered rates (price and duration) depending on who performs the service:

eligible employees

Once all the settings are added, you are free to add a booking widget to your WP site.

Add a booking widget to your site

There are many shortcodes that help you easily add plugin-related content to the page. To make the process of adding them more user-friendly, the plugin offers a specific shortcode generator, which means to personalize a shortcode, you need to just click the buttons to designate your preferences.

shortcodes list

To add a shortcode that will give you an appointment booking and scheduling website widget, you need to create an appointment form shortcode. Then, you can simply paste it to the needed page or widget zone.

shortcode settings

When it comes to the WordPress booking widget, here is what you can do:

  • Designate form filters you want to be displayed in the booking wizard (e.g. if there is just one clinic, you can simply offer clients to choose a service)
  • Optionally change form labels
  • Designate what default must be displayed
  • Tweak CSS or HTML if needed.

Once done, click Publish to generate the shortcode:

shortcode booking feature wordpress

But this is not the only way to customize the shortcode!

Since the MotoPress Appointment Booking plugin supports all popular editors, including the native WordPress block editor, Elementor and Divi, you can easily add a shortcode visually in a no matter WP template for bookings you use.

elementor widgets elementor

Now, let’s add an appointment booking widget in Elementor:

editing booking widget

So here is our booking widget/wizard:

appointment form wordpress filters

One the next step, clients need to choose the date and time and then confirm a booking:

date and time

On the final step, clients provide their personal details to submit a booking:

client details booking

The reservation is submitted:

reservation details

You can also optionally enable online payments via PayPal, Stripe and other gateways:

appointment payments

You can check your bookings in the Bookings menu.

The details are customizable – you can change the booking status and edit client info:

booking details

So far you can confirm bookings manually and the clients can pay after arrival or via a direct bank transfer. In the next updates of our WordPress appointment booking plugin, the payment gateways will be released allowing you to enable clients to pay you online.

Optionally add other widgets to the site

As you might have noticed, there are a lot of widgets related to the booking plugin that you can add to the other site pages, e.g., an employees list, locations list, services list, employee schedule, etc.

For example:

    • Services list

medmix services list

    • Employees profile

medmix employyes list

And there are a lot more elements you can add:

employee profile

You may customize the default output further or use default styles from your theme.

You can go with different shortcode combinations to build the needed page, or if you’re aware with CSS, make further adjustments. From our experience, the easiest way to make your content look great without effort or technical knowledge is to use a WordPress theme that is optimized for the booking plugin from scratch.

Conclusion: How to add appointment booking widget to WordPress website with MotoPress?

As you see, the WordPress appointment booking plugin is optimized for really quick and easy appointments, while the plugin system remains quite flexible allowing you to make any changes in the employee schedule, services, or the booking widget. Ready to add smooth booking features to your WordPress site?

Install the WordPress Appointment Booking plugin by MotoPress.

View Appointment Booking Demo.

FAQ

Can I use the MotoPress Appointment Booking plugin with any theme?

Definitely. If you are on the block editor, Elementor or Divi, it’s going to be super easy to work with it since you’ll be able to visually add and edit widgets. In other themes, the plugin will also work but using shortcodes.

For what kind of appointments can I use this booking plugin?

For any hourly bookings: doctor schedules, class bookings, clinics, salons, and other related niches.

How does the appointment scheduling for WordPress work?

You need to install an appointment scheduler and reservation plugin, configure the settings and then add a booking widget to your WordPress site. Even beginners will find it easy.

Was this article helpful?

Yes No

You have already left your review.

Leave a Reply

Your email address will not be published. Required fields are marked *