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 Global JS code snippet.

   The code snippet that you need is below. Please copy the code block. You can also get the same code snippet in your Xola admin account by following the instructions from this article.

2. Paste JS code snippet in Squarespace

   • Login to the Squarespace admin dashboard.

   • Select Settings in the page's lefthand column.

   • Select Advanced.

   • Select Code Injection

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

   • Select Save.

3. Obtain checkout button HTML code.

   In this step, we will copy your checkout button code. To find that, please follow these steps:

   • Login to your Xola account

   • Select Settings> Button Code.

   • Hover over the button you would like to put on the site, and select Copy.

   Tip: Not sure what checkout type to use? Please see the Types of Buttons 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 admin homepage.

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

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

   • Hover again over the spaces where you want to add Xola buttons. Sideways teardrop shapes should appear denoting the size and location of the page section you are about to create. You can click one of these and then choose the Code option.

   • Paste you Xola checkout button code.

   • Select Save.

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