If you run any sort of business that involves appointments or meetings with clients or between staff members, then your life will be made much simpler if you enable bookings on your website.
This doesn't just apply to meetings—hotels, spas and other leisure businesses can also benefit from using online bookings. Allowing people to book online will encourage more bookings, give your customers more control, and free up your time.
In this tutorial, I'll show you how to use a plugin to add bookings to your website.
I'm going to imagine my site is for a real estate agent, and add agents and appointment types accordingly. But the steps I follow should apply with some tweaks to whatever kind of business you're running.
I'll be using the Bookly Pro plugin for this tutorial, which is one of the premium booking plugins on CodeCanyon. I've chosen this plugin because it has a wide range of features, and even some add-ons should you need more. It's also compatible with Gutenberg, so it will let you use blocks to add your booking form to your site.
There is a free version of this plugin available in the WordPress plugin directory with fewer features; I've chosen to use the premium version so I can add unlimited staff members and Google Calendar integration.
Installing and Activating the Plugin
The first step is to install and activate the plugin. When you download the plugin and unpack the zip file, you'll find two more zip files inside it. The one you need to upload to the plugins screen in your admin is called bookly-addon-pro.zip.
Installing the plugin will install two plugins to your site: the core (free) Bookly plugin and the add-on plugin with the premium features.
The first step is to configure settings for the plugin.
Go to Bookly > Settings to access the settings screen.
The main settings screen is concerned with timings for bookings and the settings for cancellation and booking. Work through these, setting them up as you want them to run for your business. It's sensible to find a balance between what will make your customers happy and what your staff can work around, especially when it comes to things like the notice period for cancellations.
Work through the other settings screens, editing these as necessary:
- URL Settings: Here you can add links to the screens customers and staff will see after appointments are rejected, approved, or cancelled. To do this, you'll need to create those pages in your site and then add the link to them in the relevant fields. Bookly provides blocks you can use to populate these screens.
- Calendar: Add, reorder or delete fields in the calendar that will be visible to customers and staff. A full list of fields is provided.
- Company: Add your company details and logo.
- Customers: Use this screen to define what data will be collected for customers and what type of account will be created on your site when a customer signs up for an appointment. Customers will then be able to log in to book additional appointments in future, or to see information about their appointment.
- Google Calendar: Use this screen to connect your appointment booking system to your company's Google calendar. This will enable syncing between appointment bookings and your staff members' calendars, helping them to keep track of what they've got booked in. You'll need to set up a project in the Google Developer's console: follow the instructions on the settings screen in Bookly to do this.
- WooCommerce: If customers pay for appointments, you can create an appointment product and link it to the booking system here.
- Facebook: To allow customers to sign in with Facebook, you'll need to set up Facebook integration using the instructions on this screen.
- Payments: Configure the currency you accept and integration with PayPal.
- Business Hours: Configure the hours your business is open and that people can book appointments within. It's important to do this before you start taking appointments, so that people don't book outside your operating hours. You can also configure hours for staff members in their individual screens.
- Holidays: Use the calendar to set dates during which the business can't take appointments. If individual staff members have different holidays, you set this via their screens.
- Purchase Code: Add your purchase code here when you buy the plugin, so you can install updates.
Once you've configured the plugin settings, it's time to start adding staff.
Adding Staff Members
The next step is to add staff members.
You can access this either by clicking Bookly in your admin menu and clicking the Add Staff Members button, or by going to Bookly > Staff Members in the admin menu.
This takes you to the Staff Members screen. Add a new staff member by clicking the icon at the top right of the (currently empty) list of staff members. If you want, you can add categories for staff members, which you can later use to make certain appointment types available for certain staff categories.
When adding users, you can either select them from existing users of your site or add them. People don't have to be users of your site to be set up as staff members in Bookly, but if you do give them a WordPress account, they can then log in to manage their staff profile and things like holidays.
Once you've added a staff member, you can add a photo, contact information, and Google calendar sync (which we'll come to shortly). Make sure to add an email address at the very least, so that the staff member is notified when an appointment's made for them.
You can also list the number of hours the individual has available for appointments each day, if this is different from their working hours.
Once you've added your staff member, scroll down and click Save. Each staff member also has a tab for the services they provide, their schedule, and their days off. Configure these so you know appointments won't be booked for staff members at the wrong times.
Once you've added all your staff members to the system, it's time to add services. Services allow customers to choose the appointment type they need.
Here you provide more information about the service, set its price, and define how long it takes.
There are three ways to define which services are provided by which staff:
- In the staff member's settings screen, go to the Services tab and add services.
- In the settings for the service, select the staff members who provide it.
- In the settings for the service, select the category of staff members who provide it.
Which of these works for you will depend on the nature of your business. In my real estate agency, valuations are provided by Valuers and viewings are provided by Viewings Agents, so I'll use the categories method when setting up my services.
Configuring the Appearance of the Booking Form
One of my favorite features of Bookly is the way you can edit almost every aspect of the booking form and preview it before you publish it on your site. To do this, go to Bookly > Appearance.
Here you can edit the fields in the various sections of the form, and you can also change the color. I'm going to amend the color and make a few tweaks to the text.
To amend the text, click on the underlined text and type what you want to replace it with. Then click the tick to save it.
Once you've made all the changes you want to, click the Save button at the bottom of the form to save your changes.
The Bookly Pro plugin is a complex plugin with lots of additional settings I haven't needed to use for my site. Here's an overview of some that you might need to use:
- Email notifications: edit the content of the email notifications sent to staff and customers by the system.
- SMS notifications: if you want to send out SMS notifications, you can sign up to the Bookly SMS service here. There is a charge for this, so beware of adding this if you offer a virtual service to customers around the world.
- Add-ons: Use this screen to install add-ons and add extra features such as custom fields and group bookings.
There are also a number of screens for managing your bookings, which we'll explore shortly.
Publishing Your Booking Form
Once you're happy with the look of your form, it's time to publish it to your site. To do this, you create a page and then add a Bookly block to it.
Create your page for bookings, and then add a new block and select Bookly when choosing the block type. Choose the Bookly - Booking Form block.
In the block settings, you can configure default values for category, service, and staff member, and specify which fields you want to include. Configure this how you want it, and then click Publish to publish your page.
Now you can view your page to see your booking form in place:
Customers can now use your form to make appointments with your team members.
Once you've got your booking form set up on your site, it's important to be able to manage appointments.
Bookly gives you a number of screens to do this:
- Calendar: Shows you the appointments for all team members in brief.
- Appointments: Gives you a list of appointments with more information such as the customer details and the services booked. You can export this screen to CSV or print it.
- Customers: Here you can see contact details for your customers as well as information about the appointments they've booked.
- Payments: Track payments related to appointments and see who they've come from and what service they relate to.
- Messages: View any messages sent by the system.
The way you use these screens will depend on the way you manage your business. For example, in my real estate agency, I might print off a list of last week's and this week's appointments before each team meeting so I can get progress updates on appointments that have taken place and plan for appointments still to come. An individual team member might access their own calendar each day to check their appointments, and everyone will be able to see messages that the system has sent them. These will also be sent by email as long as you add staff email addresses.
And, of course, with Google calendar integration, my staff members can view their appointments in their calendar alongside other events.
However you manage your appointments, the Bookly Pro plugin has a range of features that you can use to create an effective booking system. You can use it for meetings that you don't charge for or those that you do, you can categorize your services and your staff members, and there are powerful options for customizing availability and calendar sync that will help you integrate the booking system in the way you run your business.
Try installing this plugin to your site and save yourself time making appointments over the phone or by email!
- WordPress PluginsChoose the Best WordPress Event Calendar PluginsNona Blackman
- WordPressHow to Create a Google Calendar Plugin for WordPressAshraff Hathibelagal
- WordPress20+ Best WordPress Booking and Reservation PluginsFranc Lucas
- WordPressGet Started With a Free Booking Calendar Plugin in WordPressSajal Soni
- WordPressHow to Add a Calendar to Your WordPress Site With the Events Schedule PluginJessica Thornsby
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post