*Note : le booking widget v2 ne recevra plus de support technique ou de corrections de bugs après le 29 juin 2026. Pour cette raison, Booxi vous recommande fortement de mettre à jour votre implémentation vers le booking widget v3.

Vidéo

Consultez cette vidéo pour un guide visuel de l'implémentation telle que décrite dans cet article :

Instructions

Pour effectuer le changement, suivez ces 2 étapes :

Mettez à jour la bibliothèque BookNow dans la balise <head> de votre page web.
Mettez à jour le code dans la balise <body> de votre page web.

Pour obtenir le code nécessaire, vous pouvez utiliser le générateur de code, ou simplement suivre les étapes décrites ci-dessous.

Pour l'implémentation, vous aurez besoin de votre clé API. Pour l'obtenir, allez dans l'onglet "Mon Entreprise" > Détails de l'entreprise > Clé API.

Header (En-tête)

Dans la balise <head> de votre page web, assurez-vous de mettre à jour la bibliothèque Booxi comme indiqué ci-dessous.

Book Now v2

<head>

   <script src="https://www.booxi.com/api/booknow.js" async=""></script>

</head>>

Book Now v3

<head>

   <script src="https://www.booxi.com/booknow/booknow.js" async=""></script>

</head>

N'oubliez pas de définir l'URL appropriée en fonction de votre région d'hébergement : www.booxi.com pour l'Amérique du Nord et www.booxi.eu pour l'Europe.

Body (Corps)

Dans la balise <body> de votre page web, mettez à jour le code selon les détails ci-dessous. Notez que booxiController n'est plus utilisé avec le Booking Widget v3.

Booking Widget v2

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

Avec le Booking Widget v3, les propriétés peuvent être définies lors de l'appel direct de BookNow.open() au lieu de passer par une méthode de configuration.

Booking Widget v3

<body>

   <button onclick="BookNow.open({apiKey:'YOUR_API_KEY_HERE'})">Book Now</button>

</body>

Changements dans les Propriétés

Les propriétés suivantes ont été modifiées :

Objet clientData → client

Dans BNv3, l'objet clientData et la sous-propriété customRequest ont été renommés respectivement à client et additionalRequest. Assurez-vous que les références à ces propriétés soient mises à jour.

Book Now v2	Book Now v3
clientData	client
clientData.customRequest	client.additionalRequest

customRequest

La propriété customRequest (à ne pas confondre avec clientData.customRequest), utilisée pour envoyer des données supplémentaires dans le Booking Widget v2, n'existe plus dans le Booking Widget v3. Elle pourrait être implémentée dans le futur.

Changements dans les Fonctionnalités

Callbacks et Redirections

Les rappels (callbacks) suivants et leurs implémentations ont été modifiés :

Booking Widget v2	Booking Widget v3
redirectUriBooked	onBookedRedirectTo
redirectUriClosed	onAbortRedirectTo

Implémentation dans le Booking Widget v2