Trends

How To Add an Appointment Calendar and Booking System to WordPress

Booked is a powerful plugin that allows you to easily add a responsive and beautifully designed appointment and booking system to your WordPress site.

Websites are at their best when they help to make your life easier. Whether you’re the site’s owner or a visitor, that convenience is much appreciated (and, these days, expected).

Booked is a WordPress plugin that has been designed to make life easier for everyone. It takes something complicated (online appointment systems) and simplifies it.

icon_wordpress.fwThis tutorial has been published in conjunction with our ‘Turn Your WordPress Site Into a Business‘ event. Throughout this week, we’ll be publishing free tutorials and offering heavily discounted WordPress plugins that will help you grow and run your business like a pro.

And, while the plugin’s UI is straightforward with clear explanations of what each option does, you still get the flexibility to customize the appointment system to fit your needs.

For small business owners, investing in an old-school appointment system just won’t cut it. When you think about it, those older systems take a bit of convenience away from your customers.

Booked includes the ability for users to:

  • Register and edit their profile using the front end of your site
  • Manage their appointments
  • Add appointments to their Google Calendar
  • Use the system on their mobile device, as Booked outputs responsive code (your website will need to be mobile-friendly, as well)

Business owners have their own set of powerful features:

  • Approve appointment requests automatically or manually
  • Create Default Time Slots when you will be available for booking each day of the week
  • Custom Time Slots are additions to your default schedule that will show dates you will be closed, on vacation, etc.
  • Send out customized emails
  • Force customers to register before booking an appointment or allow guest bookings
  • Add custom fields to the booking process to get the exact information you need from customers
  • An easy-to-use color system that will let you customize the look of the calendar to match your site
  • Shortcodes that allow for easily displaying the calendar and related functions on the front end of the site.

Let’s take a look at the process of installing Booked, setting up a calendar and review the experience of booking/approving an appointment.

Getting Started with Booked

As you will probably know, installing a plugin inside WordPress is a breeze. The easiest method is to take the zip file you’ve downloaded and upload it via Plugins > Add New > Upload Plugin in the WordPress Dashboard. Once the plugin is installed, be sure to Activate it.

Now that you’ve installed & activated the plugin, you’ll see a new menu item created inside WordPress called Appointments.

Before we head into the plugin’s settings, it’s a good idea to think about how you’ll want to use Booked on your site. Specifically, will you want to require users to register in order to book an appointment? If the answer is yes, then you’ll want to ensure the following:

  1. Inside WordPress, go to Settings > General and ensure that, in the Membership setting,  “Anyone Can Register” is checked.
  2. Next, let’s create a Profile Page for users. This is where users can login to edit their appointments and account information. Go to Pages > Add New and create a new page. You can title it anything you like, but for our example let’s go with “Customer Profile“.

Now, we can head over to Appointments > Settings to start configuring our appointment system.

General Settings

This is where we’ll setup the basics. Fortunately, each item on this screen has a detailed description of its purpose.

Among the more interesting options are:

  • Booking Type – Whether to require user registration or allow guest registrations.
  • Instant Profile Page – Choose a page where the user’s profile can be edited. In our demo, we’ll select “Customer Profile” from the drop down box.
  • Time Slot Interval – The amount time you’ll set aside for an appointment. For example, you may set things up so that you can see an appointment every hour.
  • Appointment Buffer – Time allotted between appointments.
  • Cancellation Buffer – The amount of time before an appointment can no longer be cancelled.
  • New Appointment Default – Choose whether new appointments are automatically approved.
  • Front-End Color Settings – Choose a color scheme for your calendar.

For our demo, I’m going to require users to register and use a 1 hour time slot interval.

Email Notifications

Booked gives us the ability to customize the emails users receive when registering for the site, upon appointment confirmation and approval.

You’re able to upload a custom logo and use special tokens to personalize the content of the email. If you don’t want users to receive a particular email message, just delete its contents in the settings and it won’t be sent.

There is also a settings screen for Admin Emails. You can select which WordPress user will receive notification messages and further customize those emails.

Custom Fields

Adding custom fields to the appointment registration process is a great way to receive all of the customer’s information you require. Setup is quite easy as well.

The plugin will allow for custom Single Line Text, Paragraph Text, Checkboxes, Radio Buttons and Drop Down inputs. You can even make each custom field Required if you like.

Default/Custom Time Slots

In this area, we’ll setup our availability for each day of the week. Using the Time Slot Interval and Appointment Buffer settings we selected earlier, the Default Time Slots will take those settings into account.

You can select your Start/End Times, and how many Time Slots you’ll need for each time period. There is also a handy bulk-add function.

*Think of a Time Slot as the time allotted for just one appointment.

Custom Time Slots are a great way to show variations in your default schedule. You can set days or date ranges that coincide with holidays, vacations or other special days.

The plugin will also allow you to turn off appointment bookings for these dates via a checkbox.

Booking/Approving an Appointment

Our calendar is now setup and ready to use! With the Shortcodes portion of the Appointment Settings as our guide, let’s place the calendar on a new WordPress page called “Appointment Calendar“.

On the front end of the website, the calendar will show available dates in bold. When you hover your cursor over an open date, you’ll see a tooltip that shows how many time slots are available for that day.

To start the booking process, simply click on your desired date and then click the Book Appointment button next to the time slot you want.

From there, you’ll see a dialog box that will let you either register or login. Any custom fields you’ve setup will also be displayed here. Once registered, you’ll be taken to your Profile page. The customer will receive an email with their password and appointment details.

On the admin side of things, there’s now a message in your inbox to let you know that there is a pending appointment that needs approval. Logging into the WordPress dashboard will also alert you of the appointment.

Click on the link provided (or just visit Appointments > Pending) and you’ll be able to approve or delete the appointment request.

Upon approval, the customer will receive a message stating that their appointment is approved. It will also appear in the Appointments > Appointments menu inside the dashboard.

Overall Impressions

I found that Booked certainly delivered on its promise to simplify setting up an appointment booking system with WordPress. The plugin looks and functions quite well on both the admin and user side of the equation. It is very easy to setup and contains enough powerful features to satisfy most small business owner’s needs.

Those interested in taking appointments online need look no further than Booked.

Are you using Booked? Share your experiences in the comments section below!


About the Author Eric Karkovack

Eric Karkovack is a web designer with well over a decade of experience. You can visit his business site here. In July 2013, Eric released his first eBook: Your Guide to Becoming a Freelance Web Designer. You can follow his rants on Twitter @karks88.