Once you've created your services and staff members, it's time to open up for visitors to be able to book appointments on your website. Visitors enter the appointment booking flow by clicking on a Scheduling button that you can insert anywhere on your website, also in the header and footer.
To insert a Scheduling button on your website, hover on any existing module or column and click the '+' or select Add module from the dropdown.
In the Add module overlay, select Scheduling from the left-side menu and click the Scheduling button module.
Button content
Start by adding a text on your button. You can also add a concise title tag if you wish. Using a title tag provides more context about your website and can help improve search engine visibility. Additionally, most web browsers display the title tag on mouseover to allow visitors to see where the link will take them before they click on it.
Finally, you can add an icon next to the text on your button by selecting one from the list.
Button design
Apart from aligning your button left, right or center within the column you can also set the button to float, adjust the width, and determine the margin.
- Float: use this feature for wrapping text around your button. You can float the button to the left or the right. Floating multiple elements will align them side by side.
- Width: instead of having the button's size dependent on its content, it's possible to define a fixed width for it. The percentage is related to the width of the column where the button is inserted; this means a button width of 25% occupies exactly a quarter of its column.
- Margin: adjust the amount of spacing outside of the button.
Adjustments after adding float to a button
When adding float to your button it's recommended to set some margin on the right or left depending on the float direction. Add margin to the bottom to push the wrapped element away from the floated element.
Example of float:
Click More local design options for additional styling options. You can, among others, set background color, border and text in various states. For more information on styling, read our dedicated guide here.
Fixed position button
If you want a Scheduling button to pin on the visitor's screen and stay there as they scroll up and down a page, you can toggle Fixed position in Design > Button > General. Read more about fixed position buttons here.
Button settings
Under Services, you can determine whether you want all your services to be available for booking when visitors click the button, or if you only want to display some of your services. If you only want to show certain services, untoggle Use all services and click in the Select services field to add specific services.
Under Staff and bookable resources, you can determine if you want visitors to be able to book any of the staff members that you have associated with the selected services, or if you only want some of the them to be available for booking. If you only want to show certain staff members, untoggle Use all resources and click in the Select resources field to add specific staff members.
Add multiple Scheduling buttons to your website
As you're able to customize the Scheduling button and filter out certain services and staff members from the booking flow, you can have multiple Scheduling buttons on your website and adjust them to fit in the context. For example, if you have dedicated pages for each of your staff members, you could add a Scheduling button to each page and set it to only be able to book services from the staff member that the page is about.Toggle Select resources automatically if you want the system to automatically match an available staff or resource with the service and time when a customer is making a booking. This effectively means that visitors will not be asked to select a specific staff member to perform the service during the booking flow.
Under Tracking, It's possible to track how many times visitors have clicked the button. Give your button a name for tracking purposes and write it in the field Custom tracking name. The data will feed into the statistics overview on your dashboard under Custom Actions. Read more about Visitor Statistics here.