New Checkout Flow - how to generate the checkout code for your website?

Upgrade your online checkout flow to provide a cleaner and improved user experience for your customers.  Some new features of the new checkout flow include:

  • Options to embed on your website or use a lightbox popup
  • Customizable settings so the checkout flow displays your bookings just the way you want them
  • Works seamlessly on all mobile devices

Our new online checkout flow is really easy to customize and set up. This article describes how to generate the checkout flow code you'll need to place on your website.

If you already have your checkout flow code, read this article to learn how to place on your website. 

There are two types of online checkout flows you can create:

  • Embedded - This checkout flow is embedded into your website
  • Lightbox - This checkout flow is a popup on top of your website

Embedded Checkout On the Page

The Embedded checkout flow is great for newer websites that have room to place the calendar or product list.  It looks like this:

Lightbox Popup in Front of the Page (from Book It Button)

Lightbox is great for websites that aren't mobile responsive or don't have real estate for a calendar.  This is a Book It Button on the page that launches a modular checkout flow without leaving your site.  Here is the Book It Button.

Clicking the Book It Button launches the lightbox right on your website like this:

Generating Checkout Code

To generate a new website checkout code, go to Promote in the main navigation then Widgets.

The setup wizard will ask you a number of questions on the type of checkout flow you want to put on your website.  At the end of the wizard, it will provide you with a checkout code to place on your website. 

You have two options for your checkout flow:

  • Calendar showing all your availabilities (can be month, week, or day) - The Calendar is only available for activity products.
  • Product list showing a list of all your active products. For rental products, this provides the best customer experience. 

Full Calendar 

After choosing full calendar, choose if you want embedded on your website page or a lightbox above the page. 

The next page will show the checkout code.  Before placing on your website, you can customize a number of calendar settings

  • Calendar View: Choose between month, week, or day view
  • Information show on titles: Decide how availabilities appear on the checkout flow
  • Information on sold out titles: Customize how to display sold out availabilities
  • Information on past dates behavior: Customize how past availabilities display
  • Information on availability view: Choose the default view for the calendar
  • Information on addons price rollup: Customize pricing display
  • Checkout Accent Color: Customize the color of the checkout flow buttons
  • Displayed product: Choose which products to display in the checkout flow

Product List

Choose if you want your checkout flow to include product images and descriptions:

  • Product Page + Checkout includes pictures and descriptions with the checkout flow
  • Just Checkout does not include pictures and descriptions and should be used if your page already has them

Finally choose where to place the checkout flow:

The next page will show the checkout code.  Before placing on your website, you can customize a number of settings for the product list:

  • Checkout accent color: Customize the color of the checkout flow buttons
  • Product list button text: Enter the text for the product booking such as "Book Now" or "Reserve Now"
  • Displayed products: Choose which products to display in the checkout flow

What to do after you have the checkout flow code?

When complete, you'll need to copy and paste the checkout code onto your website.  

Read this article to learn how to place the checkout code on your website and start taking bookings!  

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request