Changes

Jump to navigation Jump to search

Booking Widget opening Booking Page on Your Own Website

4,247 bytes added, 13:06, 9 September 2020
no edit summary
[[Category:How toLegacy_Widgets]][[Category:<div class="heading">Redirect Legacy Booking Widget to an Embedded Booking Page]]</div> This page explains how to redirect a booking widget to an embedded booking page. <div class="warning">{{#fas:exclamation-triangle}} This method is not supported any longer. You can set the URL using the widget designer in SETTINGS ->BOOKING ENGINE-> BOOKING WIDGETS </div>   [[Category<span style="color:Widgets]]#f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Requires:''' Knowledge of HTML
By default a booking widget opens your secure booking page in a new window. You can add a redirect so the widget opens an embedded booking page on your own website. You can also change the widget so it stays in the same window.
* '''1. Create the Starting Widgetlanding page''' Generate Include the code for booking page in an iFrame on your page. Make sure you are not specifying the number of guests or nights in the widget you want to us iFrame SRC.There are iFrame widgets available in SETTINGS -> BOOKING ENGINE->BOOKING WIDGETS. Example:   WIDGETS<nowiki><iframe src ="https://.beds24.com/booking2.php?propid=2869&amp;referer=BookingPage" width="960" height="2300" style="max-width:100%;border:none;overflow:auto;"><a href="https://beds24. Paste it into your html and add the following codecom/booking2.php?propid=2869&amp;referer=BookingPage" title="Book Now">Book Now</a></iframe>'''yourURL''' is your landing page URL on your web site. </nowiki>
 '''2. Create the Starting Widget''' Generate the code for the widget you want to us in SETTINGS ->BOOKING ENGINE-> BOOKING WIDGETS. Paste it into your html and add the following code. '''''yourURL''''' is your landing page URL on your web site which has your Beds24 booking page embedded.  ** '''Links'''
Add the following to the URL or HREF
&redirect=<nowiki>http://yourURL</nowiki>
** Booking Box and other HTML forms
Add a hidden parameter as follows between the <nowiki><form></nowiki> and <nowiki></form></nowiki> tags
If your URL contains & characters you will need to first url encode it with a tool like http://meyerweb.com/eric/tools/dencoder/  Remove the '''target="_blank" ''' value from the link if you want the new page to stay in the same window.  *'''Booking Box, Booking Button, Booking Strip and other HTML forms''' Add a hidden parameter as follows between the <nowiki><form></nowiki> and <nowiki></form></nowiki> tag <input type="hidden" name="redirect" value="http://www.yoururl.com">Remove the '''target='_blank' ''' from the form tag if you want the new page to open in the same window. Example:  <nowiki><div style="color: #2f2f2f; font-size:14px; width: 100%; padding-top: 5px; padding-bottom: 5px; text-align: center; background: #ffcc66; ..... <input type='hidden' name='redirectreferer' value='BookingStrip'><nowiki/span><input type="hidden" name="redirect" value="http://yourURLmylandingpage.com/"></form></div> <script type='text/javascript'>var dateNow = new Date();var dateFirst = new Date();dateFirst.setDate(dateFirst.getDate()+14);var numMonths = 24;var selectMonth = dateFirst.getMonth()+dateFirst.getYear()*12-dateNow.getMonth()-dateNow.getYear()*12;if (selectMonth < 0) {selectMonth=selectMonth+12;}var selectDay = dateFirst.getDate();var theList = document.getElementById('fdate944537_monthyear_propid10594');var theDayList = document.getElementById('fdate944537_date_propid10594');var len = theList.length;var i;for (i=len; i>=0; i--) {theList.options[i]=null;}var dateNow = new Date();var monthNow = dateNow.getMonth() + 1;var yearNow = dateNow.getFullYear();var monthName = new Array(12);monthName[0] = 'Jan';monthName[1] = 'Feb';monthName[2] = 'Mar';monthName[3] = 'Apr';monthName[4] = 'May';monthName[5] = 'Jun';monthName[6] = 'Jul';monthName[7] = 'Aug';monthName[8] = 'Sep';monthName[9] = 'Oct';monthName[10] = 'Nov';monthName[11] = 'Dec';var thisYear = yearNow;var thisMonth = monthNow;for (i=0; i<numMonths; i++) {if (thisMonth > 12) {thisMonth = 1;thisYear = thisYear + 1;}var thisMonthLead = thisMonth;if (thisMonth < 10) {thisMonthLead = '0' + thisMonth;}theList.options[i] = new Option(monthName[thisMonth-1]+' '+thisYear, thisYear+'-'+thisMonthLead);if (i == selectMonth) {theList.options[i].selected = true;}thisMonth = thisMonth + 1;}theDayList.options[selectDay-1].selected = true;</script></nowiki>  *'''Availability Calendar''' Add a parameter as follows between the <nowiki><form></nowiki> and <nowiki></form></nowiki>tags
* Create the landing page<nowiki><input type="hidden" name="redirect" value="http://www.yoururl.com"></nowiki>
** WordpressYou will will need to adjust the SETTINGS -> Beds24 in your WordPress backend.This requires plugin version 1.3 or greater.Set the default number of nights and adults to '''not specified''' so they can be set by the incoming redirect.Example:
** Your own pageThis will work on any page hosted on the same or <nowiki><div style="width:auto; padding:0; margin:0;"><form id='ap00004154' style='display:inline;' method='GET' target='_blank' action='https://beds24.com/booking.php'><input type="hidden" name="redirect" value="http://www.yoururl.com"><script type='text/javascript' src='https://beds24.com/availcal/cal.jsp?propid=2864&amp;width=200'></script><input type='hidden' name='propid' value='4154'><input type='hidden' name='fdate' value=''><input type='hidden' name='referer' value='Calendar'><input id='beds24sub1431534625' type='submit' STYLE='width:200px' value='Check Availability' title='Click to check availability and make a different domain as the Starting Widgetreservation online'><script type='text/javascript'>document.getElementById('beds24sub1431534625').style.display='none';</script></form></div></nowiki>Include the booking page '''Wordpress''' If you are using Wordpress you can set this up directly SETTINGS -> Beds24 in an iFrame on your pageWordPress backend (plugin version 2.03 or greater). Make sure In case you are not specifying the number of guests or nights enter a booking widget pasting in code use the iFrame SRCshort code [beds24-landing] for your landing page.There are iFrame If you use shortcodes to add widgets available in the Booking Widgets menus in the control paneluse [beds24-embed].  '''How it works'''
This will work on any page hosted on the same or a different domain as the starting widget.
* How it works
The Starting Widget opens the booking page with the redirect parameter.
 
The redirect parameter causes the booking page to store the included information such as checkin date and number of guests in a session and then immediately redirects the user back to the page specified with the redirect parameter.
 
If the booking page is included in an iFrame on the redirect page it will open with the values from the Starting Widget stored in the session.
 
The Iframe cannot redirect the user to secure payment due to the security settings in browsers. If you want to take deposit payments go to SETTINGS -> BOOKING ENGINE -> BOOKING PAGE->BEHAVIOUR and set "Open in new Window" to "On Secure Payment".

Navigation menu