Intégration via le plugin WordPress Funbutler
Si vous utilisez WordPress, le processus est simple.
Funbutler propose un plugin WordPress.
Ce plugin fournit une liste de shortcodes que vous pouvez utiliser pour intégrer le formulaire de réservation à l’endroit souhaité sur votre site.
Intégration manuelle
Pour les sites web qui n’utilisent pas WordPress, le formulaire de réservation peut être ajouté manuellement dans le code HTML.
Si vous rencontrez des problèmes avec cette méthode, utilisez la méthode Bootstrapper (iframe) décrite ci-dessous.
Ajouter les scripts et styles nécessaires
Ajoutez le code suivant dans la section <head> de votre HTML :
<link rel='stylesheet' id='procommerca-booking-style-css' href='https://booking.funbutler.com/apps/public-app/styles.css' type='text/css' />
Ajoutez le code suivant à la fin de la section <body> :
<style> .loader-wrapper{text-align: center;} .loader-icon{display: inline-block;width: 64px;height: 64px;} .loader-icon.padded{margin: 15px;} .loader-icon.large{width: 150px;height: 150px;} .loader-icon.large.padded{margin: 50px;} .loader-icon:after{ content: " "; display: block; width: 100%; height: 100%; margin: 1px; border-radius: 50%; border: 5px solid black; border-color: black transparent black transparent; animation: loader-icon 1.2s linear infinite; } @keyframes loader-icon{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} } </style> <script type='text/javascript' src='https://booking.funbutler.com/apps/public-app/runtime.js'></script> <script type='text/javascript' src='https://booking.funbutler.com/apps/public-app/polyfills.js'></script> <script type='text/javascript' src='https://booking.funbutler.com/apps/public-app/main.js'></script>
Formulaire de réservation
Pour intégrer le formulaire, vous avez besoin de CLIENT_ID et BOOKING_FORM_ID.
Contactez [email protected] si vous ne trouvez pas ces informations.
Ajoutez le code suivant à l’endroit où le formulaire doit apparaître :
<booking-form clientId="CLIENT_ID" formId="BOOKING_FORM_ID"> <div id="main-loader" class="loader-wrapper"><div class="loader-icon large padded"></div></div> </booking-form>
Panier
Lorsqu’un utilisateur ajoute une réservation au panier, une icône de panier apparaît sur le côté droit de l’écran.
Si vous souhaitez afficher cette icône sur d’autres pages, ajoutez le code suivant n’importe où dans la section <body> :
<side-cart clientId="CLIENT_ID"></side-cart>
Boutique de cartes cadeaux
Pour permettre l’achat de cartes cadeaux, vous pouvez intégrer la boutique de cartes cadeaux sur n’importe quelle page.
Ajoutez le code suivant à l’endroit souhaité :
<gift-card-store clientId="CLIENT_ID"> <div id="main-loader" class="loader-wrapper"> <div class="loader-icon large padded"></div> </div> </gift-card-store>
Intégration via le Bootstrapper Funbutler (iframe)
Cette méthode intègre le formulaire dans une iframe via un script Bootstrapper.
En raison de l’utilisation d’une iframe, certaines limitations peuvent s’appliquer, notamment concernant les événements de suivi (tracking) et le positionnement de l’icône du panier.
Formulaire de réservation (Bootstrapper)
Ajoutez le code suivant à l’endroit où le formulaire doit apparaître :
<script src="https://booking.funbutler.com/assets/bootstrapper/bootstrap.js" data-client-id="CLIENT_ID" data-booking-form-id="BOOKING_FORM_ID"> </script>
Boutique de cartes cadeaux (Bootstrapper)
Ajoutez le code suivant à l’endroit où la boutique doit apparaître :
<script src="https://booking.funbutler.com/assets/bootstrapper/bootstrap.js" data-client-id="CLIENT_ID" data-embed="giftCardStore"> </script>