17,077
edits
Changes
Jump to navigation
Jump to search
no edit summary
[[Category:Booking_Page]]
[[Category:Widgets]]
[[Category:Troubleshooting]]
<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.
=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 ==
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.
==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.
