A redirect makes a legacy booking widget open the booking page embedded on your own website, instead of the secure Beds24 booking page in a new window. This method is no longer supported: set the URL in the widget designer in Settings > Booking Engine > Booking Widgets instead, see Embedded Iframe.
Table of Contents
- Create the landing page
- Add the redirect to the starting widget
- Set up the redirect in WordPress
- How the redirect works
Prerequisites: knowledge of HTML.
Create the landing page
Embed the booking page in an iframe on your landing page. Don't specify the number of guests or nights in the iframe src. You can generate iframe code in Settings > Booking Engine > Booking Widgets. Example:
<iframe src ="https://beds24.com/booking2.php?propid=2869&referer=BookingPage" width="960" height="2300" style="max-width:100%;border:none;overflow:auto;"><a href="https://beds24.com/booking2.php?propid=2869&referer=BookingPage" title="Book Now">Book Now</a></iframe>Add the redirect to the starting widget
Generate the code for the widget in Settings > Booking Engine > Booking Widgets, paste it into your HTML and add the redirect as below. Replace yourURL with the URL of your landing page.
Links
Add this to the URL (href):
&redirect=http://yourURLIf your URL contains & characters, URL-encode it first, for example with the URL decoder/encoder. To open the page in the same window, remove target="_blank" from the link.
Booking box, booking button, booking strip and other HTML forms
Add a hidden field between the <form> and </form> tags:
<input type="hidden" name="redirect" value="http://www.yoururl.com">To open the page in the same window, remove target='_blank' from the form tag. Example:
<div style="color: #2f2f2f; font-size:14px; width: 100%; padding-top: 5px; padding-bottom: 5px; text-align: center; background: #ffcc66;
.....
<input type='hidden' name='referer' value='BookingStrip'></span><input type="hidden" name="redirect" value="http://mylandingpage.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>Availability calendar
Add a hidden field between the <form> and </form> tags:
<input type="hidden" name="redirect" value="http://www.yoururl.com">Example:
<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&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 reservation online'><script type='text/javascript'>document.getElementById('beds24sub1431534625').style.display='none';</script></form></div>Set up the redirect in WordPress
With plugin version 2.03 or later, set this up in Settings > Beds24 in your WordPress backend. If you add a booking widget by pasting code, use the shortcode [beds24-landing] for your landing page. If you add widgets with shortcodes, use [beds24-embed]. See Wordpress.
How the redirect works
The redirect works on any page, on the same domain as the starting widget or a different one.
- The starting widget opens the booking page with the redirect parameter.
- The booking page stores the widget's information, such as check-in date and number of guests, in a session and immediately sends the guest back to the redirect page.
- The booking page in the iframe on the redirect page opens with the stored values.
Important notes
- Browser security settings stop the iframe from sending guests to secure payment. To take deposit payments, go to Settings > Booking Engine > Property Booking Page > Behaviour and set Open in new Window to On Secure Payment.