Plan Availability: ✓ Soho | ✓ Pro | ✓ Plus | ✓ Enterprise | ✓ Flex |
Locate: Manage > Add-ons > Website Integrations > Droplet > Setup
Prerequisites: Ability to copy and paste into your website code or some lovely person to do this for you!
In this article, we will cover all your basic options for configuring Droplet to suit your design needs!
Read the full set of articles in this series for a complete understanding of how the add-on 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 as a Drop-down menu or Tabs. By default, Category Display: Drop-down is selected.
This means that Categories will be listed within a Drop-down menu on your Droplet booking page with All Categories selected by default. Your Customers can refine the list of items displayed by selecting a specific Category. This is a space-saver if you have lots of Categories to list!
Alternatively, select Category Display: Tabs.
This will present Categories as Tabs which can be selected to reveal the related item 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 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 based on the Start Date they specify.
If your Booking Page is configured to use the Detailed 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 selected, both the search field and calendar are no longer visible. Magic!
Display
Back to top
If you are placing the Droplet code onto a webpage which is aimed at a specific item or items, you can use the Display option to select which ones are to be included on the page.
Uncheck the box labeled All Items & Categories to reveal the individual items. Select the ones you like by checking each one in turn.
All other items will be filtered from the booking portal, providing an uncluttered view of the select offerings!
Discount Code
Back to top
If you have a Discount Code you would like to be automatically included in the booking portal, you can select it from this drop-down list. Note: There is a known issue with the Discount Code not applying to Product Groupings.
All prices shown to the customer will 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 portal to be a different color, simply choose one from the color picker or specify the color by entering the corresponding hexadecimal code.
Font Family
Back to top
If your website uses a specific standard font family, such as Arial or Tahoma, you can enter it here. Once published, the booking portal will take on the same format; otherwise, the droplet uses the same font (and font back-ups) as the Booking Page which is: Helvetica Neue, Helvetica, Roboto, Arial, 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!
Also see, How to import Google fonts into your Booking system.
Date
Back to top
If required, you can fast forward the booking portal to a specific date. By default, the system will show the current date, unless you have a cutoff rule set. This option enables the customer to land on a set date at some point 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.
Generate Code and Preview
Back to topThat'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!
< Checkfront Droplet: Accessing Set up | Checkfront Droplet: Configuration Options - Advanced >