We are happy to announce B12 now offers a booking feature, which can be added and configured within the website editor! 🎉  

  • Adding Bookings directly to your website can be quick and easy, and something worth considering to allow your customers the ease and efficiency of scheduling an appointment directly on your page. When you integrate scheduling directly into your website, you keep customers on your website and increase the likelihood they will make an appointment with you.
  • Once your website is live, visitors to your website can book an appointment by filling out the form and selecting an available time slot via your Bookings page.
  • You, and your visitor who fills out the form, will both receive email confirmations. The appointment will also be displayed in the availability calendar view.
  • If you offer a single service for a single team member with no payments to be made, this feature is perfect for you! Keep reading to learn how to add this feature.
  • However, at this time, if you would like customers to be able to book multiple services, to book with multiple team members, or to make payments, follow these instructions to get set up with Calendly. 

We will need to 1) Set your availability and 2) Add the bookings page or appointment field to your contact form. Both of these steps will be completed by the end of this article.

To start, log in to the website editor. If you are having trouble logging in, you can follow these instructions

 

1) To set your availability:

  • Click Appointments
  • Click Get Started
  • You have placeholder availability set right now, which we need to remove.
  • Click anywhere within the current availability (outlined in orange) to remove it.
  • Click Remove.

 

  • Select Delete all future repeat availabilities.
  • Click Yes, delete availability
  • Note: To change your availability in the future, follow this same process.
  • Click Done when you finish inputting your availability
  • You will now see your availability. 
  • Click Home if this is the correct availability to return to your pages list.

If you made a mistake or need to change the availability, you can delete your availability in the same process as the placeholder availability above. For a recurring availability, ensure you Delete all future repeat availabilities

If this error shows when you input your updated availability:

 

  • Go through the calendar a few weeks into the future to make sure all availabilities are deleted. 
  • If this error persists, email hello@b12.io with questions.

Now that you have your availability set, you’re almost there!

2) To add your Bookings page or appointment field:

In this case, you have two options. If you already have a pre-existing contact form on your B12 website, you can simply update that form with a field so customers can book an appointment. Alternatively, you can add a separate page to your website. You will find both options below. 

To add an appointment field to a contact form:

Find your contact form in the website editor. (If you want to add a Contact Form page or section, follow these instructions.)

  • Click Form Details (Contact Form)
  • Click Add fields
  • Click Appointment
  • And that is it! You will now see this field on your Contact Form.
  • If you click Select a date and time… you will be able to see the Availability you set.
  • Ensure you click the purple Publish button so your live website reflects this change.

And you all are set! Your customers will now be able to book appointments with you on your B12 website! 

Important Notes: 

  • To edit your availability: Your availability must first be deleted and then recreated. Follow the instructions for 1) Setting your availability in the beginning of this article. 
  • To edit an appointment: When an appointment is rescheduled, the contact form must be filled out again.
  • To cancel an appointment: Appointments can be cancelled from the link in the confirmation email, as well as from the availability calendar view.
  • We automatically create a Cancel Appointment page when you set your availability. Do not edit this page, as it can lead to errors in the website editor.

To add a Booking page: 

Log in to the website editor (or return to the pages list on the website editor). 

  • Click Add page 
  • Type book into the search bar
  • Click Book Appointment
  • You have now added a Booking page!
  • Click Book Appointment Contact Form if you need to adjust the information in the Contact Form 
  • You can update or add fields to make sure you get all the information you need from customers.
  • Click Back when you finish making this change. 
  • Your Booking page is now fully configured for your customers. 
  • Click Back to return to the pages list.
  • When you add your availability, we automatically add an Appointment Cancellation page. Do not edit this page, as it can lead to errors in the website editor.
  • You can see that page here: 
  • Click Appointment Cancellation
  • This is the page your customers will see when they click the cancellation link from the email. 
  • Click Header
  • Click Add navigation link
  • Update the link fields to add this page to your navigation.
  • Text: Book an Appointment
  • Link type: Page or section
  • Links to: Book Appointment
  • Select either Button or Link
  • Click the Back arrow when you are done adding this link.
  • Ensure you click the purple Publish button so your live website reflects this change.

And you are all set! Your customers will now be able to book appointments with you on your B12 website! 

Important Notes: 

  • To edit your availability: Your availability must first be deleted and then recreated. Follow the instructions for 1) Setting your availability in the beginning of this article. 
  • To edit an appointment: When an appointment is rescheduled, the contact form must be filled out again.
  • To cancel an appointment: Appointments can be cancelled from the link in the confirmation email, as well as from the availability calendar view.
  • We automatically create a Cancel Appointment page when you set your availability. Do not edit this page, as it can lead to errors in the website editor.
Did this answer your question?