We are happy to announce B12 now offers an online feature, which can be added and configured within the B12 Editor! 🎉  

  • Adding Online Scheduling 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 visitors on your website and increase the likelihood they will make an appointment with you.

  • Once your website is live, visitors to your website can schedule 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) Connect your calendar (if available), 2) Set your availability, 3) Add appointment types and 4) Add the scheduling page or appointment field to your contact form. All of these steps will be completed by the end of this article.

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

 

Connect your calendar

(This option is only available to customers on the Standard plan or above)

  • Click Appointments

Set your availability

  • Click Get Started

  • You may have placeholder availability set, which needs to be removed.

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

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! Here are instructions for connecting and synchronizing your calendar to our Online Scheduling.

Add appointment types

Click on Appointment types

There are 3 appointment types available by default.

Add an appointment type or edit an existing appointment type.

Expand Advanced settings to customize your preferences further.

Add your online scheduling 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 website visitors can schedule 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 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

  • Select Appointment type from the dropdown to associate it with the appropriate appointment type.

  • And that is it! You will now see this field on your Contact Form.

  • 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 schedule 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 B12 editor.

To add a Booking page: 

Log in to the B12 editor (or return to the pages list on the 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 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 editor.

Did this answer your question?