Button Installation

To allow customers to make online bookings, you'll need to implement Xola Book Now button code on your website. You can find this code you need by navigating to Settings > Button Code, and following the steps below. Please note that installing the Javascript only needs to be done once per website - From then on you can simply paste in new button HTML code as needed.

Button Set Up

  1. Navigate to Settings > Button Code.
  2. Javascript: Copy the JavaScript code at the top of the page.


  1. Paste this code into your website's universal header or footer. It should be the last piece of code in your <head> </head> tag. Once you install the Javascript you do not need to ever repeat this step!
  2. CSS: 
    • Choose Your Checkout Type: 
      • Pop up Checkout: Iframe allows people to stay on your site but pop-ups a separate check out window. Select whether you'd like to use Xola's green Default Book Now button or if you'd like to designate your own Custom CSS button class.
      • Embedded Checkout: Embeds the checkout on your website, no extra windows. More Info Here
      • URL Checkout: Utilizes a URL to trigger a pop-up Checkout window.
        • Note: URL checkout will not track Google Analytics for your account if you do not install the Xola Javascript. 


  1. HTML: Select or generate your HTML code! Single-Item Checkout is automatically generated for each listing. When you create a Multi-Item, Timeline, or Gifts button, the HMTL code is generated when you click Save.


  1. Paste this HTML code in the text editor of your webpage, save, and publish. The Book Now button should now appear and pull up the appropriate checkout when clicked. 


Add more buttons to your site: Once you have the Javascript installed into your website's header or footer, you can add more buttons by pasting in the button HTML code at any time.

Edit the listings in a Multi-Item, Timeline, or Gifts button: Hover over the button and click Edit. To add a listing to a button, drag it from the left side to the right and release. To remove a listing from a button, drag it from the right side to the left and release.

For more on managing your Book Now buttons, click here.

Was this article helpful?
1 out of 2 found this helpful