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 au début du code (doit être la première entrée de la fenêtre) :

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 () {
    const divs = document.querySelectorAll("div.code-booxi-button");
   divs.forEach((div) => {
        const button = document.createElement("button");
        const div_serviceTag = div.getAttribute("title") || "";
        button.className = "code-booxi-button";
  button.setAttribute(
            "onclick",
            `BookNow.open({ apiKey:'YOUR_API_KEY_HERE', iframeId:'my_custom_iframe_id', serviceTags:'${div_serviceTag}' })`
        );
        button.textContent = div.textContent;
        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>

*Note: si vous utilisez des étiquettes de service, entrez les dans l'attribut « title » tel qu'indiqué ci-dessous :

<div class="code-booxi-button" title="vip">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.