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 (Subscription), Growth (Per Booking), 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?
- This feature is available in both our classic version using items (Inventory > Items) and our newest version using products (Inventory > Products). → Learn more about products
Setting your categories to display as dropdown menus or tabs
Back to topYour 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/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!
|
Currently, the Booking Widget does not have the option to configure category display order. |
Hiding the search field and calendar
Back to topThese 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 display
Back to topAre you placing the Booking Widget code onto a webpage for specific items/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/products. Select the ones you like by checking each one in turn.
All other items/products are filtered from the Booking Widget, providing an uncluttered view of the select offerings!
|
Expert Tips from Checkfront Support: "You can offer items/products to select Customers simply by adding your item/product to a hidden category and then sending the Customer a direct link to that item/product. Let me explain how!"
Note, while the category does not display in the Booking Widget, it is still visible on the Hosted Customer Booking Page. You can also create a widget for that specific item/product instead of creating a shareable link. |
Including a discount code in the booking widget
Back to topIf 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 widget
Back to topFont 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 family
Back to topDoes 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 date
Back to topDo 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 widget
Back to topThat'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 your advanced options for configuring the Booking Widget.
< Accessing Booking Widget settings | Configuring advanced Booking Widget options >