Changes

Jump to navigation Jump to search

Embedded Iframe

94 bytes added, 08:20, 7 June 2022
<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.
 
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'''
'''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
Example:
<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> '''Step 45: 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:
<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>
 
 
<script>
<nowiki>
var addUrlParamsToiFrameSrcs addUrlParamsToIframeSrcs = function () { const validParameters = ["checkin","checkout","numnight","numadult","numchild","ownerid","propid","roomid","referer","redirect","lang","group","nogroup","category1","category2","category3","category4", "customParameter"]; const iFrameAttrIdentifier = "ouriFrame"; 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 iframes = document.getElementsByTagName("iFrameiframe"); for (let iFrame iframe of iFramesiframes) { if (iFrame.getAttribute(iFrameAttrIdentifier) !== null) { let iFrameSrc iframeSrc = iFrameiframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iFrameSrciframeSrc.includes("?")) { iFrameSrc iframeSrc += "?"; } iFrameSrc iframeSrc += parametersString; iFrameiframe.setAttribute("src", iFrameSrciframeSrc) } }}addUrlParamsToiFrameSrcs; addUrlParamsToIframeSrcs();
</nowiki>
</script>
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:
<code><nowiki> https://beds24.com/booking.php?propid=12341&redirect=https://www.mywebsite/propertyA</nowiki></code>
2,819

edits

Navigation menu