🌎 Overview
Prefilling customer data in a widget involves automatically populating form fields with information already known about the customer. This can improve user experience by saving time and reducing errors.
Read the article below to learn how to set it up to pre-fill customer data in embed, popover or URL modes in the new widget 2.0. Click here to learn more about widgets 2.0.
📝 How to pre-fill data in embed mode
In order to use Appointedd pre-filling functionality in when using the booking tool in embed mode, first of all, you will need to create your widget and copy the embed code snippet. This can be done by going to the Booking tools tab → Manage booking widgets → Create new and setting up your widget.
After saving the widget, you can then copy the embed snippet.
Once you have your booking tool snippet, follow the example below to pre-fill the booking tool using a configuration object to pre-fill the following data:
First name
Last name
Email address
Phone number - (Must include country code with
+prefix)Booking notes
Any custom fields, specified by ID
Locale - Initial setting of the language selector
Initial location search (only applicable to multi-account tools using the map functionality)
Example:
<script src="https://booking-tools-sdk.appointedd.com/appointedd-booking-tools-sdk-v1.js"></script>
<div id="iFrameContainer"></div>
<script language="javascript" type="text/javascript">
Appointedd.renderWidget("iFrameContainer", {
widgetId: "668c081307dfe52907651568",
enableLanguageSelector: true,
preFillData: {
customer: {
firstName: "Ada",
lastName: "Lovelace",
phone: "+441314960000",
email: "ada@example.com",
customFields: {
my_custom_field: "example",
}
},
bookingNotes: "An example booking note",
locale: "en",
locationSearch: "London",
},
});
</script>
✏️ How to pre-fill data in popover mode
In order to use Appointedd pre-filling functionality in when using the booking tool in popover mode, you will need to create your widget and copy the popover code snippet. This can be done by going to the Booking tools tab → Manage booking widgets → + Create new and setting up your widget.
After saving the widget, you can then copy the popover code snippet.
Once you have your booking tool snippet, follow the example below to pre-fill the booking tool using data- attributes attached to the button element for the following data:
First name
Last name
Email address
Phone number - (Must include country code with
+prefix)Booking notes
Any custom fields, specified by ID.
Locale - Initial setting of the language selector.
Initial location search (only applicable to multi-account tools using the map functionality)
Example:
<button
id="ap-popbtn-668c081307dfe52907651568"
class="appointedd-booking-widget-popover"
data-widget-id="668c081307dfe52907651568"
data-enable-language-selector="true"
data-customer-first-name="Ada"
data-customer-last-name="Lovelace"
data-customer-phone="+441314960000"
data-customer-email="ada@example.com"
data-customer-custom-field[my_custom_field]="example"
data-customer-custom-field.my_custom_field_2="example2"
data-booking-notes="My booking note"
data-locale="en"
data-location-search="London"
>
Book now
</button>
For custom fields both square bracket notation [custom_field_id] and dot notation .custom_field_id are supported.
🖊️ How to pre-fill data in widget URL mode
In order to use Appointedd pre-filling functionality in widget URL, first of all, you will need to create your widget and copy the URL. This can be done by going to the Booking tools tab → Manage booking widgets → + Create new and setting up your widget.
After saving the widget, you can then copy the widget URL.
Once you have your booking page URL, simply follow the below example to structure the URL parameters (ensuring all values are URL encoded) to pre-fill the following data:
First name
Last name
Email address
Phone number - (Must include country code with
+prefix)Booking notes
Any custom fields, specified by ID
Locale - Initial setting of the language selector
Initial location search (only applicable to multi-account tools using the map functionality)
Example:
https://my-account-name.appointedd.com/booking-widget/668c081307dfe52907651568?customerPrefill[firstName]=Ada&customerPrefill[lastName]=Lovelace&customerPrefill[email]=ada@example.com&customerPrefill[phone]=%2b441314960000&customerPrefill[customFields][my_custom_field]=example¬esPrefill=My+booking+note&localePrefill=en&locationSearchPrefill=London
🕵️ Hidden custom fields
As well as those custom fields which display on the booking widget for the customer to complete, it is possible to pre-fill custom fields which do not display on the widget for the customer. These custom fields should be created as internal only within the Appointedd web application.
Pre-filling fields which don’t display to the customer allows the business to pass data into Appointedd without displaying that information in the widget for the customer to see or edit. This can be useful for passing data such as the source of the customer to determine which marketing campaign they arrived at the booking process from, for example.
🔏 Can I lock/pre-select a specific service, resource or organisation?
Yes, in the new widgets 2.0, pre-filling can be used to force a specific service, resource or organisation selection in the booking flow.
To do this in embed mode, this can be done by adding the relevant attributes to the
preFillDataobject passed toAppointedd.renderWidget():
- For a service:serviceId: "XXXXXXXXXXXXXXXXXXXXXXXX"
- For a resource:resourceId: "XXXXXXXXXXXXXXXXXXXXXXXX"
- For an organisation:organisationId: "XXXXXXXXXXXXXXXXXXXXXXXX"
In popover mode, this can be done by adding the relevant attributes to the button element:
- For a service:data-service-id="XXXXXXXXXXXXXXXXXXXXXXXX"
- For a resource:data-resource-id="XXXXXXXXXXXXXXXXXXXXXXXX"
- For an organisation:data-organisation-id="XXXXXXXXXXXXXXXXXXXXXXXX"