Embedded Iframe: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
[[Category:Booking_Page]] | [[Category:Booking_Page]] | ||
[[Category:Widgets]] | [[Category:Widgets]] | ||
[[Category:Troubleshooting]] | |||
<div class="heading">Embedded Iframe</div> | <div class="heading">Embedded Iframe</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 > EMBEDDED IFRAME and explains how to embed the booking page into a web site. | ||
| Line 56: | Line 57: | ||
=Troubleshooting= | =Troubleshooting= | ||
==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 <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&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 Iframe does not have enough height. | |||
==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. | |||
==Scroll Iframe to the top == | ==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. | 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. | ||
| Line 70: | Line 82: | ||
==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. | |||
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. | ||