Checkfront has created a plugin for WordPress which 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 just how to do that.
Installing the WordPress PluginBack to top
Unlike our Droplet integration method, the WordPress based booking portal requires the installation of a plugin. The two methods yield exactly the same results, but by installing the WordPress 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 WordPress 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 & Install the PluginBack to top
The first step is to locate the Checkfront plugin within the WordPress Plugin Directory. Navigate to your WordPress dashboard.
1) Click on the Plugins menu in the left sidebar.
2) Click Add New.
3) Enter Checkfront in the search field and press Enter.
4) When the Checkfront plugin appears, click Install Now.
Activate the PluginBack to top
It will take but a moment for the plugin to be installed, after which you will receive a confirmation message on the screen. From here, you should click on the link labeled Activate Plugin.
Once the plugin has activated, you will see a confirmation at the top of the screen. The plugin will now be visible on your list of active plugins and you will also see Checkfront under the Plugins menu in the left sidebar.
Click on this Checkfront link to continue the plugin activation process. On the next screen you come to, you'll see a Quick Start Guide at the top with some instructions on how to proceed. Directly beneath those instructions is a white 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 Update.
If everything went according to plan, you should now see an Updated message in the Setup box.
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!
Generating the ShortcodeBack to top
The next step is to generate the shortcode which will be added to your WordPress webpage. 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 webpage. 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.
If you're still on the Setup screen, look for the next white box labeled Use. Click on the Launch 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 WordPress tile and click SETUP.
This will bring you directly to the WordPress 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.
Configurable OptionsBack to top
Tabs As CategoriesBack to top
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.
Hide Search & CalendarBack to top
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.
DisplayBack to top
If you are placing the shortcode 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 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.
Font ColourBack 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.
You can enter a specific hex colour value in the field provided if required.
Font FamilyBack 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.
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 OptionsBack to top
Background ColourBack 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...
End DateBack to top
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.
LanguageBack to top
If you'd like to display the booking portal in a specific language, choose it from the list of available options.
Copy/Pasting the ShortcodeBack 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.
Once you've pasted the shortcode into your web page, publish it and check out your results.
Where to Place the ShortcodeBack to top
With the shortcode pasted to your clipboard, head back over to WordPress 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 ArgumentsBack 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:
Extending the ShortcodeBack 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.
InventoryBack to top
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"]
OptionsBack to top
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"]
StyleBack to top
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.
Searching Availability ErrorBack to top
After configuring the Wordpress plugin and adding the shortcode to your web page, you may experience an issue whereby the booking page does not appear when the website is viewed live on the web. Instead, you'll see a message that says "Searching Availability". There are two things you can do to fix this issue. The first is to simply use the droplet method to add the booking page to your web page. Alternatively, if you wish to use the Wordpress shortcode, you can follow the instructions below to get it working as expected:
1. Navigate to Manage > Add-ons > Website Integrations in the Checkfront Booking Manager.
2. Click on the Droplet tile.
3. Click on the blue Generate Code button.
4. Copy the first line of the provided code to your clipboard.
5. Paste the code you just copied into the header of the page on which the booking system will appear. Your theme may have an option to add code to the header, but if not, you can download a plugin to do the job. Once you've done that, the booking information should be displayed correctly on your web page.