Request a Demo

Articles in this section

Generating Booking Widget code to add to your website

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.

 

Which plans include this feature?

Legacy:  Soho, Pro, Plus, Enterprise, Flex
New:  Growth (Subscription), Growth (Online Booking Fee), Managed
→ Learn more about our new plans or how to change your plan.


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, new or both?

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

 

Alert

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

Back to top

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

Back to top

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

 

Alert

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

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

 

Alert 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

 

 

Related articles