Javascript Widget

Xola offers a Javascript based booking widget that you can use to pass through consumer bookings. With one JS include and a div, you can enable bookings and payments via the Xola checkout widget.

Step 1: Insert Javascript

Include the following JS snippet in your site or booking page.

<script type="text/javascript">
    (function() {
        var co=document.createElement("script");
        co.type="text/javascript";
        co.async=true;
        co.src="https://xola.com/checkout.js";
        var s=document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(co, s);
    })();
</script>

Step 2: Configure buttons

Insert the "Book Now" button by adding the following HTML:

<div class="xola-checkout" data-seller="4f2b1dcc536e864069000001" data-experience="58511cb9273554e78989a20b"></div>

This will insert a pre-styled button which launches the checkout widget onclick. The id attribute should match the ID of the experience you want to book.

Optionally, if you want to style your own button, you can use the xola-custom class and provide your own styled button.

<div class="xola-custom xola-checkout" data-seller="4f2b1dcc536e864069000001" data-experience="58511cb9273554e78989a20b">
    <button>Book Now</button>
</div>

Step 3: Start booking!

That's about it! You can now start receiving bookings via your Xola buttons.