Adding Xola “Book Now” buttons to your Weebly site is quick and easy, providing a great way to allow your visitors to reserve experiences directly from your website. This guide walks you through each step—from installing the necessary JavaScript to placing buttons on your desired pages—ensuring a seamless booking experience that keeps customers engaged and ready to book.
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 Xola’s Global JavaScript to Your Site
To make sure your buttons function properly, you’ll first need to install Xola’s JavaScript snippet in your Weebly site’s header.
-
Log into your Weebly account.
-
From the top navigation, click Settings.
-
In the left-hand menu, select SEO.
-
Log into your Xola account.
-
Go to Settings > Button Code.
-
Under Step 1, use the
icon to copy the JavaScript code.
-
Return to Weebly, and paste this code into the Header Code box.
-
Click Save in the lower right corner.
Step 2: Copy Your Xola Checkout Button Code
Next, let’s grab the button HTML you’ll be embedding on your page:
-
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
icon to copy the button HTML code to add to your site.
Need help picking the right checkout type? Check out our Xola Checkout Types guide to see which option fits your business best.
Step 3: Add the Button Code to a Weebly Page
With your JavaScript in place and button code copied, you’re ready to add a button to your site:
- Go back to your Weebly Dashboard.
- Click Edit Site to launch the site editor.
- Navigate to the page where you want the Xola button to appear.
- From the left-hand toolbar, select Embed Code and drag it to the spot where you'd like the button to go.
- Once the module is on the page, click the text that says Click to set custom HTML.
- Then click Edit Custom HTML.
- Paste your Xola button HTML into the box.
- Click Publish in the top right-hand corner of the Weebly editor.
Note: The button may appear blank in the editor, but don’t worry, it will display correctly once the page is published.