Support Guide

Checkfront Droplet

    TABLE OF CONTENTS

  1. Accessing the Wizard
  2. Configurable Options
  3. Advanced Options
  4. Helper File
  5. Generate Code
  6. Manual Code Updates
Where do I access this in Checkfront?
The booking page droplet tool is accessible via the main menu bar at:
Manage > Add-ons > Website Integrations > Droplet

 

Integrating the Checkfront Droplet

Adding a Checkfront booking portal to your website is easy with the Droplet method of integration.

You can embed a Checkfront real-time interactive booking portal in virtually any webpage using the Droplet code. The Checkfront Droplet is a compact, standards compliant XHTML / Ajax widget.

The Droplet is fully responsive and will adapt to your website style and layout, giving your users a truly integrated experience, while still providing you with a powerful and secure booking process for your business.
 

Embedded 2

 
Modifications such as background color, font colour, font family, display date and displayed items can be configured using the wizard, found under the above mentioned menu.
 
 


 

Accessing the Wizard

To access the droplet configuration screen, visit Manage >Add-ons >Website Integrations in your main menu bar.

Hover your mouse over the Droplet (Any Website) tile and click the SETUP button.

 

Droplet-Activate

 

Using the wizard to generate the Droplet code for your website is easy. All you need to do configure a few basic options and Checkfront will do the rest.

 

Droplet Wizard

 

You’ll notice at the bottom of the wizard, just above the Generate Code button, there’s a link to Show more options. These are slightly more advanced features and we’ll look at those a bit further down the page.

For now though, let’s take a look at the basic set of configurable options available with the Checkfront Droplet.
 
 


 

Configurable Options

Options

Tabs As Categories

By default, the item categories you have created in your account will be displayed in a drop-down menu.

 

Category Drop-Down

 

If you check the Tabs As Categories option however, they will instead be displayed in the booking portal as individual tabs, which can be clicked on to view their content.

 

Tabs As Categories

 

Hide Search & Calendar

The search field and calendar can be useful for finding just the right item to book.

 

Search Calendar

 

Sometimes though, you may wish to display a more basic booking form on your website. In this case, you can choose to hide the search box and calendar from view.

 

No Search Calendar

 

Display

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.

 

Display

 

Uncheck the box labelled 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 you are creating.

Discount Code

If you have a discount code you would like to be automatically included in the booking portal, you may select it from this drop-down list.

 

Discount Option

 

All prices shown to the customer will now reflect the discount you have chosen.

Font Colour

This is a pretty self-explanatory option! If you wish the text in the booking portal to be a different colour, simply choose one from the colour picker.

 

Font Colour

 

You can enter a specific hex colour value in the field provided, if required.

Font Family

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.

Date

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.

 

Droplet Date

 

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.

And that’s it for the basic options. At this point you can click the Generate Code button and paste the results into your webpage. Before you do that though, you may wish to have a quick look at the advanced options to further refine the look and feel of your booking portal.

 
 


 

Advanced Options

Background Colour

Just like the font colour above, you can also select a colour for the background of your booking portal.

 

Background Colour

 

In most cases, white will be just fine, but if you feel the urge…

End Date

Same as the start date above, but you can also add a specific end date if you only wish to show availability between a set period of time.

Tracking ID

A tracking ID is simply a code which can be added to the booking portal for future reference. The ID code will show on your invoices so you know where the booking came from specifically. This is great for tracking advertising campaigns and things like that. Check out this support document for more information.

Language

If you’d like to display the booking portal in a specific language, choose it from the list of available options.

Helper File

As mentioned earlier in the document, the booking portal you are about to embed in your webpage is fully responsive. Some older browsers may experience difficulties when it comes to resizing the window. So, you can download a helper file from Checkfront and upload to your web server.

 

Helper File

 

Once you’ve done that, enter the URL of the file before generating your final code.

 
 


 

Generate the Code

That’s it now! You should have selected all the options from above that make the most sense in terms of your requirements. It’s now time to generate the code for your website.

Click on the Generate Code button and copy the resulting lines of code to your clipboard.

 

Copy Paste Code

 

Once you’ve pasted the code into your webpage, publish it and check out your results.

 
 


 

Manual Code Updates

For more advanced users, it is possible to update the above options without needing to generate the code from scratch each time. Below, you will find snippets of code which can be added to or substituted with the code you have already generated:

Inventory

Show specific items: item_id: ‘3,8’,

Show specific categories: category_id: ‘2’,

 

Options

Tabs as categories: options: ‘tabs’,

Hide search and calendar: options: ‘hidesearch’,

Together they would look like this: options: ‘tabs,hidesearch’,

 

Language

Set default booking portal language: lang_id: ‘fr’,

Set default customer language. Customers can change this from the menu bar. Supercedes lang_id: locale_id: ‘fr_FR’,

 

Discount Code

Include an automatic discount code: discount_code: ‘insert_code’,

 

Style

Font colour: style: ‘color: 000000’,

Font family: style: ‘font-family: arial’,

Background colour: style: ‘background-color: 873333’,

Together they would look like this: style ‘color: 000000; background-color: 873333; font-family: arial’,

 

Date

Fast forward to specific date: date: ‘20131225’,

Add an end date: end_date: ‘20140131’,

 

Tracking ID

Tracking ID: tid: ‘fall-email’,