Overview: Book Now Buttons

Settings > Button Code contains all of your button code. You can always come here to access the code, generate code for new buttons, or edit the buttons you've created. 

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

1. The HTML, CSS, and Javascript 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 (thanks to that Javascript snippet). There are four different kinds of checkout in Xola: Single Item, Multi-Item, Timeline, and Gifts.

Button Code

In the Button Code section of your Settings tab, you'll always have access to the HTML, CSS, JavaScript code that work in tandem to produce the Book Now buttons that appear on your site.

  • The Javascript code must be plugged into your website's universal header or footer. This only needs to be done once per website.
  • Xola offers a default CSS green Book Now button, but also offers for you to designate a custom CSS class should you desire a different shape, color, size, or messaging.
  • Finally, you have access to the HTML code for all of your listings and custom-made checkout buttons. This HTML code should be input into the text version of your webpage.


Checkout Types

Xola offers four kinds of online checkout:

  1. Single Item Checkout: Pulls up checkout for one listing.
  2. Multi-Item Checkout: You choose which listings should appear for checkout in this button, and your customers can checkout for more than one listing at a time.
  3. Timeline Checkout: A scrollable timeline that shows upcoming trip times across all of your listings.You choose which listings appear in checkout for this button.
  4. Gifts Checkout: Pulls up the listings you offer for Gifts as well as a custom dollar amount. Your customers can purchase these gifts and send them to recipients.

As soon as you successfully create a listing, Xola auto-generates that listing's Single Item Checkout HTML code like the one below:


When you create a Multi-Item, Timeline, or Gifts checkout and save it, Xola auto-generates that button's HTML code. Below is an example of a Multi-Item checkout button and its HTML code:


For more information on creating your own buttons, please read our article, Types of Checkout.

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