Adding Xola buttons to your Squarespace site is a seamless and straightforward process and a great way to make it easy for your customers to book directly from your website. In this guide, we’ll walk you through each step to successfully integrate Xola’s "Book Now" buttons, so your experiences are just a click away for your visitors. Whether you're setting it up for the first time or updating your site, you'll find everything you need right here.
What's covered in this article:
Step 1: Get the Global JavaScript Code
-
Log in to your Xola account.
-
Go to Settings > Button Code.
-
Under Step 1,use the
icon to copy the JavaScript code.
Step 2: Add the JavaScript to Squarespace
-
In the Squarespace website editor, click Website in the left-hand menu.
-
Select Pages.
-
Scroll to the Utilities section at the bottom and choose Website Tools.
-
Click Code Injection.
-
Paste the JavaScript code you copied from Step 1 into the Header section. Make sure it’s the last item in the box.
-
Click Save.
Step 3: Copy Your Xola Button Code
-
Back in your Xola account, navigate to Settings > Button Code.
-
In Step 2, choose the checkout type that works best for you.
-
Scroll to Step 4 and find the experience you want to link.
-
Click the
Need help picking the right checkout type? Check out our Xola Checkout Types guide to see which option fits your business best.
Step 4: Add the Button to a Squarespace Page
-
In the Squarespace editor, go to the page where you'd like to add a Xola button.
-
Hover over the spot you want to place the button and click Edit in the black menu that pops up.
-
Hover again where you want the button to appear. A bold blue line with a + sign will appear in the middle of the area where you will insert the code.
-
Click the + sign and select the
</> Codeblock. -
Paste the HTML code you copied earlier
-
Click 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.