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

Screen_Shot_2017-08-08_at_5.18.24_PM.png

  • 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. 

Screen_Shot_2017-07-18_at_5.23.34_PM.png

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

Screen_Shot_2017-07-18_at_5.23.52_PM.png

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



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

Comments