Iframe Resizing

iFrame Resizer automatically resizes the iframe that holds your booking page, so the page shows without scroll bars. It is a third-party code project that you install both on your booking page and on your website.

Prerequisites: you can upload a file to your web server and add code to your website's HTML.

Note: these steps are for iFrame Resizer version 4.2.10. There may be a newer version, see the iFrame Resizer project on GitHub. Beds24 can't support or answer questions about this code. For help, see the developer site.

Add the script to your booking page

In Settings > Booking Engine > Property Booking Page > Developer, add this to Insert in HTML head:

<script type="text/javascript" src="include/iframeresizer/4.2.10/iframeResizer.contentWindow.min.js"></script>

To use a more recent version, host the file externally and include it with a full URL. Use https:// to avoid insecure content warnings.

Add the script to your web page

Steps:

1. Download the iframeResizer.min.js file from the developer site or from the Beds24 copy of iframeResizer.min.js (4.2.10).
2. Upload the file to your web server, in the same directory as your web page.
3. Remove any height parameter from your booking page iframe:

   <iframe src="https://beds24.com/booking.php?propid=3103" width="100%" scrolling="no"></iframe>

4. Add the script after the iframe. If needed, change the src path to where you put iframeResizer.min.js:

   <script type="text/javascript" src="iframeResizer.min.js"></script>
   <script type="text/javascript">iFrameResize();</script>

Expected result: the booking page iframe grows and shrinks with its content, without scroll bars.

You can set a fixed iframe width in pixels instead of a percentage. This is a minimum setup. For all options, instructions and troubleshooting, see the developer site.

Important notes

• Use the same version of the files on your booking page and your web page (4.2.10 in this example).
• Some browsers have shown security warnings about cross-domain scripts with this solution. A proxy, so all scripts use the same domain, avoids this.

Related Articles

• Embedded Iframe
• How to use Developers options