How to install our widget
Please click on the following link to get the instructions: How to integrate our "Book Now and Inquiry Widget V2
If you wish to install the previous version of the widget, the instructions are here : How to integrate our "Book Now and Inquiry Widget V1
Widget V2
This is what the latest Widget looks like :
Setup
Setup for all your rentals:
1) Go to your BookingSync account then in the Rentals section.
2) Look for the URL so you can extract your ACCOUNT_ID, this URL should look like:
https://www.bookingsync.com/en/admin/v2/ACCOUNT_ID/rentals
3) Add the following code on your website
Note: Make sure to update ACCOUNT_ID with your own values
<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.1.4/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>
Setup for a single rental
1) Go into your BookingSync account and edit the rental for which you want the widget to be related.
2) Look at the URL and extract your ACCOUNT_ID and RENTAL_ID, the URL should look like:
https://www.bookingsync.com/en/admin/v2/ACCOUNT_ID/rentals/RENTAL_ID/edit
3) Add the following code on your website
Note: Make sure to update ACCOUNT_ID and RENTAL_ID with your own values
<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.1.4/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>
Setup for a selected list of rentals
1) Go to your BookingSync account and edit the first rental for which you want the widget to be related.
2) Look at the URL and extract your ACCOUNT_ID and RENTAL_ID, the URL should look like:
https://www.bookingsync.com/en/admin/v2/ACCOUNT_ID/rentals/RENTAL_ID/edit
3) Repeat steps 1 and 2 to collect all the RENTAL_ID of the rentals needed
4) Add the following code to your website
Note: Make sure to update ACCOUNT_ID and RENTAL_ID1,RENTAL_ID2,... with your own values. Each RENTAL_IDs must be separated by 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.1.4/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.1.4/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 inquirydata-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 Dutchdata-min-stay
: defines how far the check-out can be set to once the check-in is selecteddata-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
Widget V1
This is what the Widget looks like :
Setup
Setup for all your rentals:
1) Go to your BookingSync account then in the Rentals section.
2) Look for the URL so you can extract your ACCOUNT_ID, this URL should look like:
https://www.bookingsync.com/en/admin/v2/ACCOUNT_ID/rentals
3) Add the following code on your website
Note: Make sure to update ACCOUNT_ID with your own values
<div class="bookingsync-booknow" data-account-id="ACCOUNT_ID"></div> <script type="text/javascript" src="https://www.bookingsync.com/api/v2/js/booknow.js"></script>
Setup for a single rental
1) Go into your BookingSync account and edit the rental for which you want the widget to be related.
2) Look at the URL and extract your ACCOUNT_ID and RENTAL_ID, the URL should look like:
https://www.bookingsync.com/en/admin/v2/ACCOUNT_ID/rentals/RENTAL_ID/edit
3) Add the following code on your website
Note: Make sure to update ACCOUNT_ID and RENTAL_ID with your own values
<div class="bookingsync-booknow" 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>
Setup for a selected list of rentals
1) Go to your BookingSync account and edit the first rental for which you want the widget to be related.
2) Look at the URL and extract your ACCOUNT_ID and RENTAL_ID, the URL should look like:
https://www.bookingsync.com/en/admin/v2/ACCOUNT_ID/rentals/RENTAL_ID/edit
3) Repeat the steps 1 and 2 to collect all the RENTAL_ID of the rentals needed
4) Add the following code on your website
Note: Make sure to update ACCOUNT_ID and RENTAL_ID1,RENTAL_ID2,... with your own values. Each RENTAL_IDs must be separated by a comma ",".
<div class="bookingsync-booknow" 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>
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="bookingsync-booknow" 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">
Here is the list of the parameters:
data-phone
to ask travelers for their phone number during the inquirydata-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 Dutchdata-min-stay
: defines how far the check-out can be set to once the check-in is selecteddata-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:
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; }
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
Comments
0 comments
Please sign in to leave a comment.