Learn about the basic configurable options for the Booking Widget, including those for categories, search field and calendar pickers, inventory, discount codes, font colour and family, and default calendar date. We also provide a brief introduction to generating and previewing code.
New to the Booking Widget? Read the first article in this series for an introduction to the Booking Widget.
Which plans include this feature?
Legacy: Soho, Pro, Plus, Enterprise, Flex
New: Starter, Growth, Managed | Learn more about our new plans or how to change your plan.
Where can I find this feature using the top menu?
Manage > Integrations > Website Integrations > Booking Widget
What more do I need to use this feature?
- Ability to copy and paste into your website code or help from a skilled person to do this for you!
Which Checkfront version supports this feature - classic, new or both?
- The Booking Widget feature is available to both those using items (Inventory > Items), a key feature of our classic version of Checkfront, and those using products (Inventory > Products), a key feature of our newest version of Checkfront.
New to Checkfront - Products ✨
With our newest version of Checkfront, we have added products (Inventory > Products) as the successor to items (Inventory > Items).
Are you interested in migrating to our newest version? Please reach out to our Technical Support team for more information.
Setting your categories to display as dropdown menus or tabsBack to top
Your first configuration option is to choose whether to display categories of items/products as a Dropdown menu or Tabs.
One option to select from is Category Display: Dropdown. This means that categories are listed within a dropdown menu on your Booking Widget Booking Page with All Categories selected by default, as shown above.
Your Customers can refine the list of items or products displayed by selecting a specific category. This is a space-saver if you have lots of categories to list!
Alternatively, you can select Category Display: Tabs.
This presents categories as tabs that can be selected to reveal the related item or product listings. This is a user-friendly option if you have space, as category options are more readily available...and tabs look pretty stylish, too!
Hiding the search field and calendarBack to top
These tools can help your Guests find the right item/product to book by keyword and date from a calendar picker
Sometimes, you may wish to simplify the booking form on your website. In this case, you can choose to Hide search & calendar from view.
Hiding the search and calendar from view means only the date picker appears, allowing Customers to filter for items/products based on the Start Date they specify.
If your Booking Page is configured to use the Detail Page layout (Manage > Layout > Booking Page > Booking Page Layout), then this setting also controls whether the calendar displays on the page or not.
With the Hide search & calendar option selected, both the search field and calendar are no longer visible.
Selecting inventory to displayBack to top
Are you placing the Booking Widget code onto a webpage for specific items or products? Then, you can use the Display option to select which ones should be included on the page.
Uncheck the box labelled All Items and Categories for items or All Products and Categories for products to reveal the individual items or products. Select the ones you like by checking each one in turn.
All other items or products are filtered from the Booking Widget, providing an uncluttered view of the select offerings!
Including a discount code in the booking widgetBack to top
If you have a Discount Code you would like to include in the Booking Widget automatically, you can select it from this dropdown list.
There is a known issue with the discount code not applying to product-grouped items.
All prices shown to the Customer now reflect the discount you chose, with the discount code's name displayed in brackets to illustrate that the discount has been applied.
Choosing the font colour for your booking widgetBack to top
Font Color is a pretty self-explanatory option! If you wish the text in the Booking Widget to be a different colour, choose one from the colour picker or specify the colour by entering the matching hexadecimal code.
Most text areas on the Booking Widget reflect a font colour change, including the date field label, the product (item) title, and the product (item) details.
See the above screenshot for an example of which text changes if the font changes to red.
Do you want other text areas on the Booking Widget to show a different font colour? Targeting these text areas for a different colour may be possible using custom CSS entered in our CSS editor.
Learn more about the CSS editor here:
Specifying a font familyBack to top
Does your website use a specific standard font family like Arial or Tahoma? Then, you can enter the font family name here.
Once published, the Booking Widget takes on this font. If left blank, the Booking Widget uses the same font (and font back-ups) as the Booking Page: Helvetica Neue, Helvetica, Roboto, Arial, and sans-serif.
Different browsers support different fonts. All major browsers support web-safe fonts, so are more likely to work than others!
Selecting the default calendar dateBack to top
Do you need a specific start Date selected by default? Then, pick a default calendar date in the future. Click on the field to open the calendar and select your date. You can use the small black arrows to advance the months back and forth.
This fast-forwards the Booking Widget, so a specific start Date is selected by default instead of the current date. This option enables the Customer to land on a set date at some point in the future. The Customer can still select another available date to book.
Learn more about configuring the default calendar booking length that's applied to the Booking Widget here:
Generating code and previewing the booking widgetBack to top
That's it for the basic options! You can click the Generate Code button and copy and paste the results into your webpage. Before you do that, you may wish to Preview your changes.
Next, check out Advanced options for configuring Checkfront!
< Accessing Booking Widget settings | Configuring advanced Booking Widget options >