Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 10, 2019 09:34 pm

Create a Booking System With a WordPress Booking Plugin

Final product image
What You'll Be Creating

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.

Configuring Settings

The first step is to configure settings for the plugin.

Go to Bookly > Settings to access the settings screen.

The bookly setting 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, re-order 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.

The Bookly welcome screen

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 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.

Adding a staff member

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.

Adding Services

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:


  1. In the staff member's settings screen, go to the Services tab and add services.

  2. In the settings for the service, select the staff members who provide it.

  3. 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.

The Services screen

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.

Amending text in the booking form

Once you've made all the changes you want to, click the Save button at the bottom of the form to save your changes.

Other Settings

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 then add a Bookly block to it.

Create your page for bookings, then add a new block and select Bookly when choosing the block type. Choose the Bookly - Booking Form block.

adding a Bookly block to a page

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 then click Publish to publish your page.

Now you can view your page to see your booking form in place:

the booking form page with our Bookly booking form

Customers can now use your form to make appointments with your team members.

Managing Appointments

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. So 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 message start 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.

Conclusion

However you manage your appointments, the Bookly Pro plugin has a range of features that you can use to create an effective bookings 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!



Original Link: https://code.tutsplus.com/tutorials/create-a-booking-system-with-a-wordpress-booking-plugin--cms-33196

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code