Wix

Adding Xola buttons to your Wix website is a simple way to let your customers book experiences directly from your site, without needing to leave the page or open a new tab. In this guide, we’ll walk you through the step-by-step process to install Xola’s checkout buttons on any Wix page, helping you create a smooth and integrated booking experience for your visitors.

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:

Step 1: Add the Xola JavaScript Code to Wix
Step 2: Locate the Xola Checkout JavaScript
Step 3: Add a Button to Your Wix Page
Step 4: Get the Xola Booking URL
Step 5: Link the Button to the Xola Checkout

Step 1: Add the Xola JavaScript Code to Wix

To get started, you’ll need to add Xola’s global JavaScript to your Wix site’s header. This ensures your buttons will work properly when clicked.

Log into your Wix account.
Navigate to Settings > Custom Code.

Click Add New Custom Code.

Step 2: Locate the Xola Checkout JavaScript

Now, let’s grab the code from your Xola account:

Log into your Xola account.
Go to Settings > Button Code.
Under Step 1, use the icon to copy the JavaScript code.

Paste this code into the Custom Code section in Wix as instructed in Step 1. This will allow the checkout buttons to function correctly on your live site without opening in a new tab or window.
The screenshots below show how to properly add Xola Checkout JavaScript into the Wix Custom Code settings.

Step 3: Add a Button to Your Wix Page

Next, it’s time to place a button on the page where you want your Xola checkout to appear:

From your Wix Dashboard, click Site & App.
In the top right corner, click Edit Site to open the site editor.
Navigate to the page where you want to add the button.
In the left-hand toolbar, click the + icon.
Select Button from the list of elements and drag it to where you’d like it to appear on the page.