Start by reading this introduction article on how to make widget customizations. Once you feel comfortable making config code changes, you can continue here.
You're building a marketplace for hair salons who offer 2 different services:
- Haircut and dyeing (1 hour)
- The full monty (2 hours)
Whether you're configuring our widget through our admin (by creating projects) or through code, you'll see that the timeslot duration (
length parameter) only can be set to one value at a time. But if you want to offer your customers a choice like above, how would you achieve that?
Essentially, there're two different approaches:
- Create a separate project per 'service' and configure them appropriately. That will give you 3 different embed codes, one for each project, which you can place on different webpages and link to them.
- Create a single project (or skip that if you're using the 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 widget takes the following config input:
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 widget doesn't offer the customer to make this choice natively, so we need to build that 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.
That's however equally easy to do:
what: '' // To be changed dynamically