🌎 Overview
The Appointedd widget only requires the ability to add a small piece of HTML onto the page where it will be hosted. This guide takes you through how to create a legacy booking widget.
You can also then further pre-fill customer data in a widget, which automatically populates form fields with information already known about the customer. This can improve user experience by saving time and reducing errors.
Please note: the information below is for the legacy widgets. If you'd rather use our new widgets 2.0, click here instead.
📚 Examples of HTML snippets
Embed mode
In embed mode, the booking widget is embedded directly in the body of the page. The HTML snippet for an embedded booking widget will be a little like this:
<iframe width="100%" height="550px"
src="https://book.appointedd.com/app/UNIQUEWIDGETID"></iframe>
Popover mode
In popover mode, a customizable "book now" button is embedded into the body of the page. From this button, the booking widget will pop over as an overlay in front of the page. The HTML snippet for an popover booking widget will be a little like this:
<button style="outline: 0;cursor:pointer;border: 0;color: #fff;padding: 10px
20px;font-size: 20px;border-radius: 5px;background-color:#042229;"
class="appointedd-booking-popover" ap-appid="UNIQUEWIDGETID">Book now</button>
<script src="//s3-eu-west-1.amazonaws.com/appointedd-portal-assets/popover/
appointedd-button.min.js"></script>
📝 How to pre-fill data in legacy widget embed mode
In order to pre-fill the data, you will need to create your embed widget first.
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
Booking notes (urlencoded)
Any custom fields*, specified by ID.
Example
<iframe width="100%" height="550px"src="
https://book.appointedd.com/app/5b217d651490f4f46c26eb45?
customerPrefill[firstname]=greg&
customerPrefill[lastname]=Dickson&
customerPrefill[email]=greg@appointedd.com&
customerPrefill[mobile]=447777777777&
customerPrefill[customFields][hidden_id_field]=123456&
notesPrefill=These%20notes%20will%20be%20prefilled"></iframe>
📝 How to pre-fill data in legacy widget popover mode
In order to pre-fill the data, you will need to create your popover widget first.
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
Booking notes (urlencoded)
Any custom fields*, specified by ID.
Example:
window.appointeddConfig = {
prefilledNotes: 'Pre fill your customer notes here',
disableNotes: true,
prefilCustomerData: {
firstname: 'Greg',
lastname: 'Dickson',
email: 'greg@appointedd.com',
mobile: '447777777777',
customFields: {
membership_number: '1967',
company_name: 'Appointedd',
}
},
};
📝 How to pre-fill data in legacy widget URL mode
In order to use Appointedd pre-filling functionality in widget URL, first of all, you will need to create your legacy widget and copy the URL. This can be done by going to the Booking tools tab → Manage booking widgets → Legacy widgets → Create new widget.
After saving the widget, you can then copy the widget URL:
Once you have your widget URL, simply follow the below example to structure the URL parameters to pre-fill the following data:
First name
Last name
Email address
Phone number
Booking notes (url encoded)
Any custom fields*, specified by ID.
Example:
https://mybusinessname.appointedd.com/app/654a4588f02ac14661e03ff3?
customerPrefill[firstname]=greg&
customerPrefill[lastname]=Dickson&
customerPrefill[email]=greg@appointedd.com&
customerPrefill[mobile]=447777777777&
customerPrefill[customFields][hidden_id_field]=123456&
notesPrefill=These%20notes%20will%20be%20prefilled
🕵️ Hidden pre-filled 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 would 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, birthdays, a case number etc.