Search Website Integration

Modified on Mon, 3 Jun, 2024 at 12:04 PM

How to Integrate the iPRO Search Widget With Your Website

Introduction

Introduction

If you wish to use the iPRO search plugin, you can easily enhance your website with powerful search and online booking functionality from iPRO.

Before you start, you will need to add some custom code to the <HEAD> section of your website.

Custom Scripts Added in <HEAD> Section

Please follow these steps:

Add the Following Code:

Copy the script below and paste it into the <HEAD> section of your website. Additionally, place the script in an isolated JavaScript file for better organisation and maintenance.

<!-- iPRO Search -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js' id='iframe-resiser-js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Please copy and paste the following code into the footer section of your website, just before the closing </BODY> tag:

/**
 * iPRO Search
 */

<script>
 $(function(){
$(document).ready(function() {
    var checkout = $('#checkout').datepicker({
        autoclose: true,
        container: 'body'  
    });

    var checkin = $('#checkin').datepicker({
        autoclose: true,
        startDate: "+0d",
        container: 'body'
    }).on('changeDate', function(event){
        var newDate = new Date(event.date);
        checkout.datepicker("setStartDate", newDate);
        $('#checkout')[0].focus();
    });
});

    
    $('.cc-btn-dropdown').on('click', function(){
        $(this).parent().toggleClass('active');
    });

    
    $('.cc-apply-btn').on('click', function(){
        $(this).closest('.cc-dropdown').removeClass('active');
        updateGuestCount();
    });

     
    $('.cc-btn-plus').on('click', function(){
        var target = $($(this).data('target'));
        var currentVal = parseInt(target.val());
        if(currentVal < 20) {
            target.val(currentVal + 1);
            updateGuestCount();  
        }
    });

    $('.cc-btn-minus').on('click', function(){
        var target = $($(this).data('target'));
        var currentVal = parseInt(target.val());
        if(currentVal > 0) {
            target.val(currentVal - 1);
            updateGuestCount(); 
        }
    });

     $(document).on('click', function(e) {
        if (!$(e.target).closest('.cc-dropdown').length) {
            $('.cc-dropdown').removeClass('active');
        }
    });

     $('.cc-dropdown-content').on('click', function(e) {
        e.stopPropagation();
    });

     function updateGuestCount() {
        var adults = parseInt($('#adults').val());
        var children = parseInt($('#children').val());
        var infants = parseInt($('#infants').val());

        var totalGuests = adults + children + infants;

        $('#guest-count').text('Guests: ' + totalGuests);
    }
});


document.addEventListener('DOMContentLoaded', function () {
    var dropdownButton = document.querySelector('.custom-multiselect-dropdown .dropdown-button');
    var dropdownContent = document.querySelector('.custom-multiselect-dropdown .dropdown-content');
    dropdownButton.addEventListener('click', function (event) {
        event.preventDefault();
        dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
        event.stopPropagation();
    });
    dropdownContent.addEventListener('click', function (event) {
        event.stopPropagation();
    });
    var checkboxes = document.querySelectorAll('.custom-multiselect-dropdown .dropdown-content input[type="checkbox"]');
    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            updateButtonText();
        });
    });

    function updateButtonText() {
        var selectedCount = Array.from(checkboxes).filter(ch => ch.checked).length;
        dropdownButton.textContent = selectedCount > 0 ? `Filters: ${selectedCount}` : 'Select Options';
    }

    window.addEventListener('click', function (event) {
        if (!event.target.matches('.custom-multiselect-dropdown .dropdown-button')) {
            dropdownContent.style.display = 'none';
        }
    });
});

document.addEventListener("DOMContentLoaded", function () {
    const urlParams = new URLSearchParams(window.location.search);
    const location = document.getElementById('location');
    const checkin = document.getElementById('checkin');
    const checkout = document.getElementById('checkout');
    const adults = document.getElementById('adults');
    const children = document.getElementById('children');
    const infants = document.getElementById('infants');
    const petFriendlySelect = document.getElementById('attrs');
    const guestCount = document.getElementById('guest-count');
    if (urlParams.has('location')) location.value = urlParams.get('location');
    if (urlParams.has('checkin')) checkin.value = urlParams.get('checkin').split('%2F').join('/');
    if (urlParams.has('checkout')) checkout.value = urlParams.get('checkout').split('%2F').join('/');
    if (urlParams.has('adults')) adults.value = urlParams.get('adults');
    if (urlParams.has('children')) children.value = urlParams.get('children');
    if (urlParams.has('infants')) infants.value = urlParams.get('infants');
    updateGuestCount();

    function updateGuestCount() {
        const totalGuests = parseInt(adults.value) + parseInt(children.value) + parseInt(infants.value);
        guestCount.textContent = 'Guests: ' + totalGuests;
    }

    const firstAttr = urlParams.get('attrs');
    if (firstAttr && checkOptionExists(petFriendlySelect, firstAttr)) {
        petFriendlySelect.value = firstAttr;
        triggerChangeEvent(petFriendlySelect);
    }
    const attrsValues = urlParams.getAll('attrs').slice(1);
    const checkboxes = document.querySelectorAll('.custom-multiselect-dropdown .dropdown-content input[type="checkbox"]');
    attrsValues.forEach(value => {
        const checkbox = Array.from(checkboxes).find(ch => ch.value === value);
        if (checkbox) {
            checkbox.checked = true;
        }
    });
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function () {
            updateFiltersButtonText();
        });
    });

    function updateFiltersButtonText() {
        const selectedFilters = Array.from(checkboxes).filter(ch => ch.checked).map(ch => ch.parentNode.textContent.trim());
        const dropdownButton = document.querySelector('.custom-multiselect-dropdown .dropdown-button');
        dropdownButton.textContent = selectedFilters.length > 0 ? `Filters: ${selectedFilters.length}` : 'Filters';
    }

    updateFiltersButtonText();

    function checkOptionExists(selectElement, value) {
        return Array.from(selectElement.options).some(option => option.value === value);
    }

    function triggerChangeEvent(selectElement) {
        const event = new Event('change', { bubbles: true });
        selectElement.dispatchEvent(event);
    }

    const elementToScrollTo = document.getElementById('wd_id');
    if (elementToScrollTo) {
        elementToScrollTo.scrollIntoView({ behavior: 'smooth' });
    }
});

Adjusting the Start Date for Search Check In

To control the earliest date users can search for available bookings, you can adjust the startDate parameter in your code. This feature is especially useful for managing last-minute bookings. For instance, setting startDate: "+2d" will only allow searches starting from 2 days from today's date.

In the code snippet below, you will see how to configure this parameter:

    var checkin = $('#checkin').datepicker({
        autoclose: true,
        startDate: "+0d",
        container: 'body'
    }).on('changeDate', function(event){
        var newDate = new Date(event.date);
        checkout.datepicker("setStartDate", newDate);
        $('#checkout')[0].focus();
    });

Example Configuration

startDate: "+0d": Allows searches starting from today.
startDate: "+1d": Allows searches starting from tomorrow.
startDate: "+2d": Allows searches starting from 2 days from today.

Implementation

To adjust the parameter:

Locate the startDate line in your datepicker configuration.
Change the value to suit your requirements (e.g., "+2d" for searches starting from 2 days from today).

Depending on the website platform you are using, you will need to add an embed code block or code injection block to insert the search form.

1. Locate the Search Form Code:

In your search form code, find the following section:

<div class="cc-input-group">
    <select id="location" class="cc-input-text" name="location">
        <option value="">Location</option>
        <option value="xxxx">location-a</option>
        <option value="xxxx">location-b</option>
    </select>
</div>

2. Add Your Locations:

Replace xxxx with the relevant iPRO location ID for each location.
Customise the displayed name for each location (e.g., location-a, location-b).

3. Finding the Location ID:

Navigate to the 'Properties' tab in your iPRO system.
Locate the ID for each property or location you want to include in the search form.

Example

Here's an example with two locations added:

<div class="cc-input-group">
    <select id="location" class="cc-input-text" name="location">
        <option value="">Location</option>
        <option value="1234">London</option>
        <option value="5678">Manchester</option>
    </select>
</div>

By following these steps, you can add a functional and customised search form to your homepage, allowing users to search properties by specific locations.

To enhance your search form, you can add various filters based on amenities or property types. In the search form code, look for the section with select id="attrs" inside the <div class="cc-input-group">. Here, you will add your filters and enter the relevant iPRO amenity IDs.

Steps to Add Filters

1. Locate the Search Form Code:

Find the following section in your search form code:

<div class="cc-input-group">
    <select id="attrs" class="cc-input-text" name="attrs">
        <!-- Filters will be added here -->
    </select>
</div>

2. Add Filters

Customize the filters by mapping them to the correct iPRO IDs.
You can add multiple groups of filters. For example, you might have filters for pets, property types, and distances.

3. Example Filters

Below is an example of how to add a filter for properties that allow pets and another for property types, such as cottages.

Example

Pet Filter

To add a filter for properties that allow pets:

<label><input type="checkbox" value="12345" name="attrs"> Pets Allowed</label><br>

Where 12345 is the iPRO amenity ID for pet-friendly properties.

Property Type Filter

To add a filter for cottages:

<label><input type="checkbox" value="8830" name="attrs"> Cottage</label><br>

Where 8830 is the iPRO amenity ID for cottages.

Sample Implementation

Here’s how you can implement these filters in your form:

<div class="cc-input-group">
    <div>
        <label><input type="checkbox" value="12345" name="attrs"> Pets Allowed</label><br>
        <label><input type="checkbox" value="8830" name="attrs"> Cottage</label><br>
        <!-- Add more filters as needed -->
    </div>
</div>

Customization

You can add as many filters as required, simply by naming the filter and mapping it to the correct ID within iPRO.

By customising your search form with these filters, you provide users with a more refined and useful search experience, tailored to their specific needs.

Below is the default search form code. Please edit as required and then copy and paste this code on the pages where you want the search form on your website.

Important Notes

Update the URL: Change https://www.yourdomain.com/search to the URL where you want to direct users after they click 'Search'.
Update Locations: Match the locations to your iPRO locations or remove the location section if not needed.
Update Amenities: Match the amenities to your iPRO amenities or remove these filters.

<div class="cc-container"><form id="searchform" action="https://cottagesonthecoast.co.uk/staging/search/" method="get">
<div class="cc-form-group">
<div class="cc-row">
<div class="cc-input-group"><select id="location" class="cc-input-text" name="location">
<option value="">Location</option>
<option value="9990">Croyde</option>
<option value="10005">Woolacombe</option>
<option value="10036">Braunton</option>
<option value="10051">Exmoor</option>
<option value="10078">Westward Ho!</option>
<option value="10107">Ilfracombe</option>
<option value="10133">Appledore</option>
<option value="10188">Instow</option>
<option value="10215">Lynton &amp; Lynmouth</option>
<option value="10161">Barnstaple</option>
<option value="10093">Bishops Nympton</option>
</select></div>
<div class="cc-input-group"><input id="checkin" class="cc-input-text" autocomplete="off" name="checkin" readonly="readonly" type="text" placeholder="Check In" data-date-format="dd/mm/yyyy" /></div>
<div class="cc-input-group"><input id="checkout" class="cc-input-text" autocomplete="off" name="checkout" readonly="readonly" type="text" placeholder="Check Out" data-date-format="dd/mm/yyyy" /></div>
<div class="cc-input-group">
<div class="cc-dropdown">
<button class="cc-btn-dropdown" type="button"><span id="guest-count">Guests: 1</span></button>
<div class="cc-dropdown-content">
<div class="cc-quantity"><label for="adults">Adults</label>
<button class="cc-btn-minus" type="button" data-target="#adults">-</button>
<input id="adults" max="20" min="1" name="adults" type="number" value="1" />
<button class="cc-btn-plus" type="button" data-target="#adults">+</button></div>
<div class="cc-quantity"><label for="children">Children</label>
<button class="cc-btn-minus" type="button" data-target="#children">-</button>
<input id="children" max="20" min="0" name="children" type="number" value="0" />
<button class="cc-btn-plus" type="button" data-target="#children">+</button></div>
<div class="cc-quantity"><label for="infants">Infants</label>
<button class="cc-btn-minus" type="button" data-target="#infants">-</button>
<input id="infants" max="20" min="0" name="infants" type="number" value="0" />
<button class="cc-btn-plus" type="button" data-target="#infants">+</button></div>
<button class="cc-apply-btn" type="button">Apply</button>
</div>
</div>
</div>
<div class="cc-input-group"><select id="attrs" class="cc-input-text" name="attrs">
<option value="">Pet Friendly</option>
<option value="7371">Yes</option>
</select></div>
<div class="cc-input-group"><button class="cc-btn-submit" type="submit">Search</button></div>
</div>
</div>
</form></div>

Adding the Custom Style Sheet to Your Website

To ensure the search form has the base layout required (i.e., horizontal), please add the following custom styles to your stylesheet. Note that if you are already using Bootstrap for the date picker, you may need to remove or update some of these classes.

// Search Form //

.cg-container {
    margin: 0 auto;
    padding: 20px;
}

.cg-form-group, .cg-row, .cg-input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cg-input-group {
    margin-right: 10px;
}

.cg-input-text {
    padding: 10px;
    border: 1px solid #ccc;
}

.cg-btn-submit {
    padding: 10px;
    background-color: #8d7351;
    color: white;
    border: 1px solid #8d7351;
}

.cg-input-text:focus {
    border-color: #8d7351;
    outline: 0;
}

.cg-input-group:last-child {
    margin-right: 0;
}

.location {color: #88c9b5; font-weight: bold}

.vc_grid-filter.vc_grid-filter-color-vista_blue > .vc_grid-filter-item:hover, .vc_grid-filter.vc_grid-filter-color-vista_blue > .vc_grid-filter-item.vc_active {
    background-color: #88c9b5;
}

.vc_grid.vc_grid-owl-theme .vc_grid-owl-dots.vc_grid-point_dots.vc_grid-owl-dots-color-vista_blue .vc_grid-owl-dot span, .vc_grid.vc_grid-owl-theme .vc_grid-owl-dots.vc_grid-fill_square_dots.vc_grid-owl-dots-color-vista_blue .vc_grid-owl-dot span, .vc_grid.vc_grid-owl-theme .vc_grid-owl-dots.vc_grid-round_fill_square_dots.vc_grid-owl-dots-color-vista_blue .vc_grid-owl-dot span {
    background-color: #88c9b5 !important;
    margin-top: -60px;
}

.listings2 {
        width: 33.33333333% !important;
        float: left !important;
    }




.cc-input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: 10px;
}

.cc-input-group label {
    margin-bottom: 5px;
    font-weight: bold;
}

.cc-input-text {
    border: 1px solid #ccc;
    width: 100%;
}

.cc-btn-submit {
    background-color: #34aab5;
    color: white;
    border: 1px solid #34aab5;
    cursor: pointer;
}

.cc-btn-submit:hover {
    background-color: #3197a0;
    border-color: #3197a0;
}

.cc-input-text:focus {
    border-color: #34aab5;
    outline: 0;
}

.cc-dropdown {
    position: relative;
    width: 100%;
}

.cc-btn-dropdown {
    background-color: #ffffff;
    border: 1px solid #ccc;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.cc-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    z-index: 1;
    margin-top: 10px;
    width: 100%;
}

.cc-dropdown.active .cc-dropdown-content {
    display: block;
}

.cc-quantity {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
}

.cc-btn-minus,
.cc-btn-plus {
    background-color: #ccc;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.cc-btn-minus:hover,
.cc-btn-plus:hover {
    background-color: #bbb;
}

.cc-quantity input {
    text-align: center;
    width: 40px;
    border: 1px solid #ccc;
    padding: 5px;
}

.cc-apply-btn {
    background-color: #34aab5;
    color: white;
    border: 1px solid #34aab5;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.cc-apply-btn:hover {
    background-color: #3197a0;
    border-color: #3197a0;
}

.cc-input-text {
    height: 50px;
        padding: 0px 15px !important;
        box-sizing: border-box;
}

.cc-dropdown p,
.cc-input-group p {
    padding: 0;
    margin: 0;
}

button.cc-btn-dropdown {
    height: 50px;
}

span#guest-count {
    padding: 14px 5px;
    display: inline-block;
    color: #8d8d8d;
}

button.cc-btn-submit {
    height: 50px;
}

.cc-input-group {
    margin-right: 0 !important;
}

.cc-input-group br {
    display: none;
}

.cc-quantity label {
    min-width: 129px;
        color: #000;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .cc-row {
        flex-wrap: wrap;
    }

    .cc-input-group {
        margin-right: 0;
        margin-bottom: 15px;
    }

    button.cc-btn-submit {
        width: 100%;
    }

    .cc-btn-dropdown {
        height: auto;
    }

    span#guest-count {
        padding: 10px 5px;
    }
}
          .cc-container {
              margin: 0 auto;
              padding: 20px;
              max-width: 900px;
              background-color: #f8f8f8;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

          }

@media (min-width: 768px) {
    .cc-form-group,
    .cc-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
        .cc-container {
            display: flex;
            justify-content: center;
        }
}


 .custom-multiselect-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-button {
    padding-left: 15px;
    height: 50px;
    background-color: white;
    border: 1px solid #ccc;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    min-width: 190px;
}

.dropdown-content label {
    padding: 8px;
    display: block;
    margin: 0;
        color: #000;
}

.dropdown-content label:hover {
    background-color: #f1f1f1;
}

.datepicker {
    z-index: 1000 !important;
}

/* Style for the datepicker container */
.datepicker-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    margin-top: 2px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Table styles */
.datepicker table {
    width: 100%;
    margin: 0;
    user-select: none;
}

/* Cell styles */
.datepicker table tr td,
.datepicker table tr th {
    text-align: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    color: #000; /* Default color */
}

/* Hover and focus styles */
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: #eee;
    color: #000;
}

/* Disabled, old and new date styles */
.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: #999;
    cursor: not-allowed;
    background: none;
}

/* Active date styles */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: #007bff;
    color: #fff;
}

/* Today's date styles */
.datepicker table tr td.today {
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
}

.datepicker table tr td.today:hover {
    background-color: #0056b3;
    color: #fff;
}

/* Navigation styles (arrows and month/year) */
.datepicker .datepicker-days .prev,
.datepicker .datepicker-days .next,
.datepicker .datepicker-days .datepicker-switch {
    color: #000; /* Set color to black or any desired color */
    font-weight: bold;
}

/* Style the month and year dropdowns */
.datepicker .datepicker-months .month,
.datepicker .datepicker-years .year {
    color: #000; /* Set color to black or any desired color */
}

/* Style the day headers (Sun, Mon, etc.) */
.datepicker table tr th {
    color: #000; /* Set color to black or any desired color */
}

Building Your Own Search Results Page

To create a custom search results page, follow these steps:

1. Add the Following Code:

Insert the following code between the <HEAD></HEAD> tags of the page where you wish to display the search results. Ensure that the script is also placed in an isolated JavaScript file for better organization and maintenance.

<script>
    (function () {

      var ipro_search_page = 'https://www.yourdomain.com/search/';

      function setWidget(params) {
      var content = '<iframe id="ipro_search_result" src="' + ipro_search_page
      + '?nights=' + arguments[0]
      + '&amp;checkin=' + arguments[1]
      + '&amp;checkout=' + arguments[2]
      + '&amp;location=' + arguments[3]
      + '&amp;adults=' + arguments[4]
      + '&amp;children=' + arguments[5]
      + '&amp;infants=' + arguments[6]
      + '&amp;attrs=' + arguments[7]
      + '" style="width: 100%; border: none;" frameborder="0" scrolling="no" seamless="seamless" onload="hideloading"></iframe>';

      if (window.jQuery) {
      jQuery('#wd_id').html(content);
      } else {
        document.getElementById('wd_id').innerHTML = content;
        }
      }


      var queryParams = {}, args = location.search.substr(1).split(/&amp;/);
      for (var i = 0; i < args.length; ++i) {
      var tmp = args[i].split(/=/);
      if (tmp[0] != "") {
      var n = decodeURIComponent(tmp[0]);
      var v = decodeURIComponent(tmp.slice(1).join("").replace("+", " "));
      if (queryParams[n]) { v = v + ',' + queryParams[n]; }
      queryParams[n] = v;
      }
      }


      function getQuery(key) {
      var val = queryParams[key];
      if (val) {
      return val;
      } else {
      return '';
      }
      }


      function onloadSetWidget() {
        setWidget(getQuery('nights'), getQuery('checkin'), getQuery('checkout'), getQuery('location_id'), getQuery('adults'), getQuery('children'), getQuery('infants'), getQuery('attrs'));
      }
      if (window.jQuery) {
      jQuery(document).ready(onloadSetWidget);
      } else {
      if (window.attachEvent) {
      window.attachEvent("onload", onloadSetWidget);
      } else if (window.addEventListener) {
      window.addEventListener("load", onloadSetWidget, false);
      }
      }


      function hideloading() {
      var loadingElem = document.getElementById('ipro_search_loading');
      if (loadingElem) {
      loadingElem.style.display = "none";
      }
      }


      function adjustIframe(e) {
      var parts = (e.data + '').split('|||');
      if (parts.length !== 2) { return; }
      var url = parts[0] || '', height = parts[1], iframe;
      //
      var iframes = document.getElementsByTagName('iframe');
      for (var i = 0; i < iframes.length; i++) {
      var elem = iframes[i], src = (elem.src || '');
      if (src.toLowerCase().replace(/\//g, '') == url.toLowerCase().replace(/\//g, '')) {
      iframe = elem;
      break;
      }
      }
      //
      if (iframe) {
      if (window.jQuery) {
      jQuery(iframe).css({
      width: '100%',
      height: height + 'px'
      })
      .removeAttr('width')
      .removeAttr('height')
      .attr('frameborder', '0')
      .attr('scrolling', 'no')
      .attr('seamless', 'seamless');
      } else {
      iframe.style.width = '100%';
      iframe.style.height = height + 'px';
      iframe.removeAttribute('width');
      iframe.removeAttribute('height');
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('scrolling', 'no');
      iframe.setAttribute('seamless', 'seamless');
      }
      }
      }


      // Create IE + others compatible event handler
      var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
      var eventer = window[eventMethod];
      var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

      // Listen to message from child window
      eventer(messageEvent, function (e) {
      adjustIframe(e);
      hideloading();
      }, false);

    }());


    </script>

2. Adjusting iFrame Size Automatically:

The script will automatically adjust the size of the iframe based on the number of properties displayed. This allows you to use the iPRO Search Form on this page, providing greater flexibility with your filters.

3. Update the URL to match the iPRO Search Results Page

Please update the www.mydomain.com to the domain used for the iPRO Booking System i.e booking.mydomain.com/search or secure.mydomain.com/search

By implementing this, you can customise the search results page to better fit your needs and enhance the user experience with flexible filtering options provided by the iPRO Search Form.

Example of the search results page

Integration of iPRO Search Results on Your New Page

To display the search results on your new web page, you'll need to include the following snippet of code where you want the search results to appear. This assumes that your search form is correctly configured to submit to the appropriate URL where your search results will be fetched and displayed.

<div id="wd_id"></div>

Here is a complete example that integrates the search form with the search results section.

Search Results Page

This search results page has a custom search form and the switch form within iPRO is disabled

Search Results Page

This search results page, utilising the iPRO Filter, which is controlled within the iPRO CMS

Was this article helpful?

Search Website Integration

How to Integrate the iPRO Search Widget With Your Website

Introduction

Custom Scripts Added in <HEAD> Section

Custom Scripts Added to Footer

Adjusting the Start Date for Search Check In

Example Configuration

Implementation

Adding the Search Form to Your Homepage

Steps to Add Locations to Your Search Form

Example

Adding Filters to Your Search Form

Steps to Add Filters

2. Add Filters

Example

Sample Implementation

Customization

Default Search Form Code

Important Notes

Adding the Custom Style Sheet to Your Website

Building Your Own Search Results Page

Example of the search results page

Integration of iPRO Search Results on Your New Page

Full Example of Search Form and Results Integration

Homepage Search Form

Search Results Page

Search Results Page