Overview
Pre-filling customer data in a widget involves automatically populating fields with information already known about the customer. This can improve user experience by saving time and reducing errors.
Membership portals
No doubt you already have a membership or insider portal where loyal customers can log in to access early-bird products, discounts, and exclusive events.
By placing your event or appointment booking behind this portal, you can require customers to sign in before completing their booking. Once they’re logged in, their membership or unique ID can be seamlessly passed through the booking tools into the Appointedd back office.
This means the data is automatically transferred to Appointedd, allowing your team to see directly within the booking whether the customer is a member or not - without the customer needing to do anything extra.
How do I set this up?
First, you'll need to create a hidden CRM field. Read more here.
Go to the Booking Tools tab → Manage CRM fields → Add custom field → Choose field type: Text → Enter the field name (the field ID will automatically populate from the field name that you entered) → Leave as optional → Toggle ON hide externally → Save field.
Second, you’ll need to create a booking widget that includes your event or appointment options. This will serve as your branded customer booking journey.
Go to the Booking Tools tab → Manage Booking Widgets → Create New, and set up your widget. Save it, and copy either the embed code, popover code, or URL - depending on how you want it to appear for your members.
How does it appear in the portal?
With the embed code, popover code, or URL, you can display this booking widget to your members in their portal.
Embed code
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 - you can pre-fill more than just the ID!
First name
Last name
Email address
Phone number - (Must include country code with
+prefix)Custom field, specified by ID
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: {
memembership_id: "123456789",
}
},
bookingNotes: "An example booking note",
locale: "en",
locationSearch: "London",
},
});
</script>
Popover code
Alternatively, you can 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
Custom field, specified by ID
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[membership_id]="123456789"
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.
URL
And thirdly, you could copy the widget URL instead.
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
Custom field, specified by ID
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][membership_id]=123456789¬esPrefill=My+booking+note&localePrefill=en&locationSearchPrefill=London
Where can I see this data?
You can quickly view a customer's membership ID by clicking on the customer's name in the booking:
However, the membership ID will also be saved in the customer's record. You can view this data by going to the Customers tab on the top-left. Use the search function to locate a customer record.
