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.

fr_.jpeg

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 class="BookingSyncBookNowWidget" data-account-id="ACCOUNT_ID"></div>
<!-- booknow styles -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap&subset=latin,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic,greek-ext" rel="stylesheet">
<link href="https://www.bookingsync.com/api/v2/css/booknow_v2.css" rel="stylesheet">
<!-- booknow scripts -->
<script src="https://cdn.bookingsync.io/libs/bookingsync-calendar-widget/2.0.2/js/bookingsync-calendar-widget.min.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow_v2.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 class="BookingSyncBookNowWidget" data-account-id="ACCOUNT_ID" data-rental-id="RENTAL_ID"></div>
<!-- booknow styles -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap&subset=latin,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic,greek-ext" rel="stylesheet">
<link href="https://www.bookingsync.com/api/v2/css/booknow_v2.css" rel="stylesheet">
<!-- booknow scripts -->
<script src="https://cdn.bookingsync.io/libs/bookingsync-calendar-widget/2.0.2/js/bookingsync-calendar-widget.min.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow_v2.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 class="BookingSyncBookNowWidget" data-account-id="ACCOUNT_ID" data-rental-id="RENTAL_ID1,RENTAL_ID2"></div>
<!-- booknow styles -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap&subset=latin,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic,greek-ext" rel="stylesheet">
<link href="https://www.bookingsync.com/api/v2/css/booknow_v2.css" rel="stylesheet"> <!-- booknow scripts -->
<script src="https://cdn.bookingsync.io/libs/bookingsync-calendar-widget/2.0.2/js/bookingsync-calendar-widget.min.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow_v2.js"></script>

Configuration

Many parameters can be passed to the widget so you can better adjust it to your own needs.

For example, ask travelers for their phone number during the inquiry. To do that you need to pass the data-phone parameter:

<div class="BookingSyncBookNowWidget" data-account-id="ACCOUNT_ID" data-rental-id="RENTAL_ID" data-phone=""></div>
<!-- booknow styles -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap&subset=latin,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic,greek-ext" rel="stylesheet">
<link href="https://www.bookingsync.com/api/v2/css/booknow_v2.css" rel="stylesheet"> <!-- booknow scripts -->
<script src="https://cdn.bookingsync.io/libs/bookingsync-calendar-widget/2.0.2/js/bookingsync-calendar-widget.min.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow_v2.js"></script>

Here is the list of the parameters:

  • data-phone to ask travelers for their phone number during the inquiry
  • data-lang: to set up the language of the widget. Can take the value "de" for German, "en" for English, "fr" for French, "sv" for Swedish, "it" for Italian, "ru" for Russian, "es" for Spanish, "nl" for Dutch
  • data-min-stay: defines how far the check-out can be set to once the check-in is selected
  • data-source-id: links the booking to the corresponding source in BookingSync. See related article.
  • data-country: Set default country for the phone field

Styling

This widget will include HTML code right into your page, you can adjust HTML easily using CSS.

Here is an example of how to change your button color for example:

<!-- customize colors -->
<style>
html .BookingSyncBookNowWidget.BookingSyncWidgetUtils__reset {
--bookingsync-booknow-accent-primary: rgb(255, 166, 87);
--bookingsync-booknow-accent-primary-hover: rgb(255, 106, 7);
--bookingsync-booknow-accent-secondary: #333;
}

html .BookingSyncBookNowWidget.BookingSyncWidgetUtils__reset .BookingSyncCalendarWidget__calendar {
--bookingsync-calendar-highlighted-bg-color: var(--bookingsync-booknow-accent-primary);
}
</style>

Scripting

If you need to interact with the widget using Javascript, you will need to wait that it is fully loaded before interacting on it's DOM.

Here is an example of how to change the "Request to book" text.

$(document).ready(function () {
  var waitForWidget = setInterval(function() {
    if ($('.bookingsync-booknow-form').data('bookingsync-booknow-loaded')) {
      $(".bookingsync-inquire a").text("Send inquiry");
      clearInterval(waitForWidget);
    }
  }, 100);
});

it should be added in Layouts/layout.liquid at the end of the file before </body>

Events

This widget was built with events in mind, which makes it very convenient to monitor the steps that matter to you. These events can perfectly be used for deep analytics, custom validations, and many more.

Here is an example of how to listen to the event triggered when the inquiry or the book now button has been successfully submitted and send an event to Google Analytics.

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

Here is the list of all supported events:

  • bookingsync:booknow:submit
  • bookingsync:booknow:submit:error
  • bookingsync:booknow:submit:success
  • bookingsync:dates:change
  • bookingsync:inquire:next
  • bookingsync:inquire:next:error
  • bookingsync:inquire:next:success
  • bookingsync:inquire:send
  • bookingsync:inquire:send:error
  • bookingsync:inquire:send:success
  • bookingsync:inquire:submit:before
  • bookingsync:inquire:submit:success
  • bookingsync:inquire:submit:complete
  • bookingsync:inquire:submit:error
  • bookingsync:price:loading
  • bookingsync:price:updated
  • bookingsync:rental:change
  • bookingsync:rental:loading
  • bookingsync:rental:updated