Complete your Booking Widget setup by generating the embed code and adding it to your website, with the option to tweak the code for more advanced configurations manually.
Learn how to generate website code and automatically update it as needed with answers to frequently asked questions.
|
New to the Booking Widget? Read the first article in this series for an introduction to the Booking Widget. |
Accessing the features mentioned in this article
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 items, classic products, or both?
- This feature is available in both our classic version using classic items (Inventory > Items) and our classic version using classic products (Inventory > Products). → Learn more about products
|
Adding the Booking Widget to your website To add the Booking Widget to your website, you need access to your website code. If you need help with this, please reach out to your website provider. |
Automatically generating the code
Once you have configured the Booking Widget options, you can generate the code for your website.
- Click the Generate Code button.
- Copy the resulting lines of code from the text area.
- Paste the code into your webpage and publish your changes.
behaviorf
Manually updating the code
For more advanced users, it is possible to update the above options without generating the code from the start each time. Below, you can find additional code to add 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' |
Tabs as categories, but hide search and calendar | |
| Language | lang_id: 'fr' |
Set default booking portal language |
locale_id: 'fr_FR' |
Set the 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 |
|
|
Show the booking modal Availability tab for the included inventory ID | |
|
|
Show the booking modal Details tab for the included inventory ID |
|
Custom code and iframes Specific website-building tools embed custom code within an iframe (examples: Wix and GoDaddy). This embedded code can affect the behavior 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 interfere with the Booking Widget code's ability to work as expected. |
Ajax Loading within Squarespace pages
|
The Checkfront Booking Widget does not work with Squarespace pages loaded with Ajax. Not all Squarespace themes support Ajax loading, and of those that do, not all let you turn it on. Please contact Squarespace support to learn more about the feature and what is possible. |
Frequently Asked Questions
-
Can I place more than one Booking Widget on the same webpage?
Yes! Change the div ID and target in the generated code to make multiple booking widgets work. Each Booking Widget on the same page must have a unique ID to load correctly.
Edit the code for each additional Booking Widget that you place on your webpage. For example, the div ID and target may end with '01' for the first Booking Widget. 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, but please remember that most of it 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 change my inventory?
No, the system automatically reflects inventory changes in the Booking Widget.
One exception is if you have customized the Booking Widget code to set a specific date or show only specific inventory. In this case, you may need to adjust the Booking Widget code on your website or regenerate it to display the inventory as expected.
-
In what order do categories display in the Booking Widget?
The Booking Widget displays categories in the order they appear in the generated code, as numerically listed by the system. You can manually reorder the values when placing the code on your webpage.
-
Can I insert a custom script in the Booking Widget workflow, for example, a conversion pixel to track traffic?
No, inserting a custom script into the generated code of the Booking Widget is not supported. Instead, consider using one or more of our integrations in Manage > Integrations, such as Google Ads or Google Analytics.
|
Allowing browser cookies 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
don't hesitate to |