Inquiry Widget Advanced Configuration
Updated
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 Sympl.
- Data manipulation or validation is required prior to sending it to Sympl.
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 SymplAccountId and SymplRentalId 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 Sympl. We recommend using the same field names as outlined below in your custom form to save you time.
5. The submitToSympl method should be called to submit data to Sympl.
// 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 submitToSympl ()
{
var environment = ''; // leave empty
var accountId = '<SymplAccontId>'; //Must be specified
var rentalId = '<SymplRentalId>'; //Must be specified
var url = 'https://bookings.sympl.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 Sympl using the Sympl 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>Sympl support fields to passed in the payload:
- name - This is the guest name.
- email - This is the guest email address.
- account - Your Sympl 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 Sympl rental id.
- subject