Inquiry Widget Advanced Configuration

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="" type="text/javascript"></script>

//this include is needed
<script src="" type="text/javascript"></script>

 function submitToSympl ()
 var environment = ''; // leave empty
 var accountId = '<SymplAccontId>'; //Must be specified
 var rentalId = '<SymplRentalId>'; //Must be specified
 var url = ''+ 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
 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

 type: "POST",
 url: url,
 data: payload
 }).done(function (data) {
 //refect to thank you page;
 }).fail(function( data ) {
 //no nothing


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

As always, please contact us with questions at any time. We're happy to help.

How did we do?

Powered by HelpDocs (opens in a new tab)