How to create your own widget


To create a custom widget you need to have widget id(w_id) and widget token(w_tkn) from freetobook. This is required to allow your custom widget to connect with freetobook. You can get this information once you are logged into your account on freetobook.

*Note:You need widget id and widget token from you default widget.

Widget Id

Default widget id can be found in Home>Widget section. Copy the id from the ID column of your default widget. In the example below, 2 is the default widget id.



Widget Token

Widget token needs to be extracted from the default widgets source code. Go to Home>Widget and click on view code button on your default widget. You can see source code for the selected widget. Copy your unique string value for attribute w_tkn(highlighted string in the picture below).


Demo

Following example shows how a very basic version of the form will look like.

<form action="https://portal.freetobook.com/reservations"> 
<input type="hidden" name="w_id" value="2">
<input type="hidden" name="w_tkn" value="Svldrn2liwPIMwJNkAoabA3Sxqmoz3XmcUBVvtyP8g7giPoHAJARqdjQAPq09">
<input type="submit" value="Book">
</form>

Data we accept from custom widget


We only accept the following data from the custom widget. Please note that if your form sends any other information it will be ignored by the system.

Check-in Date

You can filter the search results by passing check-in date through the custom widget. You can post check-in date using your widget in the following format.

field name: check_in_date 
format: YYYY-MM-DD (2018-01-01)

Please note that we only accept date in the format specified above. Dates sent with any other format will not work.

Demo

Following example shows how form will look and work with check-in date.

<form action="https://portal.freetobook.com/reservations"> 
<input type="hidden" name="w_id" value="2">
<input type="hidden" name="w_tkn" value="Svldrn2liwPIMwJNkAoabA3Sxqmoz3XmcUBVvtyP8g7giPoHAJARqdjQAPq09">
<input type="text" name="check_in_date" value="2018-12-01">
<input type="submit" value="Book">
</form>

Check-in Date


Stay Length

You can filter the search results by sending the length of stay. By default the stay length is set to 1. This can be changed by sending stay length in the following format.

field name: stay_length (int)

Please note that we do not accept check out date. If your form uses check out date selector, please calculate the stay length using check in and check out date and send it as stay length. Sending check out date will not filter the result for more than 1 night.

Demo

Following example shows how form will look and work will check in date and stay length.
<form action="https://portal.freetobook.com/reservations"> 
<input type="hidden" name="w_id" value="2">
<input type="hidden" name="w_tkn" value="Svldrn2liwPIMwJNkAoabA3Sxqmoz3XmcUBVvtyP8g7giPoHAJARqdjQAPq09">
<input type="text" name="check_in_date" value="2018-12-01">
<input type="text" name="stay_length" value="03">
<input type="submit" value="Book">
</form>

Check-in date Stay length

Sample Widget

This is a working example of the widget with datepicker. The widget allows the customer to select arrival and departure date and calculate the stay length from the dates. It sets the stay length in the hidden input element with name stay_length. When the form is submitted freetobook only checks for arrival/check-in date and stay length and ignores departure/check-out date.

You can copy the source code into your website and can further customise it to make it look like a part of your website. Please make sure that you replace [WIDGET_ID_HERE] and [WIDGET_TOKEN_HERE] to your default widget id and token.

Arrival
Departure




Source code for the sample widget


<div class="box">
    <style>
        .widget {
            background: #5ba4d4;
            padding-top: 30px;
            padding-bottom: 30px;
            padding-right: 30px;
            padding-left: 20px;
            width: 300px;
            border-radius: 2px;
        }

        .widget input {
            padding: 5px;
            border-radius: 2px;
            border: none;
            margin: 4px;
            width: 100%;
        }

        .check-availability {
            border: 2px solid white !important;
            background-color: transparent;
            color: white;
            font-weight: 600;
        }

        .datepicker-top-left, .datepicker-top-right{
            transition: none;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.min.js"></script>
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.min.css" rel="stylesheet">

    <div class="widget">
        <form target="_blank" action="https://portal.freetobook.com/reservations">
            <input type="hidden" name="w_id" value="[YOUR_WIDGET_ID_HERE]">
            <input type="hidden" name="w_tkn" value="[YOUR_WIDGET_TOKEN_HERE]">
            <b class="arrival-text">Arrival</b><br/>
            <input id="check-in-date" name="check_in_date" data-toggle="datepicker" placeholder="Please select arrival date" onchange="updateStayLength(this)">
            <br/>
            <b class="departure-text">Departure</b><br/>
            <input id="check-out-date" name="check_out_date" data-toggle="datepicker" placeholder="Please select departure date" onchange="updateStayLength(this)">
            <input id="stay-length" type="hidden" name="stay_length" value="1">
            <br/>
            <br/>
            <input type="submit" class="check-availability" value="Check Availability">
        </form>
    </div>
    <script>

        $('[data-toggle="datepicker"]').datepicker({
            format: 'yyyy-mm-dd',
            autoHide: true,
            autoPick: true
        });

        function updateStayLength(thisElement) {

            if ($(thisElement).attr("id") === "check-in-date") {
                updateCheckoutToPlusOne($(thisElement).val());
            }

            var dateString1 = $("#check-in-date").val();
            var date1 = new Date(dateString1);

            var dateString2 = $("#check-out-date").val();
            var date2 = new Date(dateString2);

            var difference = daysBetween(date1, date2);
            if ( difference < 1 ) difference = 1;
            $("#stay-length").val(difference);

        }

        function updateCheckoutToPlusOne(checkInDateString) {
            var checkInDate = new Date(checkInDateString);
            var checkOutDate = new Date(checkInDateString);
            checkOutDate.setDate(checkInDate.getDate() + 1);

            var dd = checkOutDate.getDate();
            var mm = checkOutDate.getMonth() + 1;
            var yyyy = checkOutDate.getFullYear();
            if ( dd < 10 ) dd = '0' + dd;
            if ( mm < 10 ) mm = '0' + mm;
            $("#check-out-date").val(yyyy + '-' + mm + '-' + dd);
        }

        function daysBetween( date1, date2 ) {
            var one_day=1000*60*60*24;
            var date1_ms = date1.getTime();
            var date2_ms = date2.getTime();
            var difference_ms = date2_ms - date1_ms;
            return Math.round(difference_ms/one_day);
        }
    </script>
</div>
                        

facebook twitter blog inkedin youtube