--- title: Wordpress.com description: Integrate booking buttons into your WordPress.com website to streamline reservations. Depending on your plan, you can add buttons by linking to Xola's booking URLs or by embedding code using plugins. --- [Skip to content](https://support.xola.com/wordpresscom#main-content) English Show submenu for translations [![Xola](https://support.xola.com/hubfs/logo.svg)](https://www.xola.com/) - [Home](https://support.xola.com/) - [24/7 Live Support](https://www.xola.com/support/) Open main navigation Close main navigation - [Home](https://support.xola.com/) - [24/7 Live Support](https://www.xola.com/support/) - English Show submenu for translations - [Login](https://xola.com/_public/login.html) [Login](https://xola.com/_public/login.html) How can we help you? - There are no suggestions because the search field is empty. 1. [Help Center](https://support.xola.com/?hsLang=en) 2. [Getting Started](https://support.xola.com/getting-started?hsLang=en) 3. [Website Integration & Installation](https://support.xola.com/getting-started?hsLang=en#website-integration-installation) # Wordpress.com ## Easily add booking buttons to your WordPress.com site Adding **Xola** buttons to your **WordPress.com** site is a great way to make your experiences bookable directly from your website. Depending on your WordPress.com plan, there are two ways to get these buttons live. Whether you're on a Free plan or Business plan, this article walks you through the right steps for your setup. **Note:** WordPress.com and WordPress.org are different platforms. This guide is specifically for **WordPress.com** users. If you're using **WordPress.org**, [click here for those instructions.](https://support.xola.com/wordpressorg?hsLang=en) **User Access:** **Administrator** or **Marketer** roles have access to set up and manage Buttons in Xola. To **grant access** to users, [click here](https://seller.xola.app/settings/users). --- **What's covered in this article:** - [For Free, Personal, and Premium Plans](https://support.xola.com/wordpresscom#for-free-personal-and-premium-plans) - [Step 1: Get Your Xola Booking URL](https://support.xola.com/wordpresscom#step-1a) - [Step 2: Add a Button Block in WordPress.com](https://support.xola.com/wordpresscom#step-2a) - [For Business Plans](https://support.xola.com/wordpresscom#for-business-plans) - [Step 1: Get Xola’s Global JavaScript Code](https://support.xola.com/wordpresscom#step-1b) - [Step 2: Install the “Simple Custom CSS and JS” Plugin](https://support.xola.com/wordpresscom#step-2b) - [Step 3: Add the Global JavaScript to Your Site](https://support.xola.com/wordpresscom#step-3b) - [Step 4: Get Your Button Code from Xola](https://support.xola.com/wordpresscom#step-4b) - [Step 5: Add the Button Code to Your WordPress Page](https://support.xola.com/wordpresscom#step-5b) --- ### For Free, Personal, and Premium Plans If you're on a Free, Personal, or Premium WordPress.com plan, you won’t be able to add custom JavaScript - but you can still link to Xola checkout pages using buttons. #### Step 1: Get Your Xola Booking URL - In your Xola account, navigate to **[Settings \> Button Code](https://seller.xola.app/settings/buttons).** - In **Step 2**, choose the checkout type URL. - Scroll to **Step 3**, and find the experience you want to link. - Click the  ![37502050859163](https://support.xola.com/hs-fs/hubfs/Imported%20sitepage%20images/37502050859163.png?width=32&height=24&name=37502050859163.png) icon to copy the button URL to add to your site. ![37505109560731](https://support.xola.com/hs-fs/hubfs/Imported%20sitepage%20images/37505109560731.png?width=657&height=538&name=37505109560731.png) This URL will look something like: `https://checkout.xola.com/your-experience-link` #### Step 2: Add a Button Block in WordPress.com - Navigate to the page where you’d like to add your Xola button. - Click the **+Add Block** button. - Under the **Layout Elements** section, choose the **Button** block. - Click on the button to edit it: - Paste the **Xola booking URL** in the link field. - Update the button text to say something like “Book Now” or “Reserve Your Spot.”                ![mceclip1-1](https://support.xola.com/hs-fs/hubfs/Knowledge%20Base%20Import/mceclip1-1.png?width=231&height=259&name=mceclip1-1.png)![Image\_2018-12-18\_at\_7.56.46\_AM](https://support.xola.com/hs-fs/hubfs/Knowledge%20Base%20Import/Image_2018-12-18_at_7.56.46_AM.png?width=303&height=137&name=Image_2018-12-18_at_7.56.46_AM.png)  That’s it! Your button is now linked to a live Xola checkout page. --- ### For Business Plans Business plan users on WordPress.com have more flexibility, specifically, the ability to install custom JavaScript and plugins. #### Step 1: Get Xola’s Global JavaScript Code - Log into your Xola account. - Go to **[Settings \> Button Code](https://seller.xola.app/settings/buttons)**. - Under **Step 1**, use the  ![37502050859163](https://support.xola.com/hs-fs/hubfs/Imported%20sitepage%20images/37502050859163.png?width=29&height=22&name=37502050859163.png) icon to copy the JavaScript code.  ![37505084698523](https://support.xola.com/hs-fs/hubfs/Imported%20sitepage%20images/37505084698523.png?width=605&height=411&name=37505084698523.png) #### 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](https://wordpress.org/plugins/custom-css-js/). - 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](https://seller.xola.app/settings/buttons)**. - 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  ![37502050859163](https://support.xola.com/hs-fs/hubfs/Imported%20sitepage%20images/37502050859163.png?width=29&height=22&name=37502050859163.png) icon to copy the button HTML code to add to your site. ![37505084700443](https://support.xola.com/hs-fs/hubfs/Imported%20sitepage%20images/37505084700443.png?width=596&height=614&name=37505084700443.png) **Need help picking the right checkout type? **Check out our [Xola Checkout Types](https://support.xola.com/button-installation?hsLang=en#checkout) guide to see which option fits your business best. #### Step 5: Add the Button Code to Your WordPress Page - In WordPress, click **Pages** from the left-hand menu. - Choose the page where you want to add the button. - Depending on your theme and page builder, locate a way to add **Custom HTML** or a **Custom HTML block**. - Paste the **Xola button HTML code** into the designated section. **Note:** Because WordPress themes and editors can vary, your exact method may differ slightly. If something doesn’t look quite right, check your theme’s documentation or support for help inserting HTML. - Click **Preview Changes** to see how it looks. - If everything looks good, hit **Update** to publish your changes. **Reminder:** Don’t forget to click **Update -** if you skip this step, your button won’t go live. - [Getting Started](https://support.xola.com/getting-started?hsLang=en#main-content) - [Account Setup & Configuration](https://support.xola.com/getting-started?hsLang=en#account-setup-configuration) - [Website Integration & Installation](https://support.xola.com/getting-started?hsLang=en#website-integration-installation) - [Flex Plans](https://support.xola.com/getting-started?hsLang=en#flex-plans) - [Managing Purchases & Customers](https://support.xola.com/managing-purchases-customers?hsLang=en#main-content) - [Purchases Management](https://support.xola.com/managing-purchases-customers?hsLang=en#purchases-management) - [Reservation Management](https://support.xola.com/managing-purchases-customers?hsLang=en#reservation-management) - [Customer Management](https://support.xola.com/managing-purchases-customers?hsLang=en#customer-management) - [Customer Data & Engagement](https://support.xola.com/managing-purchases-customers?hsLang=en#customer-data-engagement) - [Reporting](https://support.xola.com/reporting?hsLang=en) - [Integrations & Advanced Tools](https://support.xola.com/integrations-advanced-tools?hsLang=en#main-content) - [Xola App Store Integrations](https://support.xola.com/integrations-advanced-tools?hsLang=en#xola-app-store-integrations) - [Partner & Agent Management](https://support.xola.com/integrations-advanced-tools?hsLang=en#partner-agent-management) - [Marketing & Tracking Integrations](https://support.xola.com/integrations-advanced-tools?hsLang=en#marketing-tracking-integrations) - [Mobile and Hardware](https://support.xola.com/mobile-and-hardware?hsLang=en#main-content) - [Mobile Tools and Apps](https://support.xola.com/mobile-and-hardware?hsLang=en#mobile-tools-and-apps) - [Hardware Setup & Devices](https://support.xola.com/mobile-and-hardware?hsLang=en#hardware-setup-devices) - Company - [About Us](https://www.xola.com/about) - [Careers](https://www.xola.com/team) - [Press](https://www.xola.com/press) - [Support](https://www.xola.com/support) - [Security Policy](https://www.xola.com/security-policy/) - Resources - [Articles](https://www.xola.com/articles/) - [Help Center](https://support.xola.com/) - [Success Stories](https://www.xola.com/success-stories/) - [App Store](https://www.xola.com/app-store) - [Demo](https://www.xola.com/demo) - [Xola Universe](https://www.xola.com/universe/) - Documentation - [API Documentation](https://developers.xola.com/) - [Payment Services Agreement](https://www.xola.com/payment-services-agreement/) - [Terms](https://www.xola.com/terms/) [![logo](https://support.xola.com/hubfs/logo.svg "logo")](https://www.xola.com/) © 2026 Xola Inc. All rights reserved. [Privacy Policy](https://www.xola.com/privacy-policy)     [Terms of Service](https://www.xola.com/terms)