Wordpress.com

Implementing Xola buttons in Wordpress.com can be done in 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 differently. Instructions on how to install buttons on WordPress.org 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 Free, Personal, and Premium Plans

1. Retrieve the booking URL from your Xola account. To do this, navigate to Settings > Button Code. Under step 3, find the button you would like to link to and click the 'Preview' button 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 navigating to Settings > Button Code and copying the code from section 1. Detailed Instructions
2. Install the '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.
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 step 3, find the button you would like to link to and click the 'Copy' button to the right of the listing name
   • 

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 the 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 setup - 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 this 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.