Plan Availability: ✓ Soho | ✓ Pro | ✓ Plus | ✓ Enterprise | ✓ Flex |
Locate: Manage > Integrations > Website Integrations > Booking Widget
Prerequisites:
- Ability to copy and paste into your website code or help from a skilled person to do this for you!
- 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 ✨ Products (Inventory > Products) is the successor feature to (Inventory > Items) and is available in our newest version of Checkfront. Not yet on our newest version and interested in upgrading? Please contact our Technical Support team for more information. Discover more product-related help articles here: Products (New). |
In this article, we cover all your basic options for configuring the Booking Widget to suit your design needs!
Read the full set of articles in this series for a complete understanding of how the integration can be configured and added to your website.
Category Display
Back to top
Your first configuration option is to choose whether to display categories of items or 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!
Hide Search & Calendar
Back to top
The search field can be useful for finding just the right item or product to book.
Sometimes, though, you may wish to display a more basic 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 or 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. Magic!
Display
Back to top
Are you placing the Booking Widget code onto a webpage that is aimed at specific items or products? Then, you can use the Display option to select which ones are to 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!
Discount Code
Back to top
If you have a Discount Code you would like to automatically include in the Booking Widget, then 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 have chosen with the name of the discount code displayed in brackets to illustrate that the discount has been applied.
Font Color
Back to top
Font Color is a pretty self-explanatory option! If you wish the text in the Booking Widget to be a different color, then simply choose one from the color picker or specify the color by entering the corresponding hexadecimal code.
Most text areas on the Booking Widget reflect a font color 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 color is changed to red.
 |
Do you want other text areas on the Booking Widget to show a different font color? It may be possible to target these text areas for a different color using custom CSS entered in our CSS editor. Learn more about the CSS editor here: |
Font Family
Back to top
Does your website use a specific standard font family, such as 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 which is: Helvetica Neue, Helvetica, Roboto, Arial, and sans-serif.
Different browsers support different fonts. Web-safe fonts are those that are supported by all major browsers, so are more likely to work than others!
Date
Back 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 that 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: |
Generate Code and Preview
Back to top
That's it for the basic options! At this point, you can click the Generate Code button and copy and paste the results into your webpage. Before you do that, though, you may wish to Preview your changes.
Next, check out Advanced options for configuring Checkfront!
< Booking Widget: Accessing Set up | Booking Widget: Configuration Options - Advanced >