Add the Widget to a Page
An Appointment Booking Widget can be added to any Block or Page in the Builder by selecting the widget from the Widget Menu, clicking on the Booking icon and dragging it to the desired location on the page within the builder as shown below:
Once you have added the widget, a popup will appear where you update the settings and styling of the widget and link it to the existing Booking Events set up under Appointments in the Builder menu.
Select the relevant Booking Event in the drop-down menu and start updating to your preferred settings:
💡 You have the option to create a new booking event or edit an existing booking event from within the popup.
Booking Layout Options
There are a few different layout options to choose from when setting up your booking page, click on Change Booking Layout to view the different options:
Branding & Styling
Fonts and Colours that are set up on your Global Styling will be added by default, to update the styling of your Booking widget, select the Header and General Fonts from the drop-down menus and then navigate to Step Settings, Summary Styling and Form Styling > Change to update the colours and other styling options as shown below:
Booking Step Labels
To update the Step Labels of your Booking page, navigate to Step Settings > Edit Step Labels to rename them as shown below:
Hiding the Google Meet or Zoom Link
When setting up your Booking Event, your Google Meet or Zoom link would have been added to the event. By default this link will be visible on the Booking form, however, it is recommended that the link should only be displayed on the booking confirmation page and confirmation email:
To hide this link from the Booking page, head over to Booking Settings > Summary Styling > Untick the Show the event location on the summary screen as shown below:
Add the Booking Contact as a Member or Subscriber to Your Website
Once you have updated the styling of your booking widget, you are able to enable the option to create a new Member Profile, connect the relevant Contact List and add a Tag to be added to the contact after booking the event as shown below:
Tag to be added to the contact after booking the event as shown below: