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
- Navigate to Settings > Button Code.
Step 1: Paste this code into your site's header or footer
- Use the
icon to copy the JavaScript code in step one.
-
- 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!
- Paste this code into your website's universal header or footer. It should be the last piece of code in your <head> </head> tag.
Step 2: Choose your checkout type
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.
- Note: All 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:
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
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
-
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 > 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
- 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
-
Copy Code: Use the
-
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 > 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
- 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
-
Copy Code: Use the
-
Edit Products on buttons: Click on the
-
Archive: If you no longer need this button, you can delete it by clicking the
-
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 > 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
- 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
-
Copy Code: Use the
-
Edit Gifts on buttons: Click on the
-
Archive: If you no longer need this button, you can delete it by clicking the
-
Preview: To preview the gift checkout, click on the
-
New to using gifts in Xola? Check out our gift overview article.