Custom Button Style

Xola provides a default book now button that is styled to work well with most site layouts and themes. Follow the instructions below if the default book now button does not work with your site.

The Xola button is a small application that runs when your web page is loaded into a browser. Everything that you need to set it up is located on the SETTINGS -> Button Code page in your Xola Dashboard. 

What makes the Xola Button work:

• The Button Script - A small JavaScript runs as part of your web page to create the button for each of your listings when the page is loaded by a browser. 
• The Checkout Type - Select the options for how you want the Xola button to work on your site.
• The Button Code - A line of HTML code for you to copy and paste into your site HTML.
• Your site CSS - The custom button style is defined in your site CSS file.

Warning: Customizing the Xola Button requires editing your web site.
Please involve you web developer if you are not comfortable with making these changes yourself.

The Button Code Settings Page

1. Javascript: Hover over the script box and use the blue COPY button to copy the JavaScript from this page and paste it into the global header or global footer code for your site. You only need this script on your code once and it will be used by all of the Xola buttons on your site. 
2. Checkout Type: Select the type of checkout button for your site. The button type will determine how the button behaves once it is pushed. When the Default style is selected, Xola produces the green Book Now button. Select Custom in order to customize how the button will look on your site. 
3. Button HTML: Depending on your selection above, Xola will generate a block of HTML that you can copy and paste into your site where you want each button. For our example, we want one button for all of our listings. 

Button Style

Note: Xola recommends using a button generator tool to create the CSS code to style your button.

Scenario: On our new site, all of the buttons on the page are blue and the default green button looks out of place. Follow along to see how we change the button from green to blue. 

We used a button generator to style the button to match our site.

And copied the CSS code that it generated:

.xola-custom {
 box-shadow: inset 0px -3px 7px 0px #29bbff;
 background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
 background-color: #2dabf9;
 border-radius: 3px;
 border: 1px solid #0b0e07;
 display: inline-block;
 cursor: pointer;
 color: #ffffff;
 font-family: Arial;
 font-size: 15px;
 padding: 15px 25px;
 text-decoration: none;
 text-shadow: 0px 1px 0px #263666;
 &:hover {
 background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
 background-color: #0688fa;
 }
 &:active {
 position: relative;
 top: 1px;
 }
}

Remember when you selected Custom for the button type in step 2? That selection modified the button HTML to include a class named "xola-custom" into the HTML.

One last step and we are done setting up. The default Xola button uses an image for the button checkmark and text. You can create an image for your button or you can put text into the button HTML like we have below. 

<div class="xola-checkout xola-custom"
data-seller="5ba946436864eaa7408b45fd" data-version="2">
Book Now
</div> 

The CSS class that you define for the button style must match. 

Using the custom button on your site

Now we are ready to use the custom button on your site. 

• Copy the button JavaScript into the global header or footer of your site
• Configure the button in your Xola settings
• Create a custom style for your button with a CSS class name that includes xola-custom.
• Copy the button HTML from the button settings page
• Paste the button HTML into your web site HTML

Note: Xola recommends developing your button code using a sandbox or test web site. Do not edit your production web site directly. 

We know that this is a lot to take in all at once, so we mocked up the button for you to see in action using the JSFiddle web prototyping site. 

Save all of your web development work and publish your site to see the new button in action. 

Want to know more about checkout? Check out our article, Types of Checkout.