All Collections
Technical Documentation
The enterprise booking widget
Rendering the enterprise booking widget with a configuration
Rendering the enterprise booking widget with a configuration

Send details to the widget to have it load with a pre-selected account or with the customer details pre-filled.

Jubrine Fortuno avatar
Written by Jubrine Fortuno
Updated over a week ago

Find further details of the enterprise widget here. The enterprise booking widget cannot be created at app.appointedd.com so is currently only available through account management. If you would like to use the enterprise widget, get in touch through the support messenger. 

-------------------------------------------------------------------------------------------------------------------------

You can pass predefined configurations into the widget when it is rendered. This can allow you to skip steps, for example pre-setting a store and skipping the map step.  

You can also pre-fill customer details. This can be useful if you are rendering the widget on a page within your website where you already have some of their details.  

If you have any “internal only” custom fields set up on your Appointedd account, you can still pass values through and they will be saved against the customer, without them seeing or being able to change it. For example this can be useful if you have a user ID for the customer which you want to be saved in Appointedd for reporting purposes. 

appointeddWidget.render('booking-widget',{
preset:{
organisations:['55c36b5edda1dd93b7d63af1'],
notes: "Some notes which are stored against the booking",
customer:{
firstname:"Greg",
lastname: "Dickson",
email:"greg@appointedd.com",
mobile:"447594942941",
custom_fields:{
"membership_id":12345,
"age": 28
}
}
}
});

In the above example, we have passed configuration object to the render method, which contains both the store and the customer’s details as preset values: 

  1. Because the store is pre-set, the widget will skip the store selection step and render straight into the step after. It is also possible to define multiple preset stores, which wont skip the store step but instead only show the stores you define. 

  2. The set notes will not be visible to the user when making their booking. They will however be stored on the booking and will be visible to the business on Appointedd.

  3. Because the customer details are pre-set, the customer will find that their details have been pre-filled on the step where they would usually enter their details.   

How to pre-fill customer's location in the location search field?

If you are using the enterprise widget across multiple locations and wish to have the customer's location pre-filled to show the closest locations to them, you can apply the below code to achieve it. For example, if you detect that the customer is in Edinburgh, the code would look like this:

<div id="apwidget"></div> 
<script src="https://retailwidget.appointedd.com/widget/[widget_id]/widget.js"></script>
<script>
appointeddWidget.render('apwidget',{
preset:{
location:{
query:"Edinburgh"
}
}
});
</script>

Here is how it would look on the map without the customer having to add the location into the search bar:


If you have any feedback we would love to hear it 👂

Keywords: Prefill, Pre-fill, Prefilling

Did this answer your question?