Jump to navigation Jump to search

Make Your Own Booking Widget

117 bytes added, 12:24, 9 September 2020
no edit summary
<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>
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> '''Requires: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.
A basic HTML FORM can be created like this
<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.
<select name='fdate_date'>
<option value='1'>1</option>
We can add selectors for the length of stay and number of guests as follows
<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='' style='margin:0; padding:0;'><span style='padding-right: 10px; display: inline-block;'><a style='color: #2f2f2f;text-decoration:none;' target='_blank' href=''></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:
You need to define:

Navigation menu