First Time Button Installation

To allow customers to make bookings through your website, you'll need to implement Xola Book Now button code. You can find this code you need by navigating to Settings > Button Code, and following the steps below.

First Time Button Set Up

  1. Navigate to Settings > Button Code.
  2. Javascript: Copy the JavaScript code at the top of the page.
  3. 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 this is done you do not need to ever repeat this step!
  4. CSS: Back in Button Code, 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.
  5. 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.
  6. 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. 

Once you have the Javascript installed into your website's header or footer, you can add more buttons by pasting in the HTML whenever you like.

If you have a Multi-Item, Timeline, or Gifts button on your website and you just want to change the Listings that appear when it's clicked, you can just edit the button in Button Code and click 'Save'. It will update the button on your site - No code editing necessary!

Decide which button type is right for you with this article: Types of Buttons.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request