WEBSITE INTEGRATIONS

Inquiry Import

8min

﻿
Target Audience
The target audience of this document are developers or persons with at least some software development experience. 
General
Instead of offering a form as a widget we decided to hook into any existing forms on the website. This gives your web agency full control over the design and the functionality of the form while we do fully operate in the background.
Please be aware that our script does only support one form per page. This is a safe-guard so that multiple initializations, which can happen on a SPA (single-page-application) do not trigger multiple form imports.
Integration
We have two ways for integrating with your form - one is to add the required mapping information to your inputs with data- attributes or the other one is to include the mapping within a script tag.
Samples
Data-Attributes
HTML
<form id="hm-booking-request-form">
LastName:	<input type="text" data-hotelsoftware="guest.lastName" value="Müller" /><br/>
Email:		<input type="text" data-hotelsoftware="guest.eMailAddress" value="[email protected]" /><br/>
Message:	<textarea data-hotelsoftware="message">Nichtraucherzimmer mit schönem Ausblick</textarea><br/>
<input type="submit"/>
</form>

<script src="https://js.hotelreservation.expert/hm.js"></script>
<script>
Hotelsoftware.Inquiry.init({
  hotelId: 'YOUR_HOTEL_ID'
});
</script>
<form id="hm-booking-request-form">
LastName:	<input type="text" data-hotelsoftware="guest.lastName" value="Müller" /><br/>
Email:		<input type="text" data-hotelsoftware="guest.eMailAddress" value="info@example.com" /><br/>
Message:	<textarea data-hotelsoftware="message">Nichtraucherzimmer mit schönem Ausblick</textarea><br/>
<input type="submit"/>
</form>

<script src="https://js.hotelreservation.expert/hm.js"></script>
<script>
Hotelsoftware.Inquiry.init({
  hotelId: 'YOUR_HOTEL_ID'
});
</script>
﻿
Script-Tag
When using the script tag please make sure that it is placed after the form tag. Otherwise form will not be available when the Inquiry script is initialized and the initialization will therefore fail.
HTML
<form id="hm-booking-request-form">
FirstName:	<input type="text" name="first-name" value="Max" /><br/>
LastName:	<input type="text" name="last-name" value="Mustermann" /><br/>
Phone:		<input type="text" name="phone" value="+43 660 123 45 67" /><br/>
Email:		<input type="text" name="email" value="[email protected]" /><br/>
  <input type="submit"/>
</form>

</form>

<script src="https://js.hotelreservation.expert/hm.js"></script>
<script>
Hotelsoftware.Inquiry.init({
    hotelId: 'YOUR_HOTEL_ID',
    preventDefault: true,
    injectAttributes: true,
    onSuccess: function(test) {
        console.log(test);
    },
    attributeMap: [
        { selector: 'input[name="first-name"]', attribute: 'guest.firstName'},
        { selector: 'input[name="last-name"]', attribute: 'guest.lastName'},
        { selector: 'input[name="phone"]', attribute: 'guest.phoneNumber'},
        { selector: 'input[name="email"]', attribute: 'guest.eMailAddress'}
    ]
});
</script>
<form id="hm-booking-request-form">
FirstName:	<input type="text" name="first-name" value="Max" /><br/>
LastName:	<input type="text" name="last-name" value="Mustermann" /><br/>
Phone:		<input type="text" name="phone" value="+43 660 123 45 67" /><br/>
Email:		<input type="text" name="email" value="info@example.com" /><br/>
  <input type="submit"/>
</form>

</form>

<script src="https://js.hotelreservation.expert/hm.js"></script>
<script>
Hotelsoftware.Inquiry.init({
    hotelId: 'YOUR_HOTEL_ID',
    preventDefault: true,
    injectAttributes: true,
    onSuccess: function(test) {
        console.log(test);
    },
    attributeMap: [
        { selector: 'input[name="first-name"]', attribute: 'guest.firstName'},
        { selector: 'input[name="last-name"]', attribute: 'guest.lastName'},
        { selector: 'input[name="phone"]', attribute: 'guest.phoneNumber'},
        { selector: 'input[name="email"]', attribute: 'guest.eMailAddress'}
    ]
});
</script>
﻿
Documentation
Required Fields
If at least a valid email address and a first or last name was supplied, the inquiry will be imported into the hotel software.
Javascript Options
Name
Description
Default Value
preventDefault
if set to true, prevents the default action of the submit button
true
autoBindSubmitEvent
automatically bind itself to the submit event of the form - if false please call Hotelsoftware.Inquiry.processSubmit(submitEvent) manually
true
onSuccess
method called when the inquiry was imported successfully
function () { }
onError
method called when the inquiry import failed
function (status) { }
env
environment (only required for testing purposes)
'prod'
hotelId
﻿
''
lang
will be transmitted to the hotel software as the web page langauge and will be set as the guests default communication language (ISO-639-1 2 letter language code)
'de'
dateFormat
should be set to whatever date format is used in the date input fields - required for the hotel software to parse the supplied dates
'dd.MM.yyyy'
formId
﻿
'hm-booking-request-form'
formSelector
if set the form will be looked up using document.querySelector and then the formId will be set as the forms id attribute value - if null we will try to find a form with the supplied formId
null
injectAttributes
﻿
false
eventCategory
we will trigger a Google Analytics event with the event action set to Inquiry - the value of eventCategory will be used as the category - defaults to our brand

if you are using a white label version of our hotel software you should overwrite this value with your own brand name
﻿
attributeMap
input mapping to hotel software inquiry fields (in case you do not use the data attributes)
[]
Supported Fields
Field Name
Description
arrivalDate
arrival date defined in dateFormat
departureDate
departure date defined in dateFormat
guest.namePrefix
title prefixing the guests name (e.g. Dr., Prof., Ing.)
guest.firstName
either first or last name is required
guest.lastName
either first or last name is required
guest.nameSuffix
title suffixing the guest name (e.g. BA, MSc)
guest.phoneNumber
phone number (preferably in the E.123 format)
guest.eMailAddress
required
guest.address
can be any single or multi line string containing the street and the house number (lines should be separated using the new line character)
guest.zipCode
﻿
guest.city
﻿
guest.countryCode
﻿ISO-3166-1 alpha-2 country code
message
can be any single or multi line string (lines should be separated using the new line character)
inquiry[0].roomTypeName
room type name (preferably matches the room type name in the hotel software, otherwise we will try to do a smart matching)
inquiry[0].ratePlanName
rate plan name (preferably matches the rate plan name in the hotel software, otherwise we will try to do a smart matching)
inquiry[0].roomCount
if not supplied (or 0) defaults to 1
inquiry[0].numAdults
maximum value: 30
inquiry[0].numChildren
maximum value: 10
inquiry[0].childAges
ideally a comma separated list of ages
We do use AI (artifical intelligence) technologies to match room type and rate plan names and to extract the age of each child

Name	Description	Default Value
preventDefault	if set to true, prevents the default action of the submit button	true
autoBindSubmitEvent	automatically bind itself to the submit event of the form - if false please call Hotelsoftware.Inquiry.processSubmit(submitEvent) manually	true
onSuccess	method called when the inquiry was imported successfully	function () { }
onError	method called when the inquiry import failed	function (status) { }
env	environment (only required for testing purposes)	'prod'
hotelId		''
lang	will be transmitted to the hotel software as the web page langauge and will be set as the guests default communication language (ISO-639-1 2 letter language code)	'de'
dateFormat	should be set to whatever date format is used in the date input fields - required for the hotel software to parse the supplied dates	'dd.MM.yyyy'
formId		'hm-booking-request-form'
formSelector	if set the form will be looked up using document.querySelector and then the formId will be set as the forms id attribute value - if null we will try to find a form with the supplied formId	null
injectAttributes		false
eventCategory	we will trigger a Google Analytics event with the event action set to Inquiry - the value of eventCategory will be used as the category - defaults to our brand if you are using a white label version of our hotel software you should overwrite this value with your own brand name
attributeMap	input mapping to hotel software inquiry fields (in case you do not use the data attributes)	[]

Field Name	Description
arrivalDate	arrival date defined in dateFormat
departureDate	departure date defined in dateFormat
guest.namePrefix	title prefixing the guests name (e.g. Dr., Prof., Ing.)
guest.firstName	either first or last name is required
guest.lastName	either first or last name is required
guest.nameSuffix	title suffixing the guest name (e.g. BA, MSc)
guest.phoneNumber	phone number (preferably in the E.123 format)
guest.eMailAddress	required
guest.address	can be any single or multi line string containing the street and the house number (lines should be separated using the new line character)
guest.zipCode
guest.city
guest.countryCode	ISO-3166-1 alpha-2 country code
message	can be any single or multi line string (lines should be separated using the new line character)
inquiry[0].roomTypeName	room type name (preferably matches the room type name in the hotel software, otherwise we will try to do a smart matching)
inquiry[0].ratePlanName	rate plan name (preferably matches the rate plan name in the hotel software, otherwise we will try to do a smart matching)
inquiry[0].roomCount	if not supplied (or 0) defaults to 1
inquiry[0].numAdults	maximum value: 30
inquiry[0].numChildren	maximum value: 10
inquiry[0].childAges	ideally a comma separated list of ages

gtag.js Tracking

Example Form