Skip to main content
All CollectionsBooking tools (booking pages and booking widgets)Booking widgets (legacy)
LEGACY standard widget: Rendering and pre-filling the data in embed, popover and URL
LEGACY standard widget: Rendering and pre-filling the data in embed, popover and URL

Learn about rendering your legacy widgets and pre-filling data in embed, popover or URL modes.

Krissa avatar
Written by Krissa
Updated over 3 months ago

🌎 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.


If you have any feedback we would love to hear it πŸ‘‚

Did this answer your question?