Make Your Own Booking Widget

You can build your own booking widget with a plain HTML link or form that opens your Beds24 booking page and passes information such as dates and guests to it. Check the options in the widget designer in Settings > Booking Engine > Booking Widgets first. It may already do what you need, see How to use Widgets.

Prerequisites: a basic understanding of HTML.

Table of Contents

  1. Create a booking form
  2. Collect check-in date, nights and guests
  3. Create a widget for specific dates
  4. Link to a preselected room and dates
  5. Redirect to your own property landing page

The examples cover only how the form submits information. Styling, labels, JavaScript and CSS are up to you. Change the samples to suit and paste them into your web page.

Create a booking form

A basic HTML form shows a Book Now button that opens the property with the given propid:

<FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
 <input type="hidden" name="propid" value="2035">
 <input type="submit" value="Book Now">
 </FORM>

Use ownerid instead to show all properties in an account, or roomid to show only one room.

Collect check-in date, nights and guests

This example adds standard HTML selectors for the check-in day, the month and year (fdate_date, fdate_monthyear), the number of nights (numnight) and the number of guests (numadult). You can send the check-in date with any of the date parameters, see Booking widget parameters. jQuery offers nicer date pickers, and JavaScript can keep the month and year options current. Replace the example months with current ones.

<FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
 <select name='fdate_date'>
 <option value='1'>1</option>
 <option value='2'>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
 <option value='5'>5</option>
 <option value='6'>6</option>
 <option value='7'>7</option>
 <option value='8'>8</option>
 <option value='9'>9</option>
 <option value='10'>10</option>
 <option value='11'>11</option>
 <option value='12'>12</option>
 <option value='13'>13</option>
 <option value='14'>14</option>
 <option value='15'>15</option>
 <option value='16'>16</option>
 <option value='17'>17</option>
 <option value='18'>18</option>
 <option value='19'>19</option>
 <option value='20'>20</option>
 <option value='21'>21</option> 
 <option value='22'>22</option>
 <option value='23'>23</option>
 <option value='24'>24</option>
 <option value='25'>25</option>
 <option value='26'>26</option>
 <option value='27'>27</option>
 <option value='28'>28</option>
 <option value='29'>29</option>
 <option value='30'>30</option>
 <option value='31'>31</option>
 </select>
 <select name='fdate_monthyear'>
 <option value='2026-08'>Aug 2026</option>
 <option value='2026-09'>Sep 2026</option>
 <option value='2026-10'>Oct 2026</option>
 <option value='2026-11'>Nov 2026</option>
 <option value='2026-12'>Dec 2026</option>
 <option value='2027-01'>Jan 2027</option>
 <option value='2027-02'>Feb 2027</option>
 <option value='2027-03'>Mar 2027</option>
 <option value='2027-04'>Apr 2027</option>
 <option value='2027-05'>May 2027</option>
 <option value='2027-06'>Jun 2027</option>
 <option value='2027-07'>Jul 2027</option>
 <option value='2027-08'>Aug 2027</option>
 <option value='2027-09'>Sep 2027</option>
 <option value='2027-10'>Oct 2027</option>
 <option value='2027-11'>Nov 2027</option>
 <option value='2027-12'>Dec 2027</option>
 <option value='2028-01'>Jan 2028</option>
 <option value='2028-02'>Feb 2028</option>
 <option value='2028-03'>Mar 2028</option>
 <option value='2028-04'>Apr 2028</option>
 <option value='2028-05'>May 2028</option>
 <option value='2028-06'>Jun 2028</option>
 <option value='2028-07'>Jul 2028</option>
 </select>
 <select name='numnight'>
 <option value='1' selected>1</option>
 <option value='2'>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
 <option value='5'>5</option>
 <option value='6'>6</option>
 <option value='7'>7</option>
 <option value='8'>8</option>
 <option value='9'>9</option>
 <option value='10'>10</option>
 <option value='11'>11</option>
 <option value='12'>12</option>
 <option value='13'>13</option>
 <option value='14'>14</option>
 <option value='15'>15</option>
 <option value='16'>16</option>
 <option value='17'>17</option>
 <option value='18'>18</option>
 <option value='19'>19</option>
 <option value='20'>20</option>
 <option value='21'>21</option>
 <option value='22'>22</option>
 <option value='23'>23</option>
 <option value='24'>24</option>
 <option value='25'>25</option>
 <option value='26'>26</option>
 <option value='27'>27</option>
 <option value='28'>28</option>
 <option value='29'>29</option>
 <option value='30'>30</option>
 <option value='31'>31</option>
 </select>
 <select name='numadult'>
 <option value='1'>1</option>
 <option value='2' selected>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
 <option value='5'>5</option>
 <option value='6'>6</option>
 <option value='7'>7</option>
 <option value='8'>8</option>
 </select>
 <input type="hidden" name="propid" value="2035">
 <input type="submit" value="Book Now">
 </FORM>

Create a widget for specific dates

Steps:

  1. Customise a widget in the widget designer, then generate the code.

    Customising the widget in the widget designer

    Generated widget code

  2. The code has three parts. Find the <script></script> part and delete it.

    Script part of the widget code to delete

  3. Change the options in the selectors so they only contain the dates you want to offer. The example below is a booking strip for 1 December, 3 nights. To apply special prices, replace the referer in the code (here referer=BookingStrip) with your own referer code.

    Selectors limited to the dates you want to offer

  4. Paste the code into your website's source code.
<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></select>
<select id='fdate550775_monthyear_propid3103' name='fdate_monthyear' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f;'>
<option value='2028-12'>Dec 2028</option>
</select></span>
<div style='display:inline;'><span style='display: inline-block; padding-right: 10px;'><select name='numnight' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f;'>
<option value='3'>3 Nights</option>
</select></span></div><span style='display: inline-block;'><input type='submit' name='subcheck' value='Book Now' style='font-size:inherit;color: #2f2f2f;'><input type='hidden' name='propid' value='3103'><input type='hidden' name='subgetdates' value='1'>
<input type='hidden' name='type' value='0'><input type='hidden' name='page' value='showprice'><input type='hidden' name='referer' value='BookingStrip'></span></form></div>

Expected result:

Booking strip for specific dates on a website

Link to a preselected room and dates

Create a URL like this:

https://beds24.com/booking2.php?propid=13434&checkin_hide=2028-11-24&numnight=2&numadult=1&br1-32906=Book

Define:

  • propid
  • checkin or checkin_hide (they use different date formats)
  • checkout, checkout_hide or numnight
  • numadult and/or numchild
  • br1-32906=Book, where br1 is offer 1 (br2 is offer 2, and so on) and 32906 is the room to book

Redirect to your own property landing page

Steps:

  1. Go to Settings > Booking Engine > Property Booking Page > Behaviour.
  2. Set Booking Redirect to Immediately.
  3. Set Booking Redirect Url to your landing page for the property.

Note: the landing page can hold an iframe with the property booking page. If it does, don't set the number of nights or guests in the iframe URL. See Embedded Iframe.

Related Articles

Related to

Was this article helpful?
0 out of 0 found this helpful

How to Contact us :