Joomla Plugin

Estimated reading time: 7 min

The Joomla plugin for Checkfront enables you to generate a shortcode, paste it into your webpage and publish a booking portal for your customers to reserve their items. Once configured, the plugin will take care of the complicated code required to display the portal. All you need to do is add the shortcode to your page and we’ll take care of the rest. If you’d like to alter the way the booking portal appears or behaves, you can do that by adding arguments to the shortcode. This guide will show you how to do that. 


Installing the Joomla Plugin

Back to top

Unlike our Droplet integration method, the Joomla based booking portal requires the installation of an extension known as a plugin. The two methods yield exactly the same results, but by installing the Joomla plugin, you avoid a complicated mass of code and are able to make changes to your website URL without needing to edit any code on your web page.

If you’ve used Joomla before, you’re probably familiar with the process of finding plugins and installing them on your server. If not, don’t panic! It’s very easy to do and takes just a few moments to complete.

In the following steps, we’ll show you exactly how to do this with just a few clicks of the mouse.


Search for and Install the Plugin

Back to top

The first step is to locate the Checkfront plugin within the Joomla Extension Manager. Navigate to your Joomla dashboard.

1) Click on Extensions from the main menu. When the drop-down appears, select Extension Manager.
2) Enter Checkfront in the search field.
3) Either press Enter or click on the Magnifying Glass button to begin the search.
4) When the Checkfront plugin appears, click on the hyperlinked title.



The screen that follows will present you with some information on the Checkfront plugin. You’ll see a green button labelled Install. Click on this to proceed with the installation.


Joomla Install 2


Next, you will be asked to confirm the installation by clicking on another Install button.


Joomla Install Confirm


Enabling the Plugin

Back to top

Once the plugin has been installed, you’ll see a confirmation message on the screen. Before you can use the plugin, though, you first need to enable it.



1) Click on Extensions from the main menu. When the drop-down appears, select Plugin Manager.
2) Enter Checkfront in the search field.
3) Either press Enter or click on the Magnifying Glass button to begin the search.
4) When the Checkfront plugin appears, select it by checking the box to the left.
4) Click the Enable button to continue.

The status of the plugin will now show a green check mark, rather than the red ‘x’ which was displayed before.


Joomla Plugin Status


As such, the plugin is now active.

The final stage in activating the plugin is to select it from the Plugin Manager page by clicking on the hyperlinked plugin name.


Joomla Plugin Name


You can do this at any time in the future should you wish to make changes to the host URL.

After clicking on the plugin name, you will see 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] In our example, we will use

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



The plugin is now fully installed and enabled.


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 Entering this incorrectly is a common mistake, so double check before entering it in the field, just to make sure!



Generating the Shortcode

Back to top

The next step is to generate the shortcode which will be added to your Joomla web page. If you have any experience with the Checkfront Droplet, you will recognise 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.


Shortcode Generator

Back to top

If you’re still on the Host URL screen, look for the Description tab at the top.


Joomla Shortcode Generator


Click on this and then click on the Shortcode Generator button below.

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 Joomla tile and click SETUP.




This will bring you directly to the Joomla Shortcode Generator within your Checkfront account.


Joomla Booking


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.

Configurable Options

Back to top

Tabs As Categories

Back to top

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

Back to top

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


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 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

Back to top

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

Back to top

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

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.


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 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.


Advanced Options

Back to top

Background Colour

Back to top

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.


Tracking ID

Back to top

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.

Copy/Pasting the Shortcode

Back to top

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.


Generate WordPress Code


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


Where To Place the Shortcode

Back to top

With the shortcode pasted to your clipboard, head back over to Joomla 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.



Shortcode With Arguments

Back to top

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:



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


Extending the Shortcode

Back to top

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.



Back to top

Show specific items: item_id=”3,8,37″

Show specific categories: category_id=”2,3″

Added to basic shortcode, they would look like this: [checkfront item_id=”3,8,37″ category_id=”2,3″]

Limit upcoming events to specific category: filter_category_id=”3″


Tabs as categories: options=tabs

Hide search and calendar: options=hidesearch

Together they would look like this: options=tabs,hidesearch


Discount Code

Back to top

Include an automatic discount code: discount_code=”insert_code”


Font colour: style=”color: #000000″

Font family: style=”font-family: arial”

Background colour: 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: date=”20131224″

Add an end date: end_date=”20140131″


Tracking ID

Back to top

Tracking ID: tid=”fall-email”


Was this article helpful?
I have a suggestion...