Wordpress.org

Integrating Xola buttons into your WordPress.org website is a straightforward process, and it’s a great way to allow your customers to easily reserve your experiences right from your site. In this article, we’ll walk you through the steps to get your Xola “Book Now” buttons up and running in no time.

Note: WordPress.org and WordPress.com are two different platforms, and the setup process for Xola buttons is different for each. If you’re using WordPress.com, click here for those instructions.

What's covered in this article:

• Step 1: Get Xola’s Global JavaScript Code
• Step 2: Install the “Simple Custom CSS and JS” Plugin
• Step 3: Add the Global JavaScript to Your Site
• Step 4: Get Your Button Code from Xola
• Step 5: Add “Book Now” Buttons to Your WordPress Pages

Step 1: Get Xola’s 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: 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 “Book Now” Buttons to Your WordPress Pages

Now, it’s time to place the buttons on your website pages. It is important to note that depending on your WordPress site's setup, there may be many ways to add custom HTML on your pages. Due to WordPress's highly customizable nature, this means certain WordPress themes may require different steps to add Xola HTML code, which may affect the results that you see.

• In your WordPress dashboard, click Pages from the left-hand menu.

• Select the page where you want to add your button.

• Depending on your theme and editor (Classic, Block Editor, Elementor, etc.), you may have different ways to insert custom HTML.

  • Look for a Custom HTML block or Text/Code editor.

• Paste your Xola button HTML code into the desired location.

• Click Preview Changes to see how it looks.

• Once everything looks good, click Update to publish your changes.

Important: If you don’t click Update, your changes won’t be saved or published to your live site.