Wordpress.com

Implementing Xola buttons in Wordpress.com can be done two ways depending on your plan. Here, you'll find step-by-step instructions on how to integrate Xola on your website both ways.

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

What's covered in this article:

• How to add buttons to a Free, Personal and Premium Wordpress Plans
• How to add buttons to a Business Wordpress Plan

How to add buttons to a Free, Personal and Premium Plans

1. Retrieve the booking URL from your Xola account.

   Navigate to Setting > Buttons Code and hover over the button you would like to link to. Click Preview as shown in the image below

2. Copy the URL that appears in the new tab/window that has opened.
   • This URL should begin with 'https://checkout.xola.com...'
3. Add a button to your Wordpress.com webpage and link to the URL you just copied.

Now, we will be adding your book now buttons to your site!

1. Navigate to the pages where you would like your Xola checkouts to be located in Wordpress.
2. Click the 'Add Block' button at the top of the page and find 'Button' under the Layouts Elements section.
3. Then click on the button to edit it and add the URL you retrieved above and button text.

 .  

How to add buttons to a Business Plan

1. Obtain Xola's Global JS Code by navigate to Settings > Button Code and copy the code from section 1. Detailed Instructions
2. Install 'Simple Custom CSS and JS' plugin.
   • You can find the plugin by searching for it from 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.

Obtain checkout button code.Time to add your checkout button code. To find that, please follow these steps:

• Login to your Xola account
• Select Settings > 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. 

Now, add checkout button code to your WordPress pages.

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 that there is a chance that certian 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 righthand 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.