19 March 2013
Category:
Blog
Comments: Comments Off on Build an amazing appointments website

Build an amazing appointments website

Setting up an appointment management solution on your website can be fiddly, not to mention expensive. Take the hassle out of scheduling bookings and manage them yourself – all within your WordPress site – with WPMU DEV’s Appointments+ plugin. It will save you a fortune – and it’s easy peasy to set up.

Appointments+ is perfect for any individual, business or group that needs to schedule time, such as:

  • Doctors
  • Tutors
  • Personal Trainers
  • Spas and salons
  • Photographers
  • Hairdressers
  • Consultants and life coaches
  • Web designers
  • Tradespeople, such as plumbers and electricians
  • Reservations for sports fields, tennis courts etc

It’s also packed with more than 30 custom appointment features that rival even the most sophisticated booking platforms:

  • Allows customers the option to book their own appointments online
  • Schedule appointments with clients
  • Enjoy a built-in CRM for managing customer contact information
  • Collect payments or deposits using PayPal
  • Manage your entire team, create unlimited service providers and unlimited services
  • Send confirmation and reminder emails to increase customer attendance rates
  • Allows you and your clients to book appointments up to one year in advance
  • Manage all appointments right from Google calendar
  • Compatible with BuddyPress
  • Short codes for inserting into posts/pages
  • Display weekly, or monthly schedules
  • Integrates with WPMU DEV Membership and Marketpress plugins
  • Enter phone appointments manually

In this tutorial I’m going to create an appointments website where scruffy-haired visitors can jump online to book a time to have their hair cut and styled at my salon, Curl Up and Dye.

1. Install the Appointments+ Plugin

You download Appointments+ here.

2. Plan

Plan out your services, staff and working hours
It’s a good idea to plan out your services, staff and working hours before you get started.

Before you start clicking buttons, you need to know what your want your appointments site to do.

Firstly, what kind of services does your business provide? Curl Up and Dye offers some of the best hair cuts going around at incredible prices.

Secondly, you need to know who is working at your business. I’ve got cool cats snipping at my salon.

Thirdly, what are your working hours? When is your staff rostered to work?

3. Services

Let’s get on with the fun stuff. Go to Appointments > Settings > Services.

For each of the services you jotted down earlier, click Add New Service and enter its details. Leave the description page field set to none for now. We’ll come back to that later.

4. Service providers

Now we need to fill in the details for all my wonderful staff members. But before we can do that, we need to add each of our workers to the website, so click on Users > Add New and for each person fill in their details and click Add New User.

Once you’ve done that, go to Appointments > Settings > Service Providers.

For each of your staff members, click Add New Service Provider and enter their details like so:

For each of your employees fill in the services they provide.
For each of your employees fill in the services they provide.

Leave the bio page fields set to none for now. We’ll sort that out later.

5. Business Hours

Fill in the working hours for your business or working hours for each of your staff members.
Fill in the working hours for your business or working hours for each of your staff members.

Fill in the working hours for your business or working hours for each of your staff members.

A fantastic feature of Appointments+ is the ability to set not just your usual business hours, but the working hours for each of your staff members. You can even specify when they’re on a break. This is great for my stylist Dana who is a single mom and works three days a week.

Go to Appointments > Settings > Working Hours.

As we planned out, enter your workers’ shifts and don’t forget to give them breaks.

Click Save Working Hours when you’re done.

6. Exceptions

You can specify your workers' days off or swapped shifts.
You can specify your workers’ days off.

You can specify your workers’ days off or swapped shifts.

Sometimes your salon might close for public holidays or your workers might need to take a day off if they’ve got a vacation coming up, or they might even want to work an extra shift.

To account for Inara’s upcoming day off to meet with one of her companion clients and the Saturday she wants to work instead, click on Appointments > Settings > Exceptions.

In the drop down box select her name and under Exceptional NON working days select the date she wants off.

Save your exceptions when you’re done.

7. Time Base

Set how long your appointments go for.
You can set how long each of your appointments last for.

Now let’s get stuck into the fiddly bits. Go to Appointments > Settings > General > Time Settings.

You can set the time in minutes for your appointments. I’m going to set mine to 60 minutes. There are also options to enter your own length of time if one of the presets doesn’t suit and block how soon and how far in advance clients can make a booking.

8. Create an Appointments Page

You can automatically create a page where clients can make an appointment on your site.
You can automatically create a page where clients can make an appointment on your site.

You will need a page on your site where clients can make their appointment. In Appointments > Settings > General > Display Settings you can automatically create an appointments page. Magic!

While you’re here, you can also select a preset color scheme for your appointments calendar so clients can see when times are available, or set your own color scheme.

9. Client Login

You may or may not want your clients to login to your site when they make an appointment, depending on your business.

I want clients to be able to drop by the website and make a booking with no fuss.

Go to Appointments > Settings > General > Accessibility Settings and select “No” under Login Required.

10. Payment

If you want clients to pay a deposit or full price when they make a booking, it’s not hard to set up.

Go to Appointments > Settings > General > Payment Settings and select “Yes”. I’m going to leave this setting as “No” because I don’t want to charge clients until they arrive at my salon for their haircut.

11. Email Notifications

You can set notifications settings so clients receive email confirmations and a reminder for their appointments.
You can set notifications settings so clients receive email confirmations and a reminder for their appointments.

When you have approved a client’s appointment for a buzz cut you can automatically send them a confirmation email.

Go to Appointments > Settings > General > Notifications and select “Yes” next to Send Confirmation.

There is even a further option to send reminders to forgetful clients.

When you’re done fixing your site’s settings, click on Save Settings.

12. Shortcodes

There are some handy shortcodes you can use on your site to do things like list your services, list staff and list a client’s appointments.

To check out the codes, go to Appointments > Settings > Shortcodes.

13. Create Services Pages

Remember when I said earlier we would worry about the description pages for our services later? Later is now.

Create a new page for each of your services and turn this:

It's easy to quickly create pages for each of your services.
It’s easy to quickly create pages for each of your services.

Into this:

Services pages provide clients with information about your perms, buzz cuts, comb overs and mullets.
Services pages provide clients with information about your perms, buzz cuts, comb overs and mullets.

After you’ve created each page for your services, don’t forget to head back to Appointments > Settings > Services and select the appropriate page in each of the description page fields.

14. Create a Staff Page

Now we need to do the same for our staff.

Create a new page for each of your staff members. You can even add a photo by uploading a Featured Image.

And here’s what it will look like on your site:

Your clients will love our stylist Dana's precision cutting after years wielding a scalpel at morgues across America.
Your clients will love our stylist Dana’s precision cutting after years wielding a scalpel at morgues across America.

15. Appointments

You can manually enter appointments made in person or over the phone, which is handy when Mulder phones in with his regular appointments with Dana.
You can manually enter appointments made in person or over the phone, which is handy when Mulder phones in with his regular appointments with Dana.

Now that you’re all done setting up your appointments site, you can start taking bookings.

New appointments will appear in Appointments > Appointments.

If a client calls to book a buzz cut with Dana over the phone, you can manually add an appointment. Click Add New and fill in the details.

16. Transactions

If you have selected to accept payments from clients when they make an appointment, they will be listed in Appointments > Transactions.

You can sit back and watch the money roll in. Any pending transactions you need to action will be listed here.

17. Google Calendar

One of the great things about Appointments+ is that admin and clients can save any appointment directly to their Google Calendar, and it’s super easy to set up.

There are two ways to go about it. When clients make an appointment on your site they can tick the Google Calendar option before they confirm their booking.

Or, if you want to fully integrate Google Calendar with your site you can enter API credentials in your settings to allow appointment edits made from Google Calendar to update on your site.

To do this, go to Appointments > Settings > Google Calendar and under Google Calendar API Settings look for instructions and click the little blue button.

Click the blue button to reveal instructions for how to integrate Google Calendar. You know you want to.
Click the blue button to reveal instructions for how to integrate Google Calendar. You know you want to.

I admit, when I first opened the list I felt a little overwhelmed, but if you follow each step carefully you’ll have Google Calendar integration working in no time. Rather than re-invent the wheel with a guide on how to set it up, check out this handy video:

And That’s That!

You should now have a fully functioning appointments site.

If you have any problems, go to Appointments > Settings > FAQ to find out more or turn on the helpful FAQ pop-ups.

Photo: DafneCholet via Compfight cc.

Related posts:

  1. You’re gonna love our new Appointments + plugin Manage appointments, take bookings and look after your businesses calendar…
  2. Build Amazing HTML Email Campaigns With WordPress Using HTML Templates with WordPress to create Mailing Lists…
  3. 12 Amazing Plugins that Take WordPress beyond a Website A few weeks ago I looked at some of the…

Comments are closed.