Embedded Iframe

You can embed your booking page in your own website with an iframe, generated in Settings > Booking Engine > Booking Widgets > Iframe Generator. Iframes are convenient, but guests often get a better experience when the booking page opens in a new tab instead.

Quick Guide

  1. Go to Settings > Booking Engine > Booking Widgets > Iframe Generator.
  2. Set your parameters and click Get Code.
  3. Paste the code into your website's source code.

Table of Contents

  1. Embed the booking page
  2. Pass dates from a widget to the embedded booking page
  3. Embed a multiple-property booking page
  4. Create a booking page for one room
  5. Developer options
  6. Troubleshooting

Embed the booking page

Steps:

  1. Go to Settings > Booking Engine > Booking Widgets > Iframe Generator.
  2. Set your parameters.
  3. Click Get Code.
  4. Paste the code into your website's source code where the booking page should display.

Expected result: your booking page shows on your website.

Note: if a widget should redirect to this embedded booking page, don't change the default settings for Opening Checkin Date, Length of Stay and Number of Guests.

On WordPress, use the Beds24 WordPress plugin or paste the code snippet in Text mode. See Wordpress.

Pass dates from a widget to the embedded booking page

By default, a booking widget passes dates to an embedded booking page by opening the booking page in the browser and immediately redirecting to your page with the iframe. This sets a cookie so the data carries over, and the visitor usually doesn't notice. Browsers increasingly block third-party cookies, which can stop the data from reaching the iframe.

The method below avoids cookies. The widget opens your page with the booking page parameters added to your URL after a ?, and a script on your page passes them to the iframe.

Prerequisites: your website must still load its pages when extra parameters are added to the URL.

Steps:

  1. Go to Settings > Booking Engine > Booking Widgets and customise the widget:
    • Set the formAction parameter to the full URL of the page with the iframe.
    • Leave Redirect URL blank.
    • Click Save.
  2. Click Get Code and paste the widget code into your website's HTML where the widget should display.
  3. Go to Settings > Booking Engine > Booking Widgets > Embedded iFrame, set Opening Checkin Date, Length of Stay and Number of Guests to Default, and click Save.
  4. Click Get Code, copy the iframe code and rename its src attribute to data-src. Keep the URL the same. The iframe must have no src, the script adds it.
  5. Paste the changed iframe code into your website's HTML, and add the script below directly after the closing </iframe> tag.

Expected result: the dates and guests selected in the widget show in the embedded booking page.

Example iframe:

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

Script:

<script>
var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "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>

WordPress script:

<script>var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "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("src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs();</script>

Embed a multiple-property booking page

In the Iframe Generator, set Properties to All to create iframe code for a multiple-property booking page. When a guest clicks Book for a property, the property booking page opens.

If you also embedded property booking pages and want guests sent there, go to Settings > Booking Engine > Property Booking Page > Behaviour, set Booking Redirect to Multiple Property Only, and enter the property booking page URL followed by the redirect destination in Booking Redirect Url, like this:

https://beds24.com/booking.php?propid=12341&redirect=https://www.mywebsite/propertyA

Create a booking page for one room

Replace the property ID in the booking page URL with a room ID. Find the room ID in Settings > Properties > Rooms by opening the room. For example, if 2035 is your property ID and 3561 the room ID:

https://www.beds24.com/booking.php?propid=2035
https://www.beds24.com/booking.php?roomid=3561

The same works for a widget: in the widget code, change propid to roomid and the property number to the room number. The widget designer also lets you select a single room.

In WordPress, set propid or roomid in the shortcode. For example, this creates an embedded booking page for room 3561:

[beds24-landing roomid="3561"]
[beds24-embed roomid="3561"]

For more, see the plugin instructions in WordPress under Settings > Beds24 > Booking Widgets.

Developer options

Developers can send guests to a custom landing page after the booking with Booking Return URL in Settings > Booking Engine > Property Booking Page > Behaviour. Booking information is passed to your page as URL parameters, which you can read and show on your page. See How to use Developers options.

Troubleshooting

Issue Likely cause Resolution
Available dates show as not available No prices for the guest's selection Check with the Price Checker. Calendar changes apply immediately, but changes to settings that affect availability, such as the number of units, can take up to 24 hours.
A scroll bar shows The iframe, or the container on your website that holds it, isn't tall enough Raise the height value in the iframe code (see example 1 below), or give the container more height. See also Iframe Resizing.
Dates or number of guests don't carry over from the widget Dates or guests are set in the iframe URL, or the widget and booking page ask for guests differently Remove the numadult and advancedays parameters from the iframe URL, and give the widget the same guest selection options as the booking page. If guests can book several rooms, the number of guests never carries over.
Guest sees a blank page after moving from a long page to a short one The iframe stays scrolled down Add onload="window.parent.parent.scrollTo(0,0)" to the iframe (see example 2 below), or reduce the height of the iframe and let guests scroll inside it.
Browser says the page is insecure An image is linked from a non-secure (http) address Host the image securely and link it with https://.
Content is cut off on mobile The container is too narrow or too short Increase the width or height, or use a smaller font size. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the page's <head>. Consider a mobile page that opens the booking page in a new page instead of an iframe.
Google Map doesn't show Google Maps isn't fully set up Enter your Google Maps API key in Settings > Booking Engine > Property Booking Page > Developer, allow your URL for the key in Google Cloud Platform, activate the Maps JavaScript API and enable billing in Google.

Example 1, iframe with a height of 1500:

<iframe style="max-width: 100%; border: none; overflow: auto;" src="https://www.beds24.com/booking2.php?propid=3103&amp;numdisplayed=5&amp;numnight=1&amp;numadult=2-1&amp;referer=iFrame/" height="1500" width="800"></iframe>

Example 2, iframe that scrolls to the top on load:

<iframe onload="window.parent.parent.scrollTo(0,0)" style="max-width: 100%; border: none; overflow: auto;" src="https://www.beds24.com/booking2.php?propid=3103&amp;numdisplayed=5&amp;numnight=1&amp;numadult=2-1&amp;referer=iFrame/" height="1500" width="800"></iframe>

Related Articles

Related to

Was this article helpful?
0 out of 0 found this helpful

How to Contact us :