Pre-fill Customer Details into the Online Booking Interface

You can pre-fill customer details by feeding through the data as a query parameter.

As an example:

If you are a technology retailer, and you wish to allow your customers to book a device in for a repair or service. Then your website might already have information about a customer's already such as first name, last name, phone number and so forth.

By using the the method outlined below, you can make the transition from your website to the online booking interface seamless, details that a customer would have entered on your website already can be carried over to the online booking interface. In this example a logged in customer on your website would have all is details already pre-filled when booking via the online booking interface.

How to feed Customer Details

Qudini will expect an encoded URI of an encoded base 64 JSON string, using Javascript this can be achieved as followed:

encodeURI(btoa(JSON.stringify(customerDetails)));

?customerDetails=ewogICJmaXJzdE5hbWUiOiJYWFhYWCIsCiAgImxhc3ROYW1lIjoiWFhYWCIsCiAgImVtYWlsIjoidGVzdEBxdWRpbmkuY29tIiwKICAicGhvbmVOdW1iZXIiOiIrWFggWFhYWFhYIiwKICAiZ3JvdXBTaXplIjoiMSIsCiAgInBvc3Rjb2RlIjoiWFhYIFhYWCIsCiAgIm5vdGVzIjoiWFhYIiwKICAicmVjZWl2ZVNtc1JlbWluZGVyIjp0cnVlLAogICJsYW5nIjoiZW4iCn0

The JSON  object corresponding to customerDetails is a collection of key value pairing using a key the name of the customer detail you need to be pre-fill:

const customerDetails = {
  "firstName":"XXXXX",
  "lastName":"XXXX",
  "email":"test@qudini.com",
  "phoneNumber":"+XX XXXXXX",
  "groupSize":"1",
  "postcode":"XXX XXX",
  "notes":"XXX",
  "receiveSmsReminder":true,
  "lang":"en"
}

ewogICJmaXJzdE5hbWUiOiJYWFhYWCIsCiAgImxhc3ROYW1lIjoiWFhYWCIsCiAgImVtYWlsIjoidGVzdEBxdWRpbmkuY29tIiwKICAicGhvbmVOdW1iZXIiOiIrWFggWFhYWFhYIiwKICAiZ3JvdXBTaXplIjoiMSIsCiAgInBvc3Rjb2RlIjoiWFhYIFhYWCIsCiAgIm5vdGVzIjoiWFhYIiwKICAicmVjZWl2ZVNtc1JlbWluZGVyIjp0cnVlLAogICJsYW5nIjoiZW4iCn0=

Example

function goToOnlineBookingWidget(accountDetails){
  const customerDetails = {
    "firstName": accountDetails.firstName,
    "lastName": accountDetails.lastName,
    "email": accountDetails.email,
    "phoneNumber": accountDetails.phone,
    "postcode": accountDetails.postCode,
    "lang": accountDetails.lang
  }
  
  const customerDetailsQueryParam = encodeURI(btoa(JSON.stringify(customerDetails)));
  
  location.href = `https://https://bookings.qudini.com/XXXXX?customerDetails=${customerDetailsQueryParam}`
}

The Online Booking Interface currently supports the following properties:

• title
• firstName
• lastName
• email
• groupSize
• phoneNumber
• postcode
• receiveSmsReminder
• notes
• orderNumber
• lang

Please be aware that there is a limit to how many characters a query parameter can contain, which is limited to 2000 characters. This is a browser hard limit, which unfortunately we cannot do anything about. 

Make sure the details you send encoded in base64 doesn’t reach the limit otherwise the data transferred will not be taken into account.