Implementing Xola buttons in Wix is quite simple, however there are some design limitations to consider when using using Wix in conjunction with Xola (detailed later in this article). Here, you'll find step-by-step instructions on how to integrate Xola book now buttons on your Wix website.
To add Xola buttons to Wix, you'll need to add both Xola's JS code, and specific button HTML at the same time using Wix's admin dashboard tools.
- The first code snippet you'll need: Xola's Global JS Code.
See below for Xola's JS code. You can also find this code snippet in your Xola account by following the instructions from this article.
- The second code snippet you'll need: HTML Button Code.
To find this, follow these steps:
- Login to your Xola admin.
- Select Settings.
- Select Code.
- Hover over the button you would like to put on the site, and select Copy.
Tip: Not sure what checkout type you want to use? Check out this articleTypes of Buttons article for a more in-depth look at checkout types.
- Use Wix admin tools to add your two code types as a single snippet to your page.
The Wix platform does not allow for adding custom code to your global header. So, this means that for each Xola button that you would like to add, you will need to combine the codes from steps one and two of this article. Follow the steps below for each button you would like to deploy:
- Login to the admin dashboard.
- Select Edit Site in your Wix admin dashboard.
- On the left hand side select the + Add button.
- Under the HTML & Flash select HTML Code
- A box will appear on the page and you'll need to select Enter Code
- Paste the code from step one into the box.
- Paste the code from step two into the box.
- Select Update
Design Limitations & Considerations
As mentioned earlier, there are some design limitations on the Wix platform. If you're set on using Wix for your company website, here are some tips and tricks to work around said limitations.
The most important item to be aware of when using Wix as a content management system with Xola buttons is that if the area where Xola's checkout IFrame pops up overlaps with another tour's Book Now button (or even another link), that object will be not activate if clicked. This means that you need to space your Book Now buttons far enough apart on the page to accommodate for the IFrame that will appear when the Book Now button is activated.
If this is something that causes too many aesthetic challenges in your site design, another option is using a Xola checkout url, which will open Xola's checkout window in another browser window or tab.
The link to the mobile checkout is: https://xola.com/checkout#listingId . Here you'll need to replace the alphanumeric code with the listingId of the Xola listing that you would like to direct your customers to.
You can locate a given listing's listingId in two locations in your Xola account: The first is in the Listings tab, click on edit description of your desired listing and copy the alphanumeric code that appears at the end of the pages URL. The second location is in the Code section of your Xola settings. Here, you can find a given listing's ID by selecting "one Button per Listing" and copying the id="" attribute from step 3 of this page.
Making mobile checkout buttons in Wix allows you place buttons wherever you'd like on the page. You can also create buttons that link to the mobile checkout in any content management system.