Wordpress.org

Adding Xola buttons to a Wordpress.org site is quite simple. This article provides step-by-step instructions on how to integrate the Xola booking buttons on your company website.

Note: WordPress.org and WordPress.com are different platforms, and Xola buttons are installed a bit differently. Instructions on how to install buttons on WordPress.com can be found here.


  1. Obtain Xola's Global JS Code. Navigate to Settings > Button Code and copy the code from section 1.
  2. Install 'Simple Custom CSS and JS' plugin. You can find the plugin by following this link or searching for it in the add new plugin section of your WordPress.org account.
  3. Add Xola's Global JS Code to the Simple Custom CSS and JS plugin. Click 'Add Custom JS' and paste the JS code found in step 1 and title the code. Then click Publish.
  4. Obtain the checkout button code. Please follow these steps for finding the button code:
    • Login to your Xola account
    • Select Settings Button Code
    • Under section 3, find the button you would like to link to and click the 'Copy' button to the right of the listing name
    • Button_Code___Xola2.png

Tip: Not sure what checkout type to use? Have a look at the Types of Buttons article for a look at the different options available to you. 


Now, we will be adding your book now buttons!

  1. Navigate to the pages where you would like your Xola checkouts to be located. You can find this by clicking on "Pages" in the lefthand column of WordPress, and then choose the page you wish to edit.
    • Important to note for this step is that depending on your WordPress site's set up - there may be many ways to add custom HTML on your pages. Due to the highly customizable nature of WordPress, this means there is a chance that certain WordPress themes will require different steps to add in Xola HTML code, and may affect the results that you see.
  2. Add the book now buttons by pasting the HTML button codes into the text boxes in WordPress.
  3. You can click "Preview Changes" on the right-hand side to see a preview.  
  4. Once you're satisfied with the changes, select update.

Tip: If you do not click update, your changes will not be published.

Was this article helpful?
0 out of 0 found this helpful