Pour plus de flexibilité et de contrôle lors de l'intégration du booking widget, nous vous recommandons de créer votre propre bouton “Book Now”.
A partir de l'intégration standard (voir code ci-bas), vous pouvez créer votre bouton en assignant la méthode “booxiController.book()” à l'événement “onclick” d’un bouton ou tout autre élément HTML.
<!-- Booxi Script --> <head> <script src="https://www.booxi.com/api/booknow.js" async=""></script> </head>
<body> <script> var bnHandler = null; window.bxApiInit = function () { bnHandler = booxiController.configure({apiKey: "YOUR_API_KEY_HERE"}); }; </script> <button onclick="booxiController.book();">Book Now</button> </body> |
Vous pouvez changer l'apparence du bouton en y assignant l’une des classes définies dans le CSS de votre page web. Si votre page ne comporte pas de CSS, créer un nouvel élément <style> à l'intérieur du marqueur <head> de la page ou le bouton apparaîtra. A l'intérieur de l'élément <style>, créez une classe “.button” et ajoutez les propriétés color, border, font, etc… en y assignant les valeurs désirées. Trouvez la liste complète des propriétés CSS ici.
<head> <style> .button { background-color: #4CAF50; border: none; border-radius: 8px; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: "Gill Sans", sans-serif; margin: 4px 2px; } </style> </head> |
Pour appliquer ce nouveau style au bouton, ajouter class="button" comme montré ci-bas.
<button class="button" onclick="booxiController.book();">Book Now</button> |
Bouton Booxi | Bouton Personnalisé | Bouton HTML |
|
|
|