Difference between revisions of "Embedded Iframe"

From Beds24 Wiki
Jump to navigation Jump to search
 
(32 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
[[Category:Widgets]]
 
[[Category:Widgets]]
 
[[Category:Troubleshooting]]
 
[[Category:Troubleshooting]]
<div class="heading">Embedded Iframe</div>
+
<div class="heading">iFrame Generator</div>
  This page is about the menu {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > EMBEDDED IFRAME and explains how to embed the booking page into a web site.  
+
  This page is about the menu {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > iFrame GENERATOR and explains how to embed the booking page into a web site.  
=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.  
+
<span style="color: #f3e504; font-size: 150%;" >{{#fas:lightbulb}} </span>  Using iFrames are convenient but may have a sub optimal usability experience. Consider opening the booking page in a new tab instead of embedding it in an iFrame.
 +
 
 +
=Using an iFrame=
 +
Using iFrames are convenient but may have a sub optimal usability experience.
 +
 
 +
Consider opening the booking page in a new tab instead of embedding it in an iFrame.
 +
 
 +
If you want to use an iFrame set the your parameters in the iFrame Generator then click on "Get Code". Paste this code into the source code of your website.  
  
 
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> 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.  
 
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> 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.  
 +
 +
==How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page==
 +
If you do want to use an iFrame, our booking widgets can pass dates to it by first opening the booking page directly in the browser and immediately redirecting to the page with the same booking page embedded in an iFrame. This is generally invisible to the visitor and allows setting a cookie to create a session and pass data from one to the other.
 +
 +
In recent times browser security and privacy concerns have led to more blocking of third party cookies which can also block our ability to pass data from the widget to the iFrame.
 +
 +
Consider opening the booking page in a new tab instead of embedding it in an iFrame.
 +
 +
If you do want to use an iFrame you can use following method to overcome the issue. This solution passes the widget data directly to the page holding the iFrame and relies on a special script installed on the page to pass the parameters to the iFrame. The iFrame then loads the booking page with the data from the widget.
 +
 +
This avoids the use of cookies to pass the data and should not be blocked by security or privacy settings.
 +
 +
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}}  </span>The solution requires that your website can have additional parameters added to your page URL without affecting their ability to load.
 +
 +
<span style="color:#019cde; font-size: 150%;“ >{{#fas:info-circle}}  </span>  The principle here is to open your URL containing the iFrame directly with the booking page parameters added to your URL after a ?. The supplied script installed on your page will pass these URL parameters through to the iFrame which will apply them to the booking page within the iFrame.
 +
 +
'''Step 1: Customize the widget'''
 +
 +
Go to {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS
 +
*Set the value of the “formAction” parameter to be the full URL of the page containing the iFrame. This will cause the booking widget to take the visitor directly to the page with the iFrame and will add the data from the booking widget to the URL as additional parameters
 +
*Customize the widget according to your requirements
 +
*Make sure the  "Redirect URL"  field is blank
 +
*SAVE
 +
 +
'''Step 2: Install the widget on your website'''
 +
*Click on "Get Code"
 +
*Copy the code and paste into the HTML of your website where you want show the widget
 +
 +
'''Step 3: Customize the  iFrame'''
 +
 +
Go to {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > EMBEDDED iFrame and set
 +
*"Opening Checkin Date" = Default
 +
*"Length of Stay " = Default
 +
*"Length of Stay" = Default
 +
*SAVE
 +
 +
'''Step 4: Generate and modify the  iFrame snippet'''
 +
 +
*Click on "Get Code"
 +
*Copy the code
 +
*Change the element src to be called data-src and leave the URL the same. There should be no scr in the iFrame, the script will add it.
 +
 +
 +
 +
'''Step 5: Install the  iFrame and script on your website'''
 +
*Paste the modified code snipped into the HTML of your website where you want show the iFrame
 +
*Add the following script directly after the iFrame end tag </iFrame>
 +
 +
Example iframe:
 +
<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">
 +
<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki><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></nowiki></span></div>
 +
 +
 +
Script:
 +
<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">
 +
<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki>
 +
<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>
 +
</nowiki></span>
 +
</div>
  
 
=Wordpress=
 
=Wordpress=
Line 14: Line 82:
  
 
=Multiple Properties=
 
=Multiple Properties=
Set "Properties" = All to create a booking an Iframe Code for a multiple property booking page. The multiple property booking page.
+
Set "Properties" = All to create a booking an iFrame Code for a multiple property booking page. The multiple property booking page.
  
 
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.  
 
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:
+
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:
  
 
<code><nowiki> https://beds24.com/booking.php?propid=12341&redirect=https://www.mywebsite/propertyA</nowiki></code>
 
<code><nowiki> https://beds24.com/booking.php?propid=12341&redirect=https://www.mywebsite/propertyA</nowiki></code>
Line 52: Line 120:
  
 
=Developer Options=
 
=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.
+
Developers can create a custom landing page after the booking. The setting is  {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY 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 [[:category:developers|developer options]].
 
Visit this help page for more [[:category:developers|developer options]].
  
 
=Troubleshooting=
 
=Troubleshooting=
 +
== Available dates show as not available ==
 +
Most likely you have no prices for the guests selection Use the "Price Checker" to check what the problem might be.
 +
 +
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}}  </span> Updates that you have made in the CALENDAR are transferred immediately. For changes to settings that affect availability, such as the number of units in the units settings, the update can take up to 24 hours.
 
==Scrollbar ==
 
==Scrollbar ==
 
There are two possible reasons for a scrollbar to appear:
 
There are two possible reasons for a scrollbar to appear:
1. The Iframe has not enough height for the content. Raise the value in the <code>height</code> parameter in the booking. For example in this link the height is 1500 (height="1500"):
+
1. The iFrame has not enough height for the content. Raise the value in the <code>height</code> parameter in the booking. For example in this link the height is 1500 (height="1500"):
  
<code><nowiki><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></nowiki></code>
+
<code><nowiki><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></nowiki></code>
  
2. The container on your website which holds the Iframe does not have enough height.  
+
2. The container on your website which holds the iFrame does not have enough height.  
  
 
==Dates and/or numbers of guests do not transport from widget  ==
 
==Dates and/or numbers of guests do not transport from widget  ==
This happens when you specify the dates and/or number of guests in the URL. Remove the <code>numadult</code> and <code>advancedays</code> and parameters from the URL of the Iframe.
+
This happens when you specify the dates and/or number of guests in the URL. Remove the <code>numadult</code> and <code>advancedays</code> parameters from the URL of the iFrame.
  
==Scroll Iframe to the top ==
+
Also make sure that the widget has the same options guest selection as the booking page.
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:
+
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}}  </span> If you allow guests to book multiple rooms on your booking page the number of guests will never transport from the widget.
  
<code><nowiki><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></nowiki></code>
+
==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.  
  
*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.
+
Try adding onload="window.parent.parent.scrollTo(0,0)" to the iFrame. For example:
 +
 
 +
<code><nowiki><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></nowiki></code>
 +
 
 +
*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.
  
 
==Page is insecure==
 
==Page is insecure==
 
Most likely you have a link to an image with is not securely hosted.  
 
Most likely you have a link to an image with is not securely hosted.  
 
==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 <b>blank page</b>. [[Scroll_Iframe_to_the_top_of_the_page|Read this help document]] to learn about solutions for this problem.
 
  
 
==Display problems on mobile==
 
==Display problems on mobile==
 
If content is cut off you most likely have not enough width or height in the holding container. Increase either the  width and height or try using a smaller font size.
 
If content is cut off you most likely have not enough width or height in the holding container. Increase either the  width and height or try using a smaller font size.
  
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.
+
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.
 +
 
 +
==Google Map not showing==
 +
Make sure you have:
 +
*Entered your Google Maps API key in {{#fas:cog}} (SETTINGS)  > BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS
 +
*Allowed access from your URL with the API Key (needs to be set in Google Cloud Platform)
 +
*Activate the "Maps JavaScript API"  in Google (which is the one for embedding maps to websites)
 +
*Enabled billing in Google

Latest revision as of 07:10, 27 November 2023

iFrame Generator
This page is about the menu  (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS >  iFrame GENERATOR and explains how to embed the booking page into a web site. 

Using iFrames are convenient but may have a sub optimal usability experience. Consider opening the booking page in a new tab instead of embedding it in an iFrame.

1 Using an iFrame

Using iFrames are convenient but may have a sub optimal usability experience.

Consider opening the booking page in a new tab instead of embedding it in an iFrame.

If you want to use an iFrame 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.

1.1 How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page

If you do want to use an iFrame, our booking widgets can pass dates to it by first opening the booking page directly in the browser and immediately redirecting to the page with the same booking page embedded in an iFrame. This is generally invisible to the visitor and allows setting a cookie to create a session and pass data from one to the other.

In recent times browser security and privacy concerns have led to more blocking of third party cookies which can also block our ability to pass data from the widget to the iFrame.

Consider opening the booking page in a new tab instead of embedding it in an iFrame.

If you do want to use an iFrame you can use following method to overcome the issue. This solution passes the widget data directly to the page holding the iFrame and relies on a special script installed on the page to pass the parameters to the iFrame. The iFrame then loads the booking page with the data from the widget.

This avoids the use of cookies to pass the data and should not be blocked by security or privacy settings.

The solution requires that your website can have additional parameters added to your page URL without affecting their ability to load.

The principle here is to open your URL containing the iFrame directly with the booking page parameters added to your URL after a ?. The supplied script installed on your page will pass these URL parameters through to the iFrame which will apply them to the booking page within the iFrame.

Step 1: Customize the widget

Go to (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS

  • Set the value of the “formAction” parameter to be the full URL of the page containing the iFrame. This will cause the booking widget to take the visitor directly to the page with the iFrame and will add the data from the booking widget to the URL as additional parameters
  • Customize the widget according to your requirements
  • Make sure the "Redirect URL" field is blank
  • SAVE

Step 2: Install the widget on your website

  • Click on "Get Code"
  • Copy the code and paste into the HTML of your website where you want show the widget

Step 3: Customize the iFrame

Go to (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > EMBEDDED iFrame and set

  • "Opening Checkin Date" = Default
  • "Length of Stay " = Default
  • "Length of Stay" = Default
  • SAVE

Step 4: Generate and modify the iFrame snippet

  • Click on "Get Code"
  • Copy the code
  • Change the element src to be called data-src and leave the URL the same. There should be no scr in the iFrame, the script will add it.


Step 5: Install the iFrame and script on your website

  • Paste the modified code snipped into the HTML of your website where you want show the iFrame
  • Add the following script directly after the iFrame end tag </iFrame>

Example iframe:

<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:

<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>

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.

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 (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:

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

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:


Example:

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

propid=2035 is the id for your property

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

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


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.

Example:

[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 (SETTINGS) BOOKING ENGINE > PROPERTY 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 Available dates show as not available

Most likely you have no prices for the guests selection Use the "Price Checker" to check what the problem might be.

Updates that you have made in the CALENDAR are transferred immediately. For changes to settings that affect availability, such as the number of units in the units settings, the update can take up to 24 hours.

6.2 Scrollbar

There are two possible reasons for a scrollbar to appear: 1. The iFrame has not enough height for the content. Raise the value in the height parameter in the booking. For example in this link the height is 1500 (height="1500"):

<iFrame 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>

2. The container on your website which holds the iFrame does not have enough height.

6.3 Dates and/or numbers of guests do not transport from widget

This happens when you specify the dates and/or number of guests in the URL. Remove the numadult and advancedays parameters from the URL of the iFrame.

Also make sure that the widget has the same options guest selection as the booking page.

If you allow guests to book multiple rooms on your booking page the number of guests will never transport from the widget.

6.4 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.5 Page is insecure

Most likely you have a link to an image with is not securely hosted.

6.6 Display problems on mobile

If content is cut off you most likely have not enough width or height in the holding container. Increase either the width and height or try using a smaller font size.

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.

6.7 Google Map not showing

Make sure you have:

  • Entered your Google Maps API key in (SETTINGS) > BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS
  • Allowed access from your URL with the API Key (needs to be set in Google Cloud Platform)
  • Activate the "Maps JavaScript API" in Google (which is the one for embedding maps to websites)
  • Enabled billing in Google