Max supports the use of a custom booking widget. The simplest way to implement a booking widget is by adding a HTML form to your website. Upon submission, the customer will be taken to the second step of the booking process, with the form values being used in the search.
Request Method: POST
Variables (form fields):
ad_tt - Day of the month (01 to 31)ad_mm - Numeric representation of a month (01 to 12)ad_yyyy - A full numeric representation of a year (e.g.: 2014)lengthofstay - Number of nightspersons - Number of guestssubmit_widget1 - Must be present (any value)Target URL (form action):
https://book.maxbooking.com/index.php?id=<ID>&mod=Step1
Where <ID> is the id of your property.
Note: The following serves purely as an example and is provided "as is".
<form name="maxbooking-custom-widget" class="maxbooking-custom-widget" action="https://book.maxbooking.com/index.php?id=227&mod=Step1" method="post">
<div>
<label>Date:</label>
<select name="ad_tt" class="day-select">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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="ad_mm" class="month-select">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="ad_yyyy" class="year-select">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div>
<label>Nights:</label>
<select name="lengthofstay">
<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>
</select>
</div>
<div>
<label>Guests:</label>
<select name="persons">
<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>
</select>
</div>
<div>
<input type="submit" name="submit_widget1" value="Search"/>
</div>
</form>
Set widget style as needed.
form.maxbooking-custom-widget label {
display: inline-block;
width: 60px;
font-weight: bold;
}
This code will set the initial values of the date selects to the next day (current date + 1).
(function (document) {
'use strict';
var formatNumber = function(value) {
return value<10?"0"+value:value;
};
var setToDate = function(date) {
var form = document.forms["maxbooking-custom-widget"];
form.elements["ad_tt"].value = formatNumber(date.getDate());
form.elements["ad_mm"].value = formatNumber(date.getMonth()+1);
form.elements["ad_yyyy"].value = date.getFullYear();
};
var date = new Date();
setToDate(date);
}(document));
lang to the URL specifying the desired language. E.g.: https://book.maxbooking.com/index.php?id=227&mod=Step1&lang=de.
Only languages that are available through the standard language select are supported.