Booking Engine - How to embed an iframe on your website

1. Create a page on your website, where you want your booking page to appear. You have to be able to add HTML code or HTML code element to your page.
2. Go to Booking Engine> Booking Widgets> Iframe Generator and click on "Get Code"
   You should get something similar to this:

   <iframe src ="https://property.godo.is/booking2.php?propid=74220&amp;referer=iframe" width="800" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://property.godo.is/booking2.php?propid=74220&amp;referer=iframe" title="Book Now">Book Now</a></p></iframe>

   
   
3. Copy the generated code and past it into your HTML code element/ editor on your website.

Advanced settings:

• If you want have the booking page as wide as is the browser window, change the width to 100%.
  Example:

  <iframe src ="https://property.godo.is/booking2.php?propid=74220&amp;referer=iframe" width="100%" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://property.godo.is/booking2.php?propid=74220&amp;referer=iframe" title="Book Now">Book Now</a></p></iframe>

• If you want to get rid of the vertical scrollbar, you will need to set the height of the iframe to be higher than the content inside of the iframe - this will depend on the amount of rooms and rate that you have on your booking page. The height can only be given in pixels, percents do not work with height.
  Example:

  <iframe src ="https://property.godo.is/booking2.php?propid=74220&amp;referer=iframe" width="800" height="5000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://property.godo.is/booking2.php?propid=74220&amp;referer=iframe" title="Book Now">Book Now</a></p></iframe>

Avoiding issues with date transfer from widget into embedded iframe

1. Create the widget
   - the formAction has to contain the url of the page containing the iframe
   - there is no redirect url
   - customize widget according to your needs and save it
2. Add widget on your website
   - click on "Get Code" and copy and paste it onto the page where you want to show the widget
3. Customize the iframe
   - go to (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > Iframe Generator
   - set "Opening Checkin Date" = Default
   - set "Length of Stay " = Default
   - save
4. Generate the iframe and modify it
   - click on "Get Code" and copy it
   - change the element src to data-src
   - add the following script right after the closing tag of the iframe </iframe>:
   

   <script> var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "redirect", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } }); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs(); </script>

   
   - whole example:
   

   <iFrame data-src="https://beds24.com/booking2.php?propid=12345&referer=iFrame" width="800" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://beds24.com/booking2.php?propid=12345&referer=iFrame" title="Book Now">Book Now</a></p></iFrame> <script> var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "redirect", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } }); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs(); </script>