Booking Widget: Generating the Web Code

---

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.

 

---

✓ Soho | ✓ Pro | ✓ Plus | ✓ Enterprise  | ✓ Flex |

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?

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

 

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 reach out to our Technical Support team for more information. Discover more product-related help articles here: Products (New).

 

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.

 

---

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!

 

---

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

 

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.

 

---

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

 

---

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

 

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

---