Configuring basic Booking Widget options

Customize the Booking Widget to align with your website’s design and enhance the user experience. Adjust colors, fonts, layout, and booking options to create a seamless, attractive interface. Highlight specific services, set default dates, and add branding to make booking easier and more engaging for your Customers.

You can learn about the basic configurable options for the Booking Widget, including categories, search field and calendar, date pickers, inventory, discount codes, font color and family, and the 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.

Accessing the features mentioned in this article

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 items, classic products, or both?

• This feature is available in both our classic version using classic items (Inventory > Items) and our classic version using classic products (Inventory > Products).  → Learn more about products

Choose whether to display item/product categories as a Dropdown menu or Tabs.

1. Go to Manage > Integrations > Website Integrations > Booking Widget.
2. Choose one of the display options from the Options setting - Category Display: Dropdown or Category Display: Tabs, as described below.

Displaying categories with a dropdown menu

Select the Category Display: Dropdown option from the Options menu to present categories in a dropdown menu on your Booking Widget Booking Page, with All Categories selected by default.

Your Customers can refine the list of items/products displayed by selecting a specific category. This layout option is a space-saver if you have lots of categories to list!

Displaying categories with a dropdown menu

Select the Category Display: Tabs option from the Options menu to present your categories as tabs that Customers can select to reveal the related item or product listings, providing a user-friendly option when space is available. Category options are readily available, and the tabs look pretty stylish, too!

Category display order Currently, the Booking Widget does not have the option to configure category display order.

While the keyword search and calendar can help your Guests find the right item or product to book, you can simplify the booking page on your website. In that case, you can use the Hide & search calendar setting.

To hide the search and calendar options, follow these steps.

1. Go to Manage > Integrations > Website Integrations > Booking Widget.
2. Check the Hide search & calendar option next to the Category Display setting under Options.
    

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 you have configured your Booking Page to use the Detail Page layout (Manage > Layout > Booking Page > Booking Page Layout), this setting also controls whether the calendar appears on the page.

With the Hide search & calendar option selected, both the search field and calendar are no longer visible. 

Hiding the date pickers

Back to top
 

You can hide the date picker by following these steps:

1. Go to Manage >  Integrations >  Website Integrations > Booking Widget.
2. Check the Hide date pickers option next under the Options setting.
    

Are you placing the Booking Widget code onto a webpage for specific items/products? Then, you can use the Display option to select which ones the system should include on the page.

1. Go to Manage > Integrations > Website Integrations > Booking Widget.
2. Uncheck the box labeled All Items and Categories, or All Products and Categories, in the Display setting to reveal the individual items/products. 
3. You can just select the ones you like by checking each one in turn.
    

4. Opting to display select categories or items/products filters out all other items/products in the Booking Widget, providing an uncluttered view of the selected offerings!

Expert Tips from Checkfront Support:  How to offer private items/products to select Customers "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!"  - Isadora, Technical Support Specialist Assign your item/product to a new, active category. Exclude the category from display within your Booking Widget (see above). Send a link to the Customer using the item/product ID. https://example.checkfront.com/reserve/?item_id=123 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.

 

If you have a Discount Code you would like to automatically include in the Booking Widget, select it from this dropdown list.

1. Go to Manage > Integrations > Website Integrations > Booking Widget.
2. Select the discount code from the Discount Code menu.

Discount codes do not apply to product-grouped items There is a known issue with the discount code not applying to product-grouped items.

3. All prices shown to the Customer now reflect the discount you chose, with the discount code's name displayed in brackets to indicate that the system has applied the discount.

Font Color is pretty self-explanatory! If you wish, you can change the text color in the Booking Widget's color settings. Choose one from the color picker, or specify the color by entering its hexadecimal code.

1. Go to Manage > Integrations > Website Integrations > Booking Widget.
2. Select the font color from the Front color setting.

Most text areas in the Booking Widget change font color, including the date field label, the product (item) title, and the product (item) details.

Custom CSS entered in the CSS editor Would you like other text areas on the Booking Widget to show a different font color? Targeting these text areas for a different color can be done using custom CSS in our CSS editor. Learn more about the CSS editor here: Booking Page: CSS Editor

Does your website use a specific font family, such as Arial or Tahoma? 

1. Go to Manage > Integrations > Website Integrations > Booking Widget.
2. Enter the font family in the Font family text field, e.g., Arial or Tahoma.

Once published, the Booking Widget takes on this font. If left blank, the Booking Widget uses the same fonts (and fallbacks) 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 they are more likely to work than others!

Do you need a specific start Date selected by default? Then pick a future default calendar date. 

1. Go to Manage > Integrations > Website Integrations > Booking Widget.
2. Find the Date field, click it to open the calendar, and select your date. You can use the small black arrows to advance the months back and forth.

This setting fast-forwards the Booking Widget to select a specific future start date by default, rather than the current date. Customers can still choose another available date.

Learn more about configuration For a detailed look at configuring the default calendar booking length that's applied to the Booking Widget, check out the following article: Setting up your account configuration

That's it for the basic options! 

You can use the Booking Widget with these basic options or make advanced configurations as described in the next article.

Alternatively, you can generate the code for your widget using the button at the bottom of the page.

Next Step

Next, we check out your advanced options for configuring the Booking Widget.

< Accessing Booking Widget settings    |     Configuring advanced Booking Widget options >