Your customers book on your website through elements you add in the Website Builder. The Book a service element shows one service with its free times. Visitors pick a date and time, add their details and pay through the same cart and checkout as the webshop.
Add the Book a service element
- Open the page where you want the booking form in the Website Builder.
- Open Elements.
- Drag Book a service onto the page.
- Click the element to open its settings.
- Pick the service under Service.
- Save the page.
- Publish your website.
The booking elements only appear in Elements when Reservations & Bookings is active for your project. Only bookable services made under Services can be picked. Normal shop products go in the Add to cart element.
Other booking elements
- Class timetable: the week of classes with times, teacher, places left and a Book button. In its settings you choose Show the teacher and Show places left.
- Membership table: your membership plans with a billing toggle and an optional comparison table. Under Services you pick which plans appear.
What your visitor sees
- The visitor picks a date and a free time. Times are grouped by morning, afternoon and evening.
- The visitor fills in their details.
- The booking goes into the cart.
- The visitor pays on the checkout page.
- The thank-you page confirms the booking.
The free times come from the resource: its hours, open days, disabled dates, booking rules and capacity. A time slot in a cart is held for a short time so nobody else can take it. See Reservations settings, payments and emails for the hold times and the emails the guest receives.
Checkout pages
Bookings are paid on the cart, checkout and thank-you pages that the Webshop also uses. If these pages do not exist yet, create them once from the settings. See Webshop settings and payments.
Tip: open your published page in a private browser window and make a test booking. You will see exactly what your customers see, including the confirmation email.
Frequently asked questions
Why do I not see the Book a service element?
The booking elements only show when the booking tool is active for the project. Check that the tool is in your product switcher.
The element says the service is not bookable. What now?
Pick an active service that you created under Services in the booking tool. A normal shop product cannot be used in this element.
Why are no times shown on the booking page?
The times come from the resource linked to the service. Check its operating days, hours, disabled dates and Minimum Advance Time.