Skip to main content

Add Bookings to your website

Set up appointment services and availability, then add booking controls to your website.

M
Written by Mark

Start by setting up your appointment services and availability in Bookings, in the left sidebar of your Durable account. Once those are ready, use the website editor to show the floating Book now widget or add buttons that open your booking flow.
​

Set up services and availability

  1. In your Durable account, select Bookings in the left sidebar.

  2. If this is your first setup, choose Set up booking.

  3. Choose your time zone and weekly availability. Enable the days you work, enter start and end times, and add another time block for a split day.

  4. Create the services customers can book, including their durations, prices, locations, and relevant questions.

Add Bookings to your website

Open your website in the editor, then select Add-ons in the upper-left corner, beside the page selector, and choose Bookings. Enabling Bookings adds a floating Book now widget to your website. Use the controls in this panel to display or hide the widget and change its label.
​

Use a booking button when customers need to schedule an appointment with your business. It lets them choose a service and an available time without back-and-forth messages. Alongside the floating widget, you can add booking links to buttons in your navigation, call-to-action sections, and other page content.
​

Manage the floating Book now widget

From the Bookings panel, you can:

  • Use Show booking widget on your website to display or hide the floating button.

  • Open Settings to manage hours, team members, visibility, and your Google Calendar connection. See Configure Booking Settings: Hours, Visibility, and Google Calendar and Managing Bookings and Google Calendar Integration to control when customers can book and prevent appointments from overlapping busy time in Google Calendar.

  • Change Widget text to use a label that suits your business or language, such as Schedule a call or Book an appointment. The default label is Book now, and it updates as you type. Click Done to save the change.

  • Open Services to add, remove, or update what customers can book. For service prices, durations, locations, team assignments, and optional add-ons, follow Creating and Customizing Booking Services.

Link a page button to Bookings

You can also open Bookings from a button in your navigation, a call-to-action section, or other page content. Customers who click it enter the same booking flow as those who use the floating widget.
​

Ask Dru

Select the button or the section where you want it, then tell Dru what you need. For example: “Make this button open Bookings and change its label to Book a consultation.” You can also ask Dru to add a booking button to the selected section. Check the result in Preview.
​

Edit the button by hand

  1. Select the button or the section containing it.

  2. Choose Edit manually beside the input in the Dru panel on the right and open the button's settings.

  3. Under Where it goes, choose Your booking page.

  4. Update the button label, such as Book now or Schedule a call.

  5. Click Done.

This changes the page button, not the floating widget. For other button settings, see Add buttons and set link destinations. For navigation buttons, see Edit navigation and the footer.
​

Customer booking experience

Here's what customers see when they click your Book now widget or another button linked to Bookings. The available steps depend on the service's add-ons, team, and payment settings.

  1. Pick a service: Customers see your available services, including their duration and price. They choose a service and click Continue.

  2. Pick add-ons: If the service offers optional extras, customers can select them before continuing. Their selections update the total price and, when an add-on includes extra time, the appointment duration. They can continue without selecting an add-on.

  3. Pick a time: The calendar shows available dates and time slots based on your schedule. If Customers pick a person is enabled, customers choose Anyone or a team member under With. Choosing a person shows that person's available times. If the setting is off, the booking is assigned automatically based on availability. Customers choose a time and click Continue.

  4. Share details: Customers enter their first name, last name, and email address. They may also need to provide a phone number, address, or answers to custom questions you added to the service.

  5. Confirm or pay: If no payment step is required, customers review their details and click Confirm Booking. If the service requires a deposit, full prepayment, or payment details for a later charge, they complete the payment step before confirmation. The payment screen shows the applicable amount and cancellation terms. With online payments turned off, or when you use Invoice after, no payment details are collected at booking.

  6. Confirmation: Customers see the booking confirmation with their service, date, time, location, and amount. A confirmation email is sent to the address they provided.

For the payment steps in detail, see Customer Experience: Booking and Paying for Services.
​

Test the booking experience

  • Keep service names clear and descriptions helpful.

  • Check each service's price, duration, add-ons, and team members.

  • Make sure your availability is accurate and up to date.

  • Test both the floating widget and any page buttons linked to Bookings.

  • Complete a test booking to check the customer questions, payment requirements, and confirmation.

What's next

Related website editor articles

Did this answer your question?