Button Installation

To give your customers a seamless way to reserve your experiences online, you'll want to add the Xola Book Now button to your website. This powerful tool makes it easy for visitors to take action right when their interest is piqued. You can find everything you need by heading to Settings > Button Code and following the simple steps. The best part? You only need to install the JavaScript once for your entire site. After that, updating or adding new buttons is as easy as copying and pasting the HTML wherever you'd like it to appear.


What's covered in this article:


Button Set Up

Step 1: Paste this code into your site's header or footer

  • Use the  Screenshot 2025-05-29 at 9.02.32 AM.png icon to copy the JavaScript code in step one. 

Copy Java.gif

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

Step 2: Choose your checkout type

step 2.gif

Choose Your Checkout Type: 

Pop-up Checkout:

This iframe allows people to stay on your site but pops up a separate checkout window.

  • In Step 3: Select whether you'd like to use Xola's blue Default Book Now button or designate your own Custom CSS button class.
  • You can use this tool to help create your Custom Button: https://www.bestcssbuttongenerator.com/

Embedded Checkout: 

Embeds the checkout on your website, no extra windows.

  • Once you choose the option, in Step 3 you can choose a color scheme that matches your website's theme and hit update.
  • NoteAll of your embedded checkouts will use the color scheme configured here.
  • If you do not see this option, you may need to install the feature from the App Store> Locate Embedded Checkout and select the App Store tile> Click the green Install button. 
  • Here is a preview of what Embedded will look like: 

mceclip3.png

 

URL Checkout: 

Utilizes a URL to trigger a pop-up Checkout window.

  • Step 3 will be to Copy + Paste the Button Code below. 
  • Note: URL checkout will not track Google Analytics for your account if you do not install the Xola Javascript. 

Step 4: Copy + Paste button code

Single-Item Checkout HMTL is automatically generated for each product. When you create a Multi-Item, Timeline, or Gifts button, the HMTL code is generated when you click Save. 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. Continue reading for more informaiton on the different checkout types in Step 4. 

Checkout Types

Single Item Checkout

  • When an experience is created, HTML code for its Single-Item Checkout will automatically be generated in Settings > Button Code
  • Options for the button: 

    • Preview: To preview the checkout experience, click on the Screenshot 2025-03-28 at 9.12.31 AM.pngicon. 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.
    • Copy Code: Use the  Screenshot 2025-05-29 at 9.02.32 AM.png icon to copy the button HMTL code to add to your site. 
  • When a Single-Item Checkout button is clicked on your checkout, it pulls up the checkout solely for that experience.

Great idea if: You want to give customers the option to book one specific experience.

Screen_Shot_2022-09-23_at_8.53.16_AM.png

Multi-Item Checkout

Multi-Item Checkout buttons must be created manually.

  • Navigate to Settings > Button Code > choose Multi-Item
  • Click +Create New Button.
  • Enter in a Button Name.
  • Optionally, toggle on Automatically apply code> Add the exact discount or agent code in the box. 
    • When your customer loads this checkout, the code you put here will automatically apply the discount. 
  • Drag the products that you would like to appear in the checkout for this button from the left side to the right and then release.
  • Click Save to create the button.
  • Use the  Screenshot 2025-05-29 at 9.02.32 AM.png icon to copy the button HMTL code. 
  • Follow the steps above to add it to your website. 
  • Upon creating and saving a button, the HTML code is automatically generated for you to use.
  • Options for the button: 

    • Preview: To preview the checkout experience, click on the Screenshot 2025-03-28 at 9.12.31 AM.pngicon. 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.
    • Copy Code: Use the  Screenshot 2025-05-29 at 9.02.32 AM.png icon to copy the button HMTL code to add to your site. 
    • Edit Products on buttons: Click on the Screenshot 2025-05-29 at 9.56.26 AM.png icon to edit your button. To remove a product from a button, drag the product from the right side to the left and release. To add a product to a button, drag the product 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 the Screenshot 2025-04-25 at 12.04.24 PM.pngicon. 
  • When a Multi-Item Checkout button is clicked, the customer selects an experience from a selection of experiences and proceeds to book.
  • On page two of checkout, the customer can select 'Add another experience' and continue purchasing additional experiences using a shopping cart style workflow, and then checkout for all experiences in one go.

Great idea if: You have experiences that are commonly paired and booked at the same time, or if you would like to promote and present certain experiences together. For example, the 'Hiking Button' below only shows tours that have to do with Hiking.

checkout-types.jpg

Timeline Checkout

  • Timeline Checkout buttons must be created manually.
  • Navigate to Settings > Button Code > choose Timeline
  • Click +Create New Button.
  • Enter in a Button Name.
  • Optionally, toggle on Automatically apply code> Add the exact discount or agent code in the box. 
    • When your customer loads this checkout, the code you put here will automatically apply the discount. 
  • Drag the products that you would like to appear in the checkout for this button from the left side to the right and then release.
  • Click Save to create the button.
  • Use the  Screenshot 2025-05-29 at 9.02.32 AM.png icon to copy the button HMTL code. 
  • Follow the steps above to add it to your website. 
  • Upon creating and saving a button, the HTML code is automatically generated for you to use.
  • Options for the button: 

    • Preview: To preview the checkout experience, click on the Screenshot 2025-03-28 at 9.12.31 AM.pngicon. 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.
    • Copy Code: Use the  Screenshot 2025-05-29 at 9.02.32 AM.png icon to copy the button HMTL code to add to your site. 
    • Edit Products on buttons: Click on the Screenshot 2025-05-29 at 9.56.26 AM.png icon to edit your button. To remove a product from a button, drag the product from the right side to the left and release. To add a product to a button, drag the product 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 the Screenshot 2025-04-25 at 12.04.24 PM.pngicon. 
  • When a Timeline button is clicked on your checkout, it will pull up a scrollable timeline that shows upcoming trip times across all of your experiences in that button.
  • On page two of checkout, the customer can select 'Add another experience', and continue to purchase additional experiences using a shopping cart style workflow, and then checkout for all experiences in one go.

Great idea if: You have a few different experiences, and would like to show available time slots to your customers for all of those experiences in chronological order.

Screen_Shot_2022-09-23_at_8.57.03_AM.png 

Gift Checkout

  • Gift buttons must be created manually.
  • Navigate to Settings > Button Code > choose Gifts
  • Click +Create New Button.
  • Enter in a Button Name.
  • Drag the product gifts and gift offers that you would like to appear in the checkout for this button from the left side to the right and then release.
  • Click Save to create the button.
  • Use the  Screenshot 2025-05-29 at 9.02.32 AM.png icon to copy the button HMTL code. 
  • Follow the steps above to add it to your website. 
  • Upon creating and saving a button, the HTML code is automatically generated for you to use.
  • Options for the button: 

    • Preview: To preview the gift checkout, click on the Screenshot 2025-03-28 at 9.12.31 AM.pngicon. 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.
    • Copy Code: Use the  Screenshot 2025-05-29 at 9.02.32 AM.png icon to copy the button HMTL code to add to your site. 
    • Edit Gifts on buttons: Click on the Screenshot 2025-05-29 at 9.56.26 AM.png icon to edit your button. To remove a gift from a button, drag the gift from the right side to the left and release. To add a gift to a button, drag the gift 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 the Screenshot 2025-04-25 at 12.04.24 PM.pngicon. 
  • New to using gifts in Xola? Check out our gift overview article.

Screenshot_2023-01-04_at_5.22.35_PM.png

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