Embedded Iframe

From Beds24 Wiki
Revision as of 16:45, 15 May 2020 by Annette (talk | contribs) (Annette moved page Booking Engine Embedded Iframe to Embedded Iframe without leaving a redirect)
Jump to navigation Jump to search
Embedded Iframe
This page is about the menu  (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > EMBEDDED IFRAME and explains how to embed the booking page into a web site. 

1 Generate Code Snippet

Set the your parameters in the Iframe Generator then click on "Get Code". Paste this code into the source code of your website.

Do not change the default settings for "Opening Checkin Date" "Length of Stay" and "Number of Guests" if you want to redirect from a widget to an embedded booking page.

2 Wordpress

If you use Wordpress you can use our Wordpress plugin or paste the code snippet in "text" mode.

3 Multiple Properties

Set "Properties" = All to create a booking an Iframe Code for a multiple property booking page. The multiple property booking page.

The when a guest clicks on "Book" for one of the listed properties they will be taken to the property booking page where they can book.

If you you have embedded property booking pages as well and want to redirect the guest to this page go to {#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING PAGE > BEHAVIOUR and set "Booking Redirect" = "Multiple Property Only" and enter the URL of the property booking page followed by the redirect destination in "Booking Redirect Url" like this:


4 Booking Page for Individual Rooms

You can create a booking page for an individual room by changing the property id in the URL to a room id.

Go to (SETTINGS) PROPERTIES > ROOMS, open the room then copy the room id. Then:



propid=2035 is the id for your property

roomid=3561 is the id for the room you want to make a booking page for.


You can use the same method to create a booking widget for a room. Search the code for propid and change to roomid search for the propid number and exchange for the roomid number.

If you use the widget designer to create a widget you have the option to select an individual room in the designer.

If you are using Wordpress you can set the propid or roomid in the short code to define which booking page the widget opens.


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

create an embedded booking page for room 3561. For more information please also see the instructions in the plugin. To access them go to SETTINGS in your Wordpress backend then click on Beds24 and go to "Booking Widgets".

5 Developer Options

Developers can create a custom landing page after the booking. The setting is {#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING PAGE > BEHAVIOUR "Booking Return URL". Information about the booking is passed to your page as URL parameters which you could extract and display on your page.

Visit this help page for more developer options.

6 Troubleshooting

6.1 Scroll Iframe to the top

When a long page inside an Iframe changes to a shorter page, the guest viewing the page might be left at the bottom looking at what appears to be a blank page. Possibilities to access and control the Iframe from outside (your website) are limited.

Try adding onload="window.parent.parent.scrollTo(0,0)" to the Iframe. For example:

<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&numdisplayed=5&numnight=1&numadult=2-1&referer=iframe/" height="1500" width="800"></iframe>

  • Reduce the height of the embedded booking page or the Iframe. Keeping the Iframe small and allowing scroll bars to navigate inside it can work well.

6.2 Bottom of the page is blank

When a long page inside an Iframe changes to a shorter page, the guest viewing the page might be left at the bottom looking at what appears to be a blank page. Read this help document to learn about solutions for this problem.

6.3 Display problems on mobile

Iframes on mobile devices are problematic. Make sure you have following code in the <head>: <meta name="viewport" content="width=device-width, initial-scale=1">. If you use the booking page in an Iframe we recommend you set up a special mobile page for the page where you have embedded the Iframe which opens the booking page in a new page instead of an Iframe.