Plan Availability: ✓ Soho | ✓ Pro | ✓ Plus | ✓ Enterprise | ✓ Flex |
Locate: Manage > Integrations > Website Integrations > Booking Widget > Setup
- Ability to copy and paste into your website code or help from a skilled person to do this for you!
- The Booking Widget is available to those using items (Inventory > Items), a feature of our classic version of Checkfront.
- Interested in using the Booking Widget with products (Inventory > Products)? Your account must be a member of our Early Access Program.
Early Access Program
The new product feature mentioned in this article is currently part of our Early Access Program, which means it is available to select Customers to try out and provide us with feedback.
Find our complete set of help articles related to the Early Access Program here: Early Access Program.
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.
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 CodeBack to top
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 UpdatesBack 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 will find snippets of code that can be added to or substituted with the code you have already generated:
- InventoryBack to top
Show specific items or products: item_id: '3,8',
Show specific categories: category_id: '2',
- OptionsBack to top
Tabs as categories: options: ‘tabs’,
Hide search and calendar: options: ‘hidesearch’,
Together they would look like this: options: ‘tabs,hidesearch’,
- LanguageBack to top
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’,
- Discount CodeBack to top
Include an automatic discount code: discount_code: ‘insert_code’,
- StyleBack to top
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’,
- DateBack to top
Fast forward to a specific date: date: ‘20131225’,
Add an end date: end_date: ‘20140131’,
- Tracking IDBack to top
Tracking ID: tid: ‘fall-email’,
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.
Booking Widget and Squarespace Pages with Ajax LoadingBack to top
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.