Adding Xola buttons to your WordPress.com site is a great way to make your experiences bookable directly from your website. Depending on your WordPress.com plan, there are two ways to get these buttons live. Whether you're on a Free plan or Business plan, this article walks you through the right steps for your setup.
Note: WordPress.com and WordPress.org are different platforms. This guide is specifically for WordPress.com users. If you're using WordPress.org, click here for those instructions.
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:
For Free, Personal, and Premium Plans
If you're on a Free, Personal, or Premium WordPress.com plan, you won’t be able to add custom JavaScript - but you can still link to Xola checkout pages using buttons.
Step 1: Get Your Xola Booking URL
-
In your Xola account, navigate to Settings > Button Code.
-
In Step 2, choose the checkout type URL.
-
Scroll to Step 3, and find the experience you want to link.
-
Click the
icon to copy the button URL to add to your site.
This URL will look something like: https://checkout.xola.com/your-experience-link
Step 2: Add a Button Block in WordPress.com
- Navigate to the page where you’d like to add your Xola button.
- Click the +Add Block button.
- Under the Layout Elements section, choose the Button block.
- Click on the button to edit it:
- Paste the Xola booking URL in the link field.
- Update the button text to say something like “Book Now” or “Reserve Your Spot.”
That’s it! Your button is now linked to a live Xola checkout page.
For Business Plans
Business plan users on WordPress.com have more flexibility, specifically, the ability to install custom JavaScript and plugins.
Step 1: Get Xola’s Global JavaScript Code
-
Log into your Xola account.
-
Go to Settings > Button Code.
-
Under Step 1, use the
icon to copy the JavaScript code.
Step 2: Install the “Simple Custom CSS and JS” Plugin
To easily add custom scripts to your site, you’ll first need to install a plugin:
-
Log into your WordPress.org dashboard.
-
Navigate to Plugins > Add New.
-
Search for Simple Custom CSS and JS, or use this direct link.
-
Click Install Now, then Activate.
Step 3: Add the Global JavaScript to Your Site
Once the plugin is installed:
-
Go to Custom CSS & JS > Add Custom JS.
-
Paste in the JavaScript code you copied from Xola.
-
Give your code a clear title (e.g., "Xola Global JS").
-
Click Publish.
That’s it! Your site is now ready to recognize and render Xola buttons.
Step 4: Get Your Button Code from Xola
- 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 5: Add the Button Code to Your WordPress Page
- In WordPress, click Pages from the left-hand menu.
- Choose the page where you want to add the button.
- Depending on your theme and page builder, locate a way to add Custom HTML or a Custom HTML block.
- Paste the Xola button HTML code into the designated section.
Note: Because WordPress themes and editors can vary, your exact method may differ slightly. If something doesn’t look quite right, check your theme’s documentation or support for help inserting HTML.
- Click Preview Changes to see how it looks.
- If everything looks good, hit Update to publish your changes.
Reminder: Don’t forget to click Update - if you skip this step, your button won’t go live.