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 |
|
|
|