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 button is much more than a simple call-to-action—it's a robust engine that delivers a smooth, branded booking experience right on your site (or via pop-up) and can be tailored to match your brand look, checkout style, and unique booking needs. Whether your guests are reserving a single tour, building a multi-experience itinerary, choosing from a timeline of departure options, or purchasing a gift certificate, the Xola Book Now button makes it simple for them to take the next step the moment they’re ready.
You can find everything you need by heading to Settings > Button Code and following the simple steps. Installation is flexible: after a one-time setup of the Xola JavaScript in your site's header or footer, you can create and customize unlimited buttons from your Xola admin, then just copy and paste the HTML into your website’s pages wherever you want the Book Now button to appear. Need to update an existing button or add a new checkout flow? No problem—simply copy, paste, or reposition the code as needed without ever touching your JavaScript again.
With your Xola buttons in place, you put convenient booking front-and-center for your customers while ensuring every transaction routes directly through your Xola-powered checkout. No friction, no redirects—just faster reservations and a better guest experience every time.
User Access: Administrator or Marketer roles have access to set up and manage Buttons in Xola.
To grant access to users, click here.
What's covered in this article:
Button Set Up
- Navigate to Settings > Button Code.
- Paste Step 1 code into your site's header or footer.
- Use the
icon to copy the JavaScript code in Step 1.
- Use the
-
- Paste this code into your website's universal header or footer. It should be the last piece of code in your
<head> </head>tag.
- Paste this code into your website's universal header or footer. It should be the last piece of code in your
Note: Once you install the Javascript you do not need to ever repeat this step!
- 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.
- Pop-up Checkout
-
-
- 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:
-
-
- URL Checkout
- Utilizes a URL to trigger a pop-up Checkout window.
- Step 3 will be to Copy + Paste the Button Code below.
- URL Checkout
Note: URL checkout will not track Google Analytics for your account if you do not install the Xola Javascript.
- Copy and paste the 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 information 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
icon. 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
icon to copy the button HMTL code to add to your site.
- Preview: To preview the checkout experience, click on the
- 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.
Multi-Item Checkout
Multi-Item Checkout buttons must be created manually.
- Navigate to Settings > Button Code > Multi-Item.
- Click +Create New Button.
- Enter 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 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 icon. 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 icon to copy the button HMTL code to add to your site.
- Edit Products on buttons: Click on the
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
icon.
- Preview: To preview the checkout experience, click on the
- 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.
Timeline Checkout
- Timeline Checkout buttons must be created manually.
- Navigate to Settings > Button Code > Timeline.
- Click +Create New Button.
- Enter 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 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 icon. 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 icon to copy the button HMTL code to add to your site.
- Edit Products on buttons: Click on the 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 icon.
- Preview: To preview the checkout experience, click on the
- 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.
Gift Checkout
- Gift buttons must be created manually.
- Navigate to Settings > Button Code > Gifts.
- Click +Create New Button.
- Enter 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 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 icon. 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 icon to copy the button HMTL code to add to your site.
- Edit Gifts on buttons: Click on the 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 icon.
- Preview: To preview the gift checkout, click on the
