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.

What's covered in this article:

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.
    • Note: 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. Click here for more information.
      • 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. 

Create a create a Multi-Item, Timeline, or Gifts button

  1. Navigate to Settings > Button Code > and choose either Multi-Item, Timeline, or Gifts.
  2. Click +Create New Button.
  3. Enter in a Button Name.
  4. Drag the listings that you would like to appear in the checkout for this button from the left side to the right and then release.
  5. Click Save to create the button.
  6. Hover over the newly created button code and click Copy
  7. Follow the steps above to add it to your website. 


Edit Buttons

  • Preview: To preview the checkout experience, hover over the button and click Preview. This will open up the checkout in a secure tab in your browser. You can also use this URL to send a direct checkout link to a customer via email.
  • Edit Listings: To remove a listing from a button, drag the listing from the right side to the left and release. To add a listing to a button, drag the listing from the left side to the right and release. Click Save. Your button will automatically update on your site!
  • Archive: If you no longer need this button, you can delete it by clicking Archive.



Was this article helpful?
4 out of 8 found this helpful