Create A Booking Page With Breakdance Using Easy Appointments Plugin
For businesses, having a good booking system is essential to streamline operations and maximize appointment opportunities. This guide will help you how to set up an online appointment system using Easy Appointments and Breakdance.
Christy Cañete
Updated October 1, 2023
easy appointments booking page
Reading Time: 8 minutes
Imagine running a business, like a salon, a dental clinic, or a consulting firm. And you have a team of professionals offering different services, different rates, and different time slots.
Managing online appointments can seem overwhelming.
Plus, it becomes even more complicated if your business operates in multiple locations.
How do you make your website handle each booking smoothly and set everything to run automatically?
Here’s the good news. With Breakdance and the right plugin, the entire booking process can be made simpler.
In this guide, I’ll show you how easy it is to create a booking page in Breakdance using the Easy Appointments plugin.
By the end of this tutorial, you'll have a functional booking page on your website, as shown below:
Why Use Easy Appointments?
There are a lot of appointment plugins available for WordPress. But I personally recommend Easy Appointments because of its robust features and ease of use.
Plus, you can already do a lot of things with the free version. These are some of its best features that I find helpful:
- It supports multiple services, locations, and workers. Whether you're a solo entrepreneur or manage a team, it's got you covered.
- It’s super easy to set up. Even if you’re not tech-savvy, you can have a booking page up in no time.
- It has an intuitive calendar so that you can easily manage availability.
- It allows easy customizations to match your brand.
If you want more advanced functionalities, there’s also an extension package available for purchase. These features include integration with Google Calendar, iCalendar, Twilio SMS, WooCommerce, OmnicomSMS, and PayPal.
But if you're just starting out or have simple booking needs, I would say the free version should suffice.
What is a Shortcode?
For our purposes, we'll use a shortcode to display the booking form on our website's front-end.
A shortcode is a code snippet, enclosed in square brackets, that you can add to your posts or pages. Normally, developers add complex code or scripts to add features or extend the functionality of their websites. However, this can be a challenge for users with little to no coding experience.
So instead, you use this small text tag, and WordPress automatically executes the complete code assigned to it. Think of it like a shortcut.
By adding a shortcode, you can make the booking form work anywhere on your site. For me, it's a straightforward and efficient way to add dynamic content.
Here are some of the benefits of using shortcodes:
- It allows you to add complex functions without the technical knowledge.
- It allows you to insert dynamic content on your posts or pages.
- It’s time-saving; you can quickly implement features without the need for repetitive tasks.
- When the source of the shortcode is updated, the changes reflect everywhere it’s used.
There are several ways you can add shortcodes to your site. The most traditional method is to add them to your theme files. The easiest way is through plugins.
But thankfully, Breakdance provides a shortcode block you can readily access on the editor. Just drag and drop the element into your page. Then, paste the shortcode of the booking form here. That’s it!
How to Create a Booking Page in Breakdance
1) Install Easy Appointments
From your dashboard, go to the left sidebar and click Plugins > Add New. Type in ‘Easy Appointments Plugin’ in the search bar. Once found, click install and activate.
2) Configure the Plugin
Once activated, you should see a new menu item ‘Easy Appointments’ on the left-hand side of your WordPress dashboard. Click on it to access the plugin's settings and configuration options.
Tip: Make sure you install the right plugin since there are several ones with similar names.
From here, you can set up the locations, services, workers, and other settings to meet your requirements.
In this guide, we’re going to create a booking page for a Digital Marketing Agency.
a) Let’s say your business operates in multiple locations. You can give your clients the option to book at any available spot.
To add a location, navigate to Easy Appointments > Locations and click ‘Add Location.’ In the pop-up, enter the name, address, and location details, then save.
Repeat for additional locations. In this guide, I've added two.
Tip: You can also skip adding the address if your business is purely online. Instead, you can just provide the store or service name and leave the address blank.
b) Next, add the services you’re offering. In the pop-up, fill in details like service name, duration in minutes, the slot step, and so on. Then, click save.
In this example, I’ve listed three different services, as shown below.
c) It's time to add your team members or employees. In the pop-up, provide their name, a brief description, email, and phone number. Save after entering each member.
d) The next step is to add connections.
Connections define which team member provides which service at which location and at what times.
Under the connections tab, you have two methods:
- Bulk addition, which is handy if many team members offer identical services at the same time slots.
- Single connection for more specific setups.
For this guide, let’s add the connections in bulk. Then, in the pop-up window, enter the details like the locations, services, worker names, slots, and schedule. Once you’re done, click save.
Here’s what our table looks like with all the details added.
e) Adjust the plugin settings to fine-tune your booking system. Under the general tab, you can manage busy slots, set a maximum appointment count, and handle auto-reservations.
You can also tailor the emails and forms for your system. Designate emails for various statuses like Pending, Reservation, Canceled, and Confirmed.
Tip: Use the tags provided below the email editor to personalize your emails. For instance, #service_name in the template will display the actual service the client selected.
f) To ensure everything is running smoothly, send a test email. Navigate to the tools tab and input an email address to test.
3) Create a Booking Page
I’m going to assume that you’ve already created your header, footer, and page template in Breakdance.
If not, check out our other tutorials to learn how to create these templates:
- Create A Page Header in Breakdance Builder
- Create A Page Footer Using Breakdance Builder
- Breakdance Builder – Getting Started Guide
Let’s go ahead and create a booking page. On your WordPress dashboard, go to Pages > Add new.
Enter a page title, then save and publish. Open your booking page on the Breakdance editor.
Add any elements you want to include to your page. We’ll keep our page simple in this tutorial. Let’s add a heading for the title. Change the font color, size, and style as you see fit.
Finally, add a shortcode block. This is where you’re going to paste a shortcode for the appointment booking form.
You can use any of the following codes:
- Use this to display a basic one-column form:
[ea_bootstrap]
- Use this to display a two-column form:
[ea_bootstrap width="800px" scroll_off="true" layout_cols="2"]
For this guide, we’re going to use the shortcode for the two-column form.
4) Save and Preview
Once you’re satisfied with the appearance of your page, click save and preview it on the front-end.
Here’s what our final booking page looks like:
Note: Every time you get an appointment, you’ll receive a notification email. The appointment also auto-populates in the designated worker's schedule. To see this, navigate to Reports NEW > Time table.
Remember, new bookings are labeled as 'pending' by default. You'll need to switch the status to 'confirmed' manually. Once done, the individual who made the booking will get a confirmation email.
And That’s It!
Time is precious in business. And having a good booking system saves time, making it easy for clients to book without calling or emailing.
With Breakdance and Easy Appointments, you can easily create a booking page without coding.
Now, as you level up, consider exploring Breakdance’s advanced features to further enhance your site’s user experience.
For instance, you can experiment with multi-step forms. Read our tutorial Creating a Multi-Step Form in Breakdance to learn how to collect user data in an organized way.
Have questions or insights? We’d love to hear from you and we’re always eager to learn from your experiences.
Want to Learn Even More?
If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.