🌎 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-filed.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&notesPrefill=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.

Learn more about custom fields

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

Submit feedback