This article details how to implement the Inquiry Widget using a custom form or other custom settings. Reasons for doing so may include:
There is already an existing UI and form to capture user data.
There is a need to pass extra information to Tokeet.
Data manipulation or validation is required prior to sending it to Tokeet.
Follow these steps:
1. Copy all of the code colored in blue below into a text editor. An HTML or Javascript editor is best.
2. Go through the steps detailed in generating the Inquiry Widget. This is done so you can get the account id and rental id. Also we recommend using the same source as the generated widget if you plan to tie a trigger to this form.
3. Replace the TokeetAccountId and TokeetRentalId in the code below with the values from the generated code from the Inquiry Widget. It might help to copy the generated code into an online code "beautify" tool.
4. Collect the form values in your custom form and perform any custom actions prior to submitting the data to Tokeet. We recommend using the same field names as outlined below in your custom form to save you time.
5. The submitToTokeet method should be called to submit data to Tokeet.
// this include is needed
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
//this include is needed
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js" type="text/javascript"></script>
<script>
function submitToTokeet ()
{
var environment = ''; // leave empty
var accountId = '<TokeetAccontId>'; //Must be specified
var rentalId = '<TokeetRentalId>'; //Must be specified
var url = 'https://bookings.tokeet.com/inquiry/'+ accountId +'/' + rentalId;
//get data from our existing form. You will need to change these values as needed if your form field names are different.
var lName = $('#TxBxLastName').val();
var fName = $('#TxBxFirstName').val();
var email = $('#TxBxEmail').val();
var address = $('#TxBxAddress').val();
var dateFrom = $('#dateFrom').val();
var dateTo = $('#dateTo').val();
//Date validation
try
{
dateFrom = moment(dateFrom).utc().unix();
if (isNaN(dateFrom))
{
dateFrom = '';
}
}
catch (err) {
dateFrom = '';
}
//Date validation
try {
dateTo = moment(dateTo).utc().unix();
if (isNaN(dateTo)) {
dateTo = '';
}
}
catch (err) {
dateTo = '';
}
//this is where we send data to Tokeet using the Tokeet field names
var payload =
{
guest_arrive: datefrom,
guest_depart: dateTo,
name: fName + ' ' + lName,
email: email,
source: sourceName,
message_txt: "I am interested in staying at your rental. Please provide more information.",
rental_id: rentalId,
account: accountId
};
$.ajax({
type: "POST",
url: url,
data: payload
}).done(function (data) {
//refect to thank you page;
}).fail(function( data ) {
//no nothing
});
};
</script>Tokeet support fields to passed in the payload:
name - This is the guest name.
email - This is the guest email address.
account - Your Tokeet account id.
source - The source of the inquiry. This will appear on the inquiry detail page.
received_on - Current timestamp in epoch seconds, not milliseconds which is the JS default.
phone
guest_arrive - The guest arrival date in epoch seconds.
guest_depart - The guest departure date in epoch seconds.
num_adults - The number of adults in the inquiry.
num_child - The number of children in the inquiry.
message_txt
rental_id - Your Tokeet rental id.
subject