Start by reading this introduction article on how to make booking widget customizations. Once you feel comfortable making config code changes, you can continue here.

Typical use-case

You're building a marketplace for hair salons that offers 2 different services:

Haircut and dyeing (1 hour)
The full monty (2 hours)

Whether you're configuring our booking widget through our admin (by creating a project) or through code, you'll see that the timeslot duration (length parameter) only can be set to one value at a time. Do how do we offer your customers a choice like the example above?

There're two different approaches:

Create a separate project per 'service' and configure them appropriately. That will give you 2 different embed codes, one for each project, which you can then place on different webpages and link to them.
Create a single project (or skip that if you're using the Booking Widget through code) and then dynamically configure the timeslot length based on a choice the customer makes.

In this tutorial, we'll look at how to go about option 2

Dynamic timeslot duration

The booking widget takes the following config input:

availability: {
  length: '1 hour' // To be changed dynamically
}

This can be set dynamically when you're initializing the widget, based on an output from elsewhere on your website/webapp.

The Booking Widget doesn't offer the customer a choice natively, so we need to build this part ourselves.

Here's an example of how it could look like:

Take a look at the source code to see how we can achieve this with some simple jQuery. You can of course also use a frontend framework like React, Vue or Angular - it's up to you.

Other dynamic configurations

What is not included in the example above is dynamically changing the title of the booking to fit to either "Haircut and dyeing" or "The full monty" depending on the customer's choice.

This is equally easy to do:

booking: {
  what: ''   // To be changed dynamically
}