Ajoutez le Booking Widget de Booxi à votre site web Lightspeed eCommerce (C-series)

Installation

Connectez-vous à votre compte Lightspeed.
Naviguez vers l'onglet Paramètres > Extras Web > JavaScript personnalisé, activez-le, et insérez le code ci-dessous :
1. Si vous utilisez le Booking widget v2, insérez ce script: <script src="https://www.booxi.com/api/booknow.js" async=""></script>
2. Si vous utilisez le Booking widget v3, insérez ce script: <script src="https://www.booxi.com/booknow/booknow.js" async=""></script>

Dans la section CUSTOM HEAD CODE, cliquez "Add code" et insérez le code ci-dessous :

Booking widget v2:

<script src="https://www.booxi.com/api/booknow.js" async=""></script>
<script>
var bnHandler = null;
window.bxApiInit = function () {
bnHandler = booxiController.configure({
apiKey: "YOUR_API_KEY"
});
};
document.addEventListener("DOMContentLoaded", function () {
// Select all div elements with the class "code-booxi-button"
const divs = document.querySelectorAll("div.code-booxi-button");

divs.forEach((div) => {
// Create a new button element
const button = document.createElement("button");

// Add the class and onclick attributes to the button
button.className = "code-booxi-button";
button.setAttribute(
"onclick",
"booxiController.book();"
);

// Set the inner text of the button
button.textContent = div.textContent;

// Replace the div with the button
div.replaceWith(button);
});
});</script>

Booking widget v3:

<script src="https://www.booxi.com/booknow/booknow.js" async=""></script>
<style>
#my_custom_iframe_id {z-index: 999;}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () 
// Select all div elements with the class "code-booxi-button"{ const divs = document.querySelectorAll("div.code-booxi-button");

divs.forEach((div) => {
// Create a new button element 
const button = document.createElement("button");

// Add the class and onclick attributes to the button
button.className = "code-booxi-button";
button.setAttribute(
"onclick", 

"BookNow.open({apiKey:'YOUR_API_KEY',iframeId: 'my_custom_iframe_id'})"
);

// Set the inner text of the button
button.textContent = div.textContent;

// Replace the div with the button
div.replaceWith(button); 
});
});</script>

*Dans le code ci-dessus, assurez-vous d'entrer votre clé API (pour l'obtenir, naviguez vers l'onglet "Mon Entreprise" > Détails de l'entreprise)

Sauvegarder

Comment ajouter le widget dans votre site web

Lorsque vous avez terminé l'installation, vous pouvez ajouter le widget où vous voulez.

(ex: Pages, Produits, Blog, etc.).

Naviguez vers un élément on une page spécifique, puis dans la section « Contenu », insérez le code ci-dessous dans le code source:

<div class="code-booxi-button">Book Now</div>

Dans l'exemple ci-dessus, le titre du bouton est "Book Now"; vous pouvez le modifier.

Personnalisation

Par défaut, votre bouton(s) hérite du thème de Lightspeed. Vous pouvez modifier votre thème en allant dans Design > Editeur de thème > Modifier le thème.

Vous pouvez modifier les boutons de votre site en naviguant vers Visuel > Couleurs > Highlight color et/ou Button text color.

Vous pouvez également personnaliser le bouton avec les options de personnalisation de Booxi ; voir ici pour plus d'informations.