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 different. Instructions on how to install buttons on WordPress.com can be found here.
- Obtain Xola's Global JS Code.
Navigate to Settings > Button Code and copy the code from section 1. Detailed Instructions
- Install 'Simple Custom CSS and JS' plugin.
You can find the plugin by following this link or searching for it from the add new plugin section of your WordPress.org account.
- 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.
- Obtain checkout button code.
Time to add your checkout button code. To find that, please follow these steps:
- Login to your Xola admin.
- Select Settings.
- Select Button Code.
- Hover over the button you would like to put on the site, and select Copy.
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.
- Add checkout button code to your WordPress pages.
Now, we will be adding your book now buttons! First, 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 that there is a chance that certian Wordpress themes will require different steps to add in Xola HTML code, and my affect the results that you see.
Add the book now buttons by pasting the HTML button codes into the text boxes in Wordpress. You can click "Preview Changes" on the righthand side to see a preview. Once you're satisfied with the changes, select update.
Tip: If you do not click update, your changes will not be published.