When using our Booking Widget, you might not want to have your customers fill in all information manually. Perhaps you've already collected their contact information already or might want to lock certain fields to static values that the customers can't change.
Before we get started, you might want to read about how to make code customizations in the widget. Or, feel free to skip ahead and start copy pasting if that's your cup of tea.
What can we do with the input fields?
Customer fields are a flexible and convenient way to collect information from your customers. Per default, there are two fields that are always required in the form:
There are two approaches:
1. Prefill from URL parameters
If you follow a certain format, the widget will automatically fetch values from your URL and inject that into the customer fields. This works with both the hosted page and when embedding on your own website.
To clarify, each of your fields you want to prefill should have their own query string key that is named
customer.[field-slug] . You can find the field slug in our admin panel when you add fields to the form.
If you're embedding the widget in a web application or alike where you have customer information saved in your application state, you can pass it the widget upon initialization through the config.
customer_fields key in the widget config follows the Projects model that is saved through our API. To prefill a
comment field, you should structure your JS object (config) like this:
prefilled: 'Something something darkside'
In practise the values would of course be data from variables and not static strings.
Note that in the above example, we've also locked the name field (read only) so your customers can't change the prefilled value. This is done by setting
locked: true on each field.
Here's a full code example:
// The customer info would most likely come
// from somewhere in your web application
var customerName = 'Marty'
var customerEmail = 'firstname.lastname@example.org'
var customerComment = 'Something something darkside'
// Initialize the widget and inject
// the variables into the config
To learn more about customer fields and the possible customization options, please see the booking.js docs.