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

easy appointments booking page

Reading Time: 8 minutes

Difficulty: Easy. Might help to know the basics of this tool/topic
Time Required: ~10 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:

booking page in Breakdance

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.

Easy Appointments plugin

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.

Easy Appointments plugin

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.

add location in booking plugin

Repeat for additional locations. In this guide, I've added two. 

add location in booking plugin

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.

add services in booking plugin

In this example, I’ve listed three different services, as shown below.

add services in booking plugin

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.

add employee in booking plugin

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. 

add connections in booking plugin

Here’s what our table looks like with all the details added.

add bulk connections in booking plugin

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.

Easy Appointments plugin settings

You can also tailor the emails and forms for your system. Designate emails for various statuses like Pending, Reservation, Canceled, and Confirmed. 

Easy Appointments plugin settings

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. 

Easy Appointments plugin settings

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:

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.

create booking page in Breakdance

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.

use shortcode to display booking plugin

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:

create booking page in Breakdance

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.

create booking page in Breakdance

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. 

create booking page in Breakdance

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.


Written by Christy Cañete

Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.

Subscribe
Notify of
guest

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments