Free Trial Signup

Articles in this section

Booking Widget: Generating the Web Code

Plan Availability: ✓ Soho | ✓ Pro | ✓ Plus | ✓ Enterprise  | ✓ Flex |
Locate: Manage > Integrations > Website Integrations > Booking Widget > Setup
Prerequisites:

  • Ability to copy and paste into your website code or help from a skilled person to do this for you!
  • The Booking Widget feature is available to both those using items (Inventory > Items), a key feature of our classic version of Checkfront, and those using products (Inventory > Products), a key feature of our newest version of Checkfront.

 

Products

New to Checkfront - Products ✨

Products (Inventory > Products) is the successor feature to (Inventory > Items) and is available in our newest version of Checkfront.

Not yet on our newest version and interested in upgrading? Please contact our Technical Support team for more information.

Discover more product-related help articles here: Products (New).

 

In this article, we cover generating the code and some additional options for manually editing the Booking Widget.

Read the full set of articles in this series for a complete understanding of how the integrations can be configured and added to your website.

 

Alert

In order 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 need be.

 

Generate the Code

Back to top

Copy Generated Code

You should by now have selected all the previous options 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.

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

 

Manual Code Updates

Back to top

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

 

 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

 

Alert

Please keep in mind 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.

As well, website-building tools that support scripts being 'deferred', or executing later in the page load order, may cause interference with the Booking Widget code working as expected.

 

Booking Widget and Squarespace Pages with Ajax Loading

Back to top

squarespace

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.

 

Frequently Asked Questions

Back to top

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

    Yes! Visit our Community guide to find out How to: Use Multiple Booking Widgets on one webpage.

  • 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, changes to inventory 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. 

 

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

 

 

< Booking Widget: Configurable Options - Advanced

 

 

Related articles