Make Your Own Booking Widget: Difference between revisions

Jump to navigation Jump to search
← Older edit
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 3: Line 3:
[[Category:How to]]
[[Category:How to]]
[[Category:Developers]]
[[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__
__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 ==
== Introduction ==
Making your own booking widget is not hard. It only involves opening the booking page and optionally passing some information to it.  
Making your own booking widget is not hard. It only involves opening the booking page and optionally passing some information to it.  
Line 12: Line 16:
Common ways to open the booking page are using an HTML <A> link or using a <FORM> with selectors and inputs.
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 and CSS, that is completely up to you to create any style you need.
We will only focus on the technical aspects of getting the form to submit information, we will not show any styling, labels, 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.
Modify to suit and paste the samples into your web page.
Line 22: Line 26:
A basic HTML FORM can be created like this
A basic HTML FORM can be created like this


  <FORM METHOD="POST" ACTION="https://www.beds24.com/booking2.php">
  <FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
  <input type="hidden" name="propid" value="2035">
  <input type="hidden" name="propid" value="2035">
  <input type="submit" value="Book Now">
  <input type="submit" value="Book Now">
Line 40: Line 44:
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.
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">
  <FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
  <select name='fdate_date'>
  <select name='fdate_date'>
  <option value='1'>1</option>
  <option value='1'>1</option>
Line 109: Line 113:
We can add selectors for the length of stay and number of guests as follows
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">
  <FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
  <select name='fdate_date'>
  <select name='fdate_date'>
  <option value='1'>1</option>
  <option value='1'>1</option>
Line 241: Line 245:
4. Paste the code into the source code of your web site
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;'>
  <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://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://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_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;'>
  <select id='fdate550775_monthyear_propid3103' name='fdate_monthyear' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f;'>
Line 260: Line 264:
Create a URL like this:
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
https://beds24.com/booking2.php?propid=13434&checkin_hide=2016-11-24&numnight=2&numadult=1&br1-32906=Book


You need to define:
You need to define:
Line 276: Line 280:
== Redirect to your own property landing page ==
== Redirect to your own property landing page ==


You can do this with the menu Settings  > Properties  > Link
You can do this with the menu SETTINGS->BOOKING ENGINE->BEHAVIOUR.


Set "Booking Redirect" = Immediately
Set "Booking Redirect" = Immediately


Set "Booking Redirect Url" = your landing page for the property. The landing page can contain an iframe with the property booking page.
Set "Booking Redirect Url" = your landing page for the property. The landing page can contain 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.
Retrieved from "https://wiki.beds24.com/index.php/Make_Your_Own_Booking_Widget"