Iframe Resizing

This page explains how to use the iFrame Resizer 

Requires: Ability to upload a file and add code to the html of your web site

1 Introduction

This is a third party code project which can be installed on your booking page and your web site to automatically resize the booking page iframe so it shows without using scroll bars.

Beds24 can not support or answer questions about this code, for support please refer to the developer site: https://github.com/davidjbradshaw/iframe-resizer

2 Beds24.com

Add the following to the menu SETTINGS -> BOOKING PAGE -> DEVELOPER "Insert in HTML head"

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

If you want to use a more recent version, you can host the file externally and include it with a full URL, make sure to use https:// to avoid insecure content warnings.

3 Your web page

• Download the iframeResizer.contentWindow.min.js file from the developer site or from https://beds24.com/include/iframeresizer/3.5.3/iframeResizer.min.js
• Remove any height parameter from your iframe and add the script after the iframe, if necessary change the src path to the location of your iframeResizer.min.js file. If you prefer, you can set a fixed iframe width in pixels rather than a percentage.
• Upload the file to your web space

Refer to the developers web site for a full set of options, instructions and problem solving.

Make sure to use the same version number as the iframeResizer.contentWindow.min.js which has been included on the booking page. (in this example 3.5.3)

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

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