Changes

Jump to navigation Jump to search

Make Your Own Booking Widget

384 bytes added, 12:24, 9 September 2020
no edit summary
[[Category:Developers]]
[[Category:Widgets]]
<div class="heading">Create a custom booking widget</div>
This page explains how to create your own booking widget
 
<div class="warning">{{#fas:exclamation-triangle}} Check the options the widget designer {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS first. </div>
__TOC__
''This page explains how to create your own booking widget''
'''Requires:''' Basic understanding of HTML
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Required Skills''': Basic understanding of HTML
== Introduction ==
Making your own booking widget is not hard. It only involves opening the booking page and optionally passing some information to it.
Common ways to open the booking page are using an HTML <A> link or using a <FORM> with selectors and inputs.
We will only focus on the technical aspects of getting the form to submit information, we will not show any styling, labels, javascript Javascript and CSS, that is completely up to you to create any style you need.
Modify to suit and paste the samples into your web page.
A basic HTML FORM can be created like this
<FORM METHOD="POST" ACTION="https://www.beds24.com/booking2.php">
<input type="hidden" name="propid" value="2035">
<input type="submit" value="Book Now">
It is possible using jQuery or javascript to keep the select options up-to-date with the current month/year but that is beyond the scope of this How To.
<FORM METHOD="POST" ACTION="https://www.beds24.com/booking2.php">
<select name='fdate_date'>
<option value='1'>1</option>
We can add selectors for the length of stay and number of guests as follows
<FORM METHOD="POST" ACTION="https://www.beds24.com/booking2.php">
<select name='fdate_date'>
<option value='1'>1</option>
4. Paste the code into the source code of your web site
<nowiki><div style="color: #2f2f2f; font-size:14px; width: 100%; padding-top: 5px; padding-bottom: 5px; text-align: center; background: #339900; background: -moz-linear-gradient(top, #66cc00, #339900); background: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#339900)); background: -webkit-linear-gradient(top, #66cc00, #339900); background: -o-linear-gradient(top, #66cc00, #339900); background: linear-gradient(top, #66cc00, #339900); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#339900');" class="b24bookingstrip"><form method='GET' target='_blank' action='https://www.beds24.com/booking.php' style='margin:0; padding:0;'><span style='padding-right: 10px; display: inline-block;'><a style='color: #2f2f2f;text-decoration:none;' target='_blank' href='https://www.beds24.com/booking.php?propid=3103&page=getdates&type=0&referer=BookingStrip'></a></span><span style='display: inline-block; padding-right: 10px;'>
<select id='fdate550775_date_propid3103' name='fdate_date' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f'<option value='1'>1</option><br></select>
<select id='fdate550775_monthyear_propid3103' name='fdate_monthyear' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f;'>
Create a URL like this:
https://www.beds24.com/booking2.php?propid=13434&checkin_hide=2016-11-24&numnight=2&numadult=1&br1-32906=Book
You need to define:
== Redirect to your own property landing page ==
You can do this with the menu Settings SETTINGS-> Properties BOOKING ENGINE-> Link BEHAVIOUR.
Set "Booking Redirect" = Immediately
Set "Booking Redirect Url" = your landing page for the property. The landing page can contain an can iframe with the property booking page. If you do have an Iframe embedded make sure you do not set the number of nights or people in the URL.

Navigation menu