Drupal Plugin

Search For & Install the Plugin

Back to top

 

 

The first step is to locate the Checkfront plugin within Drupal. Navigate to your Drupal dashboard. 

 

 

 

 

1) Click on the Modules menu in the main navigation bar (see image above). 2) Click on the Contributed Modules link.  

 

 

  

 

3) Enter Checkfront in the search field and press the Search button.  

 

 

   

 

4) When the results appear, look for the one labeled Checkfront Online Booking System. The title will be hyperlinked, so click on it.    

 

 

   

 

5) You will now be presented with some information on the Checkfront booking plugin. Under the section labeled Downloads, click on tar.gz file to download it to your computer.

 

   

   

 

6) Next, return to the Modules page and click on the + Install New Module link.  

 

 

   

 

7) Click on the Choose File button and locate/select the file you just downloaded to your computer. Then, click Install.  

 

 

   

 

 

---

Now that the installation is complete, it's time to activate the plugin.

1) Go to the Modules page and scroll to the very bottom. Here, you should see a section labeled E-Commerce. Check the box to enable the Checkfront plugin you just installed and click Save Configuration.  

 

 

 

 

2) You'll now see a Configure link appear to the right of the plugin. Click on this.  

 

 

 

 

On the next screen, look for a box labeled Setup. In here, is a field to enter your Checkfront Host URL. This is the URL by which you access your Checkfront admin area and was chosen by you when you first created your account. It is most likely [BusinessName].checkfront.com. In our example, we will use demo.checkfront.com.

1) Enter the Checkfront Host URL. 2) Click Save Configuration.  

 

 

 

 

If everything went according to plan, you should now see a confirmation message at the top of the screen.  

 

 

 

 

Pay close attention to your Checkfront Host URL. Depending on where you are located, your URL may not end with .com. It may, for instance, end with .co.uk. Entering this incorrectly is a common mistake, so double check before entering it in the field, just to make sure!

   

 

---

Before we can generate the Checkfront shortcode and add it to our web page, we first need to enable the shortcode for use in the system. Notice the Quick Start guide near the top of the Checkfront module page. So far, we have completed the first two steps. Now, click on the Text Format link in step three.  

 

 

 

 

Click on the Configure link next to the Full HTML option.  

 

 

 

 

Select the Checkfront Booking Shortcode option and scroll to the bottom of the page to click on the Save Configuration button.

 

 

 

 

The shortcode is now activated and ready for use.    

 

 

---

The next step is to generate the shortcode which will be added to your Drupal web page. If you have any experience with the Checkfront Droplet, you will recognize that the process involved now is more or less the same. Once you've generated the code, however, you will be presented with one basic line of code. The more complicated code is handled by the plugin you just installed.

Now, if you like, you can simply go ahead and add the shortcode [checkfront] to your web page. When published, this will show the booking portal as configured in your Checkfront backend. You can, however, manipulate the shortcode to create a more refined look for the portal. If you are experienced with shortcodes, you can scroll down this page to see the arguments which can be added to produce certain results. If you're not sure about that, though, the Shortcode Generator is the way to go.

 

 

---

Just below the Setup box, where you entered the Host URL, is another box labeled Getting Started. Click on the Shortcode Generator button.  

 

 

 

 

Alternatively, you can access the same Shortcode Generator through your Checkfront backend. To do this, go to Manage > Add-ons > Website Integrations. Hover your mouse over the Drupal tile and click SETUP.  

 

 

 

 

This will bring you directly to the Drupal Shortcode Generator.  

 

 

 

 

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.    

 

 

---

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

 

 

 

 

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.  

 

 

 

The search field and calendar 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 the search box and calendar from view.  

 

 

 

If you are placing the shortcode onto a web page 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 you are creating.

 

 

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.  

 

 

 

 

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

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.

 

 

 

 

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

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.

 

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.

And that's it for the basic options. At this point, you can click the Generate Code button and paste the results into your web page. 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.    

 

 

---

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

 

 

 

 

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

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.

 

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.

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

 

 

---

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 shortcode for your website. Click on the Generate Code button and copy the resulting shortcode to your clipboard.  

 

 

 

 

Once you've pasted the shortcode into your web page, publish it and check out your results.

With the shortcode pasted to your clipboard, head back over to Drupal and locate/create the page/post in which you wish to embed the booking portal. Place the shortcode wherever you would like the portal to appear. This may be before, after or somewhere within your page content.

 

 

 

 

Make sure you select Full HTML from the Text Format field.

 

 

---

Adding some of the arguments from the list lower down this page will control how the booking portal appears and the information it contains. Below is an example of what this shortcode might look like:  

 

 

 

 

---

Following is a list of arguments that can be added to the basic [checkfront] shortcode to change the look and behaviour of your booking portal.  

Show specific items: [checkfront item_id="3,8,37"] Show specific categories:[checkfront category_id="2,3"] Limit upcoming events to specific category: [checkfront filter_category_id="3"]  

Tabs as categories: [checkfront options=tabs] Hide search and calendar: [checkfront options=hidesearch] Together, they would look like this: [checkfront options=tabs,hidesearch]  

Include an automatic discount code: [checkfront discount_code="insert_code"]  

Font colour: [checkfront style="color: #000000"] Font family: [checkfront style="font-family: arial"] Background colour: [checkfront style="background-color: #873333"] Together, they would look like this: [checkfront style="color: #000000; background-color: #873333; font-family: arial"] 

Fast forward to specific date: [checkfront date="20141224"] Add an end date: [checkfront end_date="20140131"  

Tracking ID: [checkfront tid="promo-page"] See campaign tracking for more information on using tracking ids.