Custom Booking Widget

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 nights
  • persons - Number of guests
  • submit_widget1 - Must be present (any value)

Target URL (form action):<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=";mod=Step1" method="post">
        <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 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 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 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 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>
        <input type="submit" name="submit_widget1" value="Search"/>


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();

Additional Notes

  • The the maximum number of nights and the maximum number of guests must correspond to your settings in the Max admin centre.
  • Max automatically detects customer language based on their browser settings and uses it if available. If you want to force a specific language for the frontend, you can select add a new parameter lang to the URL specifying the desired language. E.g.: Only languages that are available through the standard language select are supported.


  • We do not provide technical support for implementing custom widgets.
  • Although we try to keep the frontend compatible with older versions when making updates, we provide no future compatibility guarantee for custom widgets. It is the developer's responsibility to follow any announcements and implement any changes.