Skip to main content

Adding the Bookings Button to Your Website

Discover how to easily add a 'Book Now' button to your Durable website, allowing customers to effortlessly schedule appointments directly from your site.

Written by Mark

Discover how to easily add a Book now button to your Durable website, allowing customers to effortlessly schedule appointments directly from your site. Learn how to manage its visibility and customize its label to best suit your business needs.

When to Use the Booking Button

Use the booking button to allow customers to easily schedule services directly from your website without back-and-forth communication.

This is especially helpful for:

  • Service-based businesses offering appointments

  • Businesses that want to automate scheduling

  • Improving customer convenience and conversion rates

The booking button works best when it is visible across your site so customers can access it anytime.

Add the Booking Widget

When you enable the booking feature in Durable, a floating Book now button automatically appears on your website, providing a seamless scheduling experience for your customers.

You can manage the settings for this booking widget and other booking-related features in two ways:

  • From your Durable dashboard, click Bookings in the left-hand navigation menu.

  • From the website editor, click the calendar icon in the top right control bar.

Both options will open the Bookings panel, where you can configure your booking widget and services.

Managing Your Floating Book Now Widget

Once you've enabled bookings, you can customize the floating 'Book now' button that appears on your website. Access these settings from the Bookings panel (either by clicking Bookings in the left sidebar or the calendar icon in the website editor's top control bar).

Within the Bookings panel, you'll find the following options:

  • Show booking widget on your website: Use the toggle to hide or display the floating Book now button on your site.

  • Settings: Click here to manage your overall booking schedule, visibility, and integrations. For more details, see Configure Booking Settings: Schedule, Visibility, and Integrations.

  • Widget text: Customize the label of your floating Book now button. By default, it says "Book now." You can change this to something like Schedule a Call, "Book an Appointment," or "Claim 50% Off" to better suit your marketing or local language. The button label updates in real-time as you type. Click Done to save your changes.

  • Services: Click here to add, remove, or update the individual services available for booking. For more details, see Creating and Customizing Booking Services.

Floating Book now button on a Durable website


Configuring Booking Links for Other Website Buttons

In addition to the floating Book now widget, you can also set any other button on your website (e.g., in your header, Call to Action sections, or other content blocks) to link directly to your booking services. This allows you to integrate booking calls to action throughout your site.

To set an existing button's link type to Booking:

  1. Navigate to the section containing the button you wish to edit.

  2. Click the edit icon on the button.

  3. In the Call to Action modal, under Link Type, select the Booking tab.

  4. You will see a message: Visitors can book appointments from this button. Click Settings to configure your booking services if needed.

  5. Update the Button label (e.g., Schedule, Book Now).

  6. Click Done to save your changes.

Customer Booking Experience

Here's what your customers will experience when they use the 'Book now' button on your website:

  1. Pick a Service: After clicking the Book now button, a Pick a service modal will appear. Customers will see a list of your available services, including their duration and price. They select their desired service and click Continue.

  2. Pick a Time: Next, a Pick a time calendar will display your available dates and time slots based on the weekly schedule you configured. Customers can navigate through months and select a suitable time. Once a time is chosen, they click Continue.

  3. Share Details: Finally, the Share details form will appear. Customers will fill in their personal information (First name, Last name, Email address, optional Phone number, and Address) and answer any custom questions you've set up (e.g., selecting an option for a custom question you've set up like 'Preferred Service Time').

  4. Confirm Booking: After reviewing their details, the customer clicks Confirm Booking.

  5. Confirmation: A "You're all set! Booking Confirmed!" message will appear, summarizing their scheduled service, date, time, location, and total cost. A confirmation email will also be sent to their provided email address.

Best Practices

  • Keep your services clearly named and easy to understand

  • Ensure your availability is accurate and up to date

  • Add helpful descriptions or custom questions when needed

  • Test the booking flow from a customer's perspective

By customizing your booking button and managing your services effectively, you can provide a smooth and efficient scheduling experience for your customers. Remember to regularly check your availability and service descriptions to keep everything up-to-date.

What's next?

Did this answer your question?