To allow customers to make online bookings, you'll need to implement Xola Book Now button code on your website. You can find this code you need by navigating to Settings > Button Code, and following the steps below. Please note that installing the Javascript only needs to be done once per website - From then on you can simply paste in new button HTML code as needed.
What's covered in this article:
Button Set Up
- Navigate to Settings > Button Code.
- Javascript: Copy the JavaScript code at the top of the page.
- Paste this code into your website's universal header or footer. It should be the last piece of code in your <head> </head> tag.
- Note: Once you install the Javascript you do not need to ever repeat this step!
- CSS:
- Choose Your Checkout Type:
- Pop up Checkout: Iframe allows people to stay on your site but pop-ups a separate check out window. Select whether you'd like to use Xola's green Default Book Now button or if you'd like to designate your own Custom CSS button class.
- Embedded Checkout: Embeds the checkout on your website, no extra windows. Click here for more information.
- URL Checkout: Utilizes a URL to trigger a pop-up Checkout window.
- Choose Your Checkout Type:
Note: URL checkout will not track Google Analytics for your account if you do not install the Xola Javascript.
- HTML: Select or generate your HTML code! Single-Item Checkout is automatically generated for each listing. When you create a Multi-Item, Timeline, or Gifts button, the HMTL code is generated when you click Save.
- Paste this HTML code in the text editor of your webpage, save, and publish. The Book Now button should now appear and pull up the appropriate checkout when clicked.
Create a create a Multi-Item, Timeline, or Gifts button
- Navigate to Settings > Button Code > and choose either Multi-Item, Timeline, or Gifts.
- Click +Create New Button.
- Enter in a Button Name.
- Drag the listings that you would like to appear in the checkout for this button from the left side to the right and then release.
- Click Save to create the button.
- Hover over the newly created button code and click Copy.
- Follow the steps above to add it to your website.
Edit Buttons
- Preview: To preview the checkout experience, hover over the button and click Preview. This will open up the checkout in a secure tab in your browser. You can also use this URL to send a direct checkout link to a customer via email.
- Edit Listings: To remove a listing from a button, drag the listing from the right side to the left and release. To add a listing to a button, drag the listing from the left side to the right and release. Click Save. Your button will automatically update on your site!
- Archive: If you no longer need this button, you can delete it by clicking Archive.