Book Now Buttons & Javascript, CSS, & HTML

When we talk about Book Now buttons in Xola, we're talking about two things:

  1. The Javascript, CSS, HTML code. The HTML and the CSS combine to produce the button that you see, and the Javascript is what makes the button react (ie, bring up checkout) when clicked.
  2. The checkout window that appears when a customer clicks a Book Now button.

Button Code: Javascript, CSS, HTML


  • Javascript: The Javascript snippet of code needs to be plugged once into your website's universal header or footer. This makes your buttons react!
  • CSS: Xola's default CSS class produces the green Book Now button. If you would like your buttons to be a different shape, color, size, or messaging you can designate xola-custom CSS class.
  • HTML: This is the code you'll paste into your website editor in the location where you would like the button to appear. It tells Xola which checkout to bring up in the IFrame or mobile checkout window.

Xola listings are each autogenerated their own HTML code, like the West Side Story listing below. 


HTML code is autogenerated upon creating a Multi-Item, Timeline, or Gifts button, like the All Tours button below.


Want to know more about checkout? Check out our article, Types of Checkout.

Was this article helpful?
0 out of 3 found this helpful