Get instant bookings from your website

You have your own site for promoting your rentals?

With Smily, transform your site into a real booking platform! Below, you will find the steps for integrating our tool for instant bookings and booking requests, a plugin called "BookNow widget" (provided by BookingSync), into your website.

All bookings received via our widget will be syncronised to Smily and you can manage them from there! As soon as the widget is installed, if you already have some bookings, or if you have dates that are marked an unavailable in your Smily calendar, the calendar on your website will be updated to match your availability on Smily.

In this article

  • Integrating the booking form
  • Advanced settings
  • Formatting and style
  • Manage your events

Integrating the booking form

Option 1 : One single form for all of your rentals

Ideal for your homepage or if you have a "booking" page, the form or all rentals allows the guest to first of all select the rental that they are interested in, then the dates and the number of travellers.

1) Go to your Smily account, then to Rentals.

2) Look at the URL in order to identify your account ID. The URL will be as follows:

https://www.bookingsync.com/en/admin/v3/ACCOUNT_ID/rentals

3) Insert the following code into your website:

Note: ensure that you update the ACCOUNT_ID with your own ID.

<div data-account-id="ACCOUNT_ID"></div>
<script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow.js"></script>

Option 2 : One form per rental

1) Go into your account Smily, select the rental for which you want to add the widget, then go to edit Rental

2) Look at the URL and identify your account ID and your rental ID. The URL will be as follows:

https://www.bookingsync.com/en/admin/v3/ACCOUNT_ID/rentals/RENTAL_ID/edit

3) Insert the following code into your website:

Note: Ensure that you update the ACCOUNT_ID and RENTAL_ID with your own IDs.

<div data-account-id="ACCOUNT_ID" data-rental-id="RENTAL_ID"></div>
<script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow.js"></script>

Option 3 : A form for a specific list of rentals

1) Go to your Smily account, select one of the rentals for which you want to add the widget, then go to edit Rental

2) Look at the URL and identify your account ID and your Rental ID. The URL will be as follows:

https://www.bookingsync.com/en/admin/v3/ACCOUNT_ID/rentals/RENTAL_ID/edit

3) Repeat steps 1 and 2 to collect the rental IDs for all of the rentals that you would like to include in the widget.

4) Insert the following code into your website:

Note: Ensure that you update the ACCOUNT_ID and RENTAL_ID1,RENTAL_ID2,... with your own IDs. Each RENTAL_ID must be separated with a comma ",".

<div data-account-id="ACCOUNT_ID" data-rental-id="RENTAL_ID1,RENTAL_ID2"></div>
<script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow.js"></script>

Advanced settings

This section is aimed at users with an understanding of software development.

Several settings can be applied to the widget in order to best meet your individual needs.

For example, to request guests' phone numbers during the booking process, you can add the data-phone setting, as shown:

<div data-account-id="ACCOUNT_ID" data-rental-id="RENTAL_ID" data-phone=""></div>
<script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow.js">

The list of parameters are as follows:

  • data-phone: used to ask guests their phone number during the booking process.
  • data-lang: used to define the language that the widget will be in. This can take the form of "de" for German, "en" for English, "fr" pour le French, "sv" for Greek, "it" for Italian, "ru" for Russian, "es" for Spanish, "nl" for Dutch.
  • data-min-stay: used to define the maximum departure date once the arrival date has been selected.
  • data-source-id: used to link a booking to its corresponding source in Smily.
  • data-country: used to define the default country in the Phone field.

Add some style

This section is aimed at users with an understanding of software development.

The widget will insert HTML into your page, but you can also adjust the style very easily using CSS.

Here is how to modify the colour of a button, for example:

html .bookingsync-booknow.bookingsync-reset .bookingsync-button,
html .bookingsync-booknow.bookingsync-reset .bookingsync-inquire .bookingsync-button,
html .bookingsync-booknow.bookingsync-reset button.bookingsync-inquire
{
  background-color: #3366FF;
}
html .bookingsync-booknow.bookingsync-reset .bookingsync-button:hover,
html .bookingsync-booknow.bookingsync-reset .bookingsync-inquire .bookingsync-button:hover {
  background-color: #0040FF;
}

Manage your events

This section is aimed at users with an understanding of software development.

The widget has been designed based around events, which means that it is very easy to follow the steps that are important to you. These events can be used for in-depth analysis, specific checks and much more.

Here is an example which tracks the event that is triggered each time a request is succesfully sent and sends this event to Google Analytics:

$(document).ready(function () {
  if (typeof $BookingSync !== 'undefined') {
    $BookingSync(document).on('bookingsync:inquire:submit:complete', '.bookingsync-booknow', function() {
      ga('send', 'event', 'inquiry', 'sent');
    });
  }
});