Setup
Login to your to your Lightspeed account.
Go to Settings > Web Extras > CUSTOM JS, enable it, then insert the below code snippet:
If you are using Booking widget v2, insert this: <script src="https://www.booxi.com/api/booknow.js" async=""></script>
If you are using Booking widget v3, insert this: <script src="https://www.booxi.com/booknow/booknow.js" async=""></script>
In Settings > CUSTOM HEAD CODE, click "Add code", then add the following code at the beginning of the code (must be the first entry in the window):
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>
*In the above code, make sure to enter your store's API key (to obtain it, go to the "My Business" tab > Business details)
Save your changes
How to add the widget into your website
Once the setup is complete, you can add the widget wherever you want in your website (e.g. Pages, Products, Blog, etc.).
Navigate to a content element (e.g. Content > Pages > {select a page}), then in the "Content" section of that element, paste this code snippet into the source code element:
<div class="code-booxi-button">Book Now</div>
In the above example, the name of the button is "Book Now"; you can change its value if you want.
Customization
By default, your button(s) will inherit your default Lightspeed theme. You can edit your theme by going to Design > Theme editor > Edit theme.
You can edit your site's buttons by going to Visual > Colors > Highlight color and/or Button text color.
You may also customize the button with Booxi's native customization options; see here for more info.