Vous trouverez ci-dessous les étapes pour intégrer le widget de réservations instantanées et de requêtes (plugin) de BookingSync sur votre propre site web.
Veuillez cliquez sur ce lien pour obtenir les instructions : Comment installer le bouton "réserver maintenanté en V2
Si vous souhaitez installer la version précédente, les instructions se trouvent ici : Comment installer le bouton "réserver maintenant" en V2
Widget V2
Vous trouverez ci-dessous les étapes pour intégrer le widget de réservations instantanées et de requêtes (plugin) de BookingSync sur votre propre site web.
Installation
Un widget pour toutes vos propriétés
1) Allez dans votre compte BookingSync puis dans la section Locations.
2) Regardez l'URL pour en extraire votre identifiant de compte ( ACCOUNT_ID), cette URL ressemble à :
https://www.bookingsync.com/fr/admin/v2/ACCOUNT_ID/rentals
3) Installez le code suivant dans votre site web
Note: Assurez-vous de mettre à jour l'information ACCOUNT_ID avec votre propre identifiant.
<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>
Un widget par location
1) Allez dans votre compte BookingSync puis éditez la location pour laquelle vous souhaitez mettre en place le widget.
2) Regardez l'URL pour en extraire votre identifiant de compte ( ACCOUNT_ID) et votre identifiant de location (RENTAL_ID), cette URL ressemble à :
https://www.bookingsync.com/fr/admin/v2/ACCOUNT_ID/rentals/RENTAL_ID/edit
3) Installez le code suivant dans votre site web
Note: Assurez-vous de mettre à jour les informations ACCOUNT_ID et RENTAL_ID avec vos propres identifiants.
<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>
Un widget pour une liste spécifique de locations
1) Allez dans votre compte BookingSync puis éditez la première location pour laquelle vous souhaitez mettre en place le widget.
2) Regardez l'URL pour en extraire votre identifiant de compte ( ACCOUNT_ID) et votre identifiant de location (RENTAL_ID), cette URL ressemble à :
https://www.bookingsync.com/fr/admin/v2/ACCOUNT_ID/rentals/RENTAL_ID/edit
3) Répétez les étapes 1 er 2, afin de collecter tous les RENTAL_ID des locations que vous souhaitez dans le widget
4) Installez le code suivant dans votre site web
Note: Assurez-vous de mettre à jour les informations ACCOUNT_ID et RENTAL_ID1,RENTAL_ID2,... avec vos propres identifiants. Chaque RENTAL_ID doit être séparé par une virgule ",".
<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
Plusieurs paramètres peuvent être transmis par le widget afin de pouvoir couvrir au mieux vos besoins.
Par exemple, pour demander aux voyageurs leur numéro de téléphone pendant le procesuss de réservation, vous pouvez ajouter le paramètre data-phone, comme indiqué :
<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>
Voici la liste des paramètres
data-phone: pour demander aux voyageurs leur numéro de téléphone pendant le processus de réservationdata-lang: pour définir la langue du widget. Il peut prendre la valeur de "de" pour l'allemand, "en" pour l'anglais, "fr" pour le français, "sv" pour le suèdois, "it" pour l'italien, "ru" pour le russe, "es" pour l'espagnol, "nl"pour le hollandais.data-min-stay: définit la période maximum pour la date de départ une fois que la date d'arrivée est sélectionnée.data-source-id: lie la réservation avec la source correspondante dans BookingSync.data-country: Pays par défaut pour le champs Téléphone
Ajouter du style
Ce widget va inclure le code HTML dans votre page, mais vous pouvez également ajuster le style très simplement en utilisant le CSS.
Voici comment modifier la couleur des boutons par exemple :
<!-- 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
Si vous devez interagir avec le widget en utilisant Javascript, vous devrez attendre qu'il soit complètement chargé avant d'interagir sur son DOM.
Voici un exemple de modification du texte "Demande de réservation".
$(function() {
var BOOKNOW = '.BookingSyncBookNowWidget';
return $(BOOKNOW).on('bookingsync:view:load:success', function() {
return $(BOOKNOW + '__inquire a').text('Send inquiry');
});
});
Events
Ce widget a été imaginé avec la notion d'évènements, ce qui le rend très pratique pour suivre les étapes qui vous importent. Ces évènements peuvent être utilisés pour des analyses approfondies, des validations spécifiques, et d'autres encore.
Voici un exemple qui écoute l'évènement déclenché lorsqu'une requête où le bouton réserver maintenant a été envoyé avec succès et envoie cet évènement à 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:update
Widget V1
Installation
Un widget pour toutes vos propriétés
1) Allez dans votre compte BookingSync puis dans la section Locations.
2) Regardez l'URL pour en extraire votre identifiant de compte ( ACCOUNT_ID), cette URL ressemble à :
https://www.bookingsync.com/fr/admin/v2/ACCOUNT_ID/rentals
3) Installez le code suivant dans votre site web
Note: Assurez-vous de mettre à jour l'information ACCOUNT_ID avec votre propre identifiant.
<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>
Un widget par location
1) Allez dans votre compte BookingSync puis éditez la location pour laquelle vous souhaitez mettre en place le widget.
2) Regardez l'URL pour en extraire votre identifiant de compte ( ACCOUNT_ID) et votre identifiant de location (RENTAL_ID), cette URL ressemble à :
https://www.bookingsync.com/fr/admin/v2/ACCOUNT_ID/rentals/RENTAL_ID/edit
3) Installez le code suivant dans votre site web
Note: Assurez-vous de mettre à jour les informations ACCOUNT_ID et RENTAL_ID avec vos propres identifiants.
<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>
Un widget pour une liste spécifique de locations
1) Allez dans votre compte BookingSync puis éditez la première location pour laquelle vous souhaitez mettre en place le widget.
2) Regardez l'URL pour en extraire votre identifiant de compte ( ACCOUNT_ID) et votre identifiant de location (RENTAL_ID), cette URL ressemble à :
https://www.bookingsync.com/fr/admin/v2/ACCOUNT_ID/rentals/RENTAL_ID/edit
3) Répétez les étapes 1 er 2, afin de collecter tous les RENTAL_ID des locations que vous souhaitez dans le widget
4) Installez le code suivant dans votre site web
Note: Assurez-vous de mettre à jour les informations ACCOUNT_ID et RENTAL_ID1,RENTAL_ID2,... avec vos propres identifiants. Chaque RENTAL_ID doit être séparé par une virgule ",".
<div class="bookingsync-booknow-form" 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
Plusieurs paramètres peuvent être transmis par le widget afin de pouvoir couvrir au mieux vos besoins.
Par exemple, pour demander aux voyageurs leur numéro de téléphone pendant le procesuss de réservation, vous pouvez ajouter le paramètre data-phone, comme indiqué :
<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">
Voici la liste des paramètres
data-phone: pour demander aux voyageurs leur numéro de téléphone pendant le processus de réservationdata-lang: pour définir la langue du widget. Il peut prendre la valeur de "de" pour l'allemand, "en" pour l'anglais, "fr" pour le français, "sv" pour le suèdois, "it" pour l'italien, "ru" pour le russe, "es" pour l'espagnol, "nl"pour le hollandais.data-min-stay: définit la période maximum pour la date de départ une fois que la date d'arrivée est sélectionnée.data-source-id: lie la réservation avec la source correspondante dans BookingSync.data-country: Pays par défaut pour le champs Téléphone
Ajouter du style
Ce widget va inclure le code HTML dans votre page, mais vous pouvez également ajuster le style très simplement en utilisant le CSS.
Voici comment modifier la couleur des boutons par exemple :
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;
}
Events
Ce widget a été imaginé avec la notion d'évènements, ce qui le rend très pratique pour suivre les étapes qui vous importent. Ces évènements peuvent être utilisés pour des analyses approfondies, des validations spécifiques, et d'autres encore.
Voici un exemple qui écoute l'évènement déclenché lorsqu'une requête où le bouton réserver maintenant a été envoyé avec succès et envoie cet évènement à 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:update
Commentaires
0 commentaire
Vous devez vous connecter pour laisser un commentaire.