Generating Booking Widget code to add to your website – Checkfront

Learn about automatically generating the website code, including manually updating the code as necessary.

New to the Booking Widget? Read the first article in this series for an introduction to the Booking Widget.

Accessing the features mentioned in this article

Where can I find this feature using the top menu?

Manage > Integrations > Website Integrations > Booking Widget > Setup

What more do I need to use this feature?

Ability to copy and paste into your website code or help from a skilled person to do this for you!

Which Checkfront version supports this feature - classic items, classic products, or both?

This feature is available in both our classic version using classic items (Inventory > Items) and our classic version using classic products (Inventory > Products). → Learn more about products

To add the Booking Widget to your Website, you need access to your Website code. Please reach out to your Website provider for help with this if needed.

Automatically generating the code

Copy Generated Code

Once you have configured the Booking Widget options, you can generate the code for your website.

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

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

Manually updating the code

For more advanced users, it is possible to update the above options without generating the code from the start each time. Below, you find code that can be added to your web page.

Type	Variable	Description
Inventory	`item_id: '3,8'`	Show specific items or products
	`category_id: '2'`	Show specific categories
Options	`options: 'tabs'`	Tabs as categories
	`options: 'hidesearch'`	Hide search and calendar
	`options: 'tabs,hidesearch'`	Together they would look like this
Language	`lang_id: 'fr'`	Set default booking portal language
	`locale_id: 'fr_FR'`	Set default customer language. Customers can change this from the menu bar. Supercedes lang_id
Discount Code	`discount_code: 'insert_code'`	Include an automatic discount code
Style	`style: 'color: 000000'`	Font colour
	`style: 'font-family: arial'`	Font-family
	`style: 'background-color: 873333'`	Background colour
	`style 'color: 000000; background-color: 873333; font-family: arial'`	Font styles combined
Date	`date: '20131225'`	Fast forward to a specific date
	`end_date: '20140131'`	Add an end date
Tracking ID	`tid: 'fall-email'`	Tracking ID
Popup	`popup= '2',`	Show the booking modal Book Now tab for the included inventory ID
	`popup= '2',` `item_id: '2, 2#@cal',`	Show the booking modal Availability tab for the included inventory ID
	`popup= '2',` `item_id: '2, 2#@summary',`	Show the booking modal Details tab for the included inventory ID

Please remember that certain website-building tools embed custom code within an iframe (examples: Wix and GoDaddy). This can affect the behaviour of the Checkfront Booking Widget and prevent it from functioning correctly.

Website-building tools that support scripts being 'deferred' or executed later in the page load order may cause interference with the Booking Widget code working as expected.

Ajax Loading within Squarespace pages

The Checkfront Booking Widget does not work with Squarespace pages with Ajax loading.

Not all Squarespace themes have Ajax loading, and of those that do, not all allow you to disable the feature.

Please reach out to Squarespace support to learn more about the feature and what is possible.

Ajax loading

Frequently Asked Questions

Can I place more than one Booking Widget on the same webpage?

Yes! For multiple Booking Widgets to work, change the div id and target in the generated code. Each Booking Widget on the same page must have a unique ID to load correctly.

Edit the code for each additional Booking Widget that is placed. For example, for the first Booking Widget, the div id and target may end with '01'. For the second Booking Widget, change the div id and target to '02', and so on for each additional Booking Widget.
Can I place a Booking Widget for the same item/product on different websites?

Yes, you can. Consider using a Tracking ID to determine which website the booking came from. Learn more here: Booking Widget: Generating the Web Code
What information does Checkfront store in website cookies?

The Customer booking page does not utilize any external cookies. Instead, the cookies used store booking sessions and the contents of the booking cart.

You can view our cookie policy; however, note that most of the policy relates to browsing our Website and does not directly relate to the Customer booking page.
Do I need to regenerate the Booking Widget if I make changes to my inventory?

No, inventory changes automatically reflect in the Booking Widget.

One exception is if you have customized the Booking Widget code, such as to set a specific date or to show only specific inventory. In this case, you may need to adjust the Booking Widget code on your website or regenerate the code so that it displays the inventory as expected.
In what order do categories display in the Booking Widget?

The Booking Widget displays categories in the order that they are numerically listed in the generated code. You can manually re-order the values when placing the code in your webpage.

Be sure to allow browser cookies in the current browser session. Not accepting cookies may prevent the plugin from loading properly.

< Configuring advanced Booking Widget options