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, bonus: experience with adding or editing code manually.

In this article, we will 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.

---

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!

 

 

---

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

Show specific items: item_id: '3,8', Show specific categories: category_id: '2',

 

Tabs as categories: options: ‘tabs’, Hide search and calendar: options: ‘hidesearch’, Together they would look like this: options: ‘tabs,hidesearch’,

Set default booking portal language: lang_id: ‘fr’, Set default customer language. Customers can change this from the menu bar. Supercedes lang_id: locale_id: ‘fr_FR’,

Include an automatic discount code: discount_code: ‘insert_code’,

Font colour: style: ‘color: 000000’, Font family: style: ‘font-family: arial’, Background colour: style: ‘background-color: 873333’, Together they would look like this: style ‘color: 000000; background-color: 873333; font-family: arial’,

Fast forward to specific date: date: ‘20131225’, Add an end date: end_date: ‘20140131’,

Tracking ID: tid: ‘fall-email’,

 

 

---

 

Using Squarespace?

Users of Squarespace have reported that the Booking Widget loads successfully when editing their pages, but have issues when viewing the page in a live environment. The widget starts loading and shows searching availability, but never progresses past that point. If you are experiencing this issue, please disable ajax loading in your style editor or add a script to the header of your page, for example:

<script src="//companyname.checkfront.com/lib/interface--30.js" type="text/javascript"></script>

This solution may also work with other web service providers.

Using Wix or GoDaddy?

Users of Wix and GoDaddy have reported issues with resizing the Booking Widget window in Chrome (desktop only).

Wix and GoDaddy have all custom code entered into an iFrame that does not have the same sizing and adjustment properties as our Booking Widget.

The Booking Widget on its own will resize and fit a page if shrunk. However, since Wix and GoDaddy force the custom code into a sized iFrame the Booking Widget is not able to resize as it is taking its sizing from the iFrame. This is a behavior hard-coded by Wix and GoDaddy, so something we are unable to change at this time.

 

 

 

---

< Booking Widget: Configurable Options

---