Embedded Iframe: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 3: | Line 3: | ||
[[Category:Widgets]] | [[Category:Widgets]] | ||
[[Category:Troubleshooting]] | [[Category:Troubleshooting]] | ||
<div class="heading"> | <div class="heading">iFrame Generator</div> | ||
This page is about the menu {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > | 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. | ||
<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. | <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= | |||
Ising 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. | ||
| Line 29: | Line 34: | ||
'''Step 1: Customize the widget''' | '''Step 1: Customize the widget''' | ||
Go to {#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS | 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 | *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 | *Customize the widget according to your requirements | ||
| Line 41: | Line 46: | ||
'''Step 3: Customize the iFrame''' | '''Step 3: Customize the iFrame''' | ||
Go to {#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > EMBEDDED | Go to {#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > EMBEDDED iFrame and set | ||
*"Opening Checkin Date" = Default | *"Opening Checkin Date" = Default | ||
*"Length of Stay " = Default | *"Length of Stay " = Default | ||
| Line 52: | Line 57: | ||
*Copy the code | *Copy the code | ||
*Change the element '''src''' to be called '''data-src''' | *Change the element '''src''' to be called '''data-src''' | ||
*Add the new elements ''' | *Add the new elements ''' ouriFrame''' and "src=””" as follows so the iFrame starts like '''<iFrame ouriFrame src="" the new data-src element should follow src=”” after a space. | ||
Example: | Example: | ||
<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki>< | <span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki><iFrame ouriFrame src=”” 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></nowiki></span> | ||
'''Step 4: Install the iFrame on your website''' | '''Step 4: Install the iFrame on your website''' | ||
*Paste the modified code snipped into the HTML of your website where you want show the iFrame | *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 </ | *Add the following script directly after the iFrame end tag </iFrame> | ||
<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"> | <div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"> | ||
<script> | <script> | ||
<nowiki> | <nowiki> | ||
var | var addUrlParamsToiFrameSrcs = function () { | ||
const validParameters = ["checkin","checkout","numnight","numadult","numchild","ownerid","propid","roomid","referer","redirect","lang","group","nogroup","category1","category2","category3","category4", "customParameter"]; | const validParameters = ["checkin","checkout","numnight","numadult","numchild","ownerid","propid","roomid","referer","redirect","lang","group","nogroup","category1","category2","category3","category4", "customParameter"]; | ||
const | const iFrameAttrIdentifier = "ouriFrame"; | ||
const currentUrl = new URL(window.location.href); | const currentUrl = new URL(window.location.href); | ||
let parametersString = ""; | let parametersString = ""; | ||
| Line 76: | Line 81: | ||
} | } | ||
}); | }); | ||
const | const iFrames = document.getElementsByTagName("iFrame"); | ||
for (let | for (let iFrame of iFrames) { | ||
if ( | if (iFrame.getAttribute(iFrameAttrIdentifier) !== null) { | ||
let | let iFrameSrc = iFrame.getAttribute("data-src"); | ||
if (! | if (!iFrameSrc.includes("?")) { | ||
iFrameSrc += "?"; | |||
} | } | ||
iFrameSrc += parametersString; | |||
iFrame.setAttribute("src", iFrameSrc) | |||
} | } | ||
} | } | ||
} | } | ||
addUrlParamsToiFrameSrcs(); | |||
</nowiki> | </nowiki> | ||
</script> | </script> | ||
| Line 97: | Line 102: | ||
=Multiple Properties= | =Multiple Properties= | ||
Set "Properties" = All to create a booking an | 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. | ||
| Line 146: | Line 151: | ||
==Scrollbar == | ==Scrollbar == | ||
There are two possible reasons for a scrollbar to appear: | There are two possible reasons for a scrollbar to appear: | ||
1. The | 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>< | <code><nowiki><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></nowiki></code> | ||
2. The container on your website which holds the | 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> parameters from the URL of the | 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. | ||
Also make sure that the widget has the same options guest selection as the booking page. | Also make sure that the widget has the same options guest selection as the booking page. | ||
| Line 159: | Line 164: | ||
<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. | <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. | ||
==Scroll | ==Scroll iFrame to the top == | ||
When a long page inside an | 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 | Possibilities to access and control the iFrame from outside (your website) are limited. | ||
Try adding onload="window.parent.parent.scrollTo(0,0)" to the | Try adding onload="window.parent.parent.scrollTo(0,0)" to the iFrame. For example: | ||
<code><nowiki>< | <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&numdisplayed=5&numnight=1&numadult=2-1&referer=iFrame/" height="1500" width="800"></iFrame></nowiki></code> | ||
*Reduce the height of the embedded booking page or the | *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== | ||
| Line 173: | Line 178: | ||
==Bottom of the page is blank== | ==Bottom of the page is blank== | ||
When a long page inside an | 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. | |||
==Google Map not showing== | ==Google Map not showing== | ||