Squarespace

Adding Xola buttons to a Squarespace is quite simple. This article provides step-by-step instructions on how to integrate the Xola booking buttons on your company website.

1. Obtain Xola's Global JS Code. Navigate to Settings > Button Code and copy the code from Step 1.

2. Paste JS code snippet in Squarespace

   • From the Squarespace website editor, click on Website in the lefthand column.

   • Select Pages.

   • At the bottom of that column, under the Utilities section, select Website Tools.

   • Select Code Injection

   • Paste the Xola's Global JS code from Step 1 as the very last item in the header text box that appears in this section.

   • Select Save.

3. Obtain the checkout button code. Please follow these steps to locate the button code:

   • Login to your Xola account

   • Navigate to Settings > Button Code

   • Under Step 2, ensure you have the correct checkout type selected. 

   • Under Step 4 find the button you would like to link to and click the 'Copy' button to the right of the experience name.

   • 

   • Tip: Not sure what checkout type to use? Please see the Xola Checkout Types article for a more in-depth look at the different checkout types available to you. 

4. Insert Book Now button Code on a Squarespace page.

   • Navigate to the Squarespace website editor.

   • Find the page you want to add a Xola checkout button to.

   • Hover over the space on the page to which you'd like to add buttons, and click on Edit in the black menu that pops up.

   • Hover again over the spaces where you want to add Xola buttons. There will be a bold blue line with a '+' sign in the middle of the area where you will insert the code. Click the plus sign where you would like to button to appear, and then choose the </> Code option.

   • Paste your Xola checkout button code.

   • Select Save.

   Tip: You won't be able to see the button immediately after saving. You'll need to visit the page's live URL to see how the button looks on the page.