This guide helps you quickly identify and fix common configuration issues that prevent the Booking Widget from appearing on your website, restoring accurate display and avoiding lost bookings.
Learn how to troubleshoot the Booking Widget display if the integration is not showing on your website, including possible causes and how to resolve them.
Accessing the features mentioned in this article
Where can I find this feature using the top menu?
- See the sections below for where to find these features.
What more do I need to use this feature?
- Visit the article links included below for the Staff account permissions required to use these features.
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
|
What is the Booking Widget? The Booking Widget is a compact, standards-compliant XHTML / Ajax widget that lets you add a Checkfront booking frame to your website. |
Troubleshooting Booking Widget display
Are you having trouble with your Booking Widget not displaying as you expect on your website? Booking Widget display issues may have multiple causes. Choose from the following list of possible causes to view suggestions on how to resolve the problem:
- Verify the HTML code placement
- Verify the generated HTML code
- Check for CSS styling conflicts
- Check if JavaScript is enabled
- Check for JavaScript errors
- Test on multiple devices and browsers
- Preview the Booking Widget
Verify the HTML code placement
Incorrectly placing the generated Booking Widget HTML code in your webpage header can affect how the integration displays on your website. We recommend you review the Booking Widget code placement in your webpage header to ensure it's correct.
|
Learn more about the Booking Widget For a detailed look at setting up the Booking Widget, check out the following article series: |
Verify the generated HTML code
Incorrectly editing the generated Booking Widget HTML code can affect how the integration displays on your website. We recommend that you verify the Booking Widget code that you added to your website, or generate new code to replace your existing HTML code.
|
Learn more about generating the Booking Widget code For a detailed look at generating Booking Widget code, check out the following article: |
Check for CSS styling conflicts
Incorrect custom CSS styling can affect how the Booking Widget displays on your website. We recommend reviewing any custom CSS you have added to your account.
Follow these steps to check your custom CSS styling:
- Go to the CSS Editor (Manage > Layout > Booking Page > CSS Editor).
- Review any entered CSS styling and adjust it as needed.
- Check the Booking Widget on your website again.
|
Learn more about working with CSS For a detailed look at working with custom CSS, check out the following article: |
Check if JavaScript is enabled
If JavaScript is disabled, it can affect how the Booking Widget displays on your website. We recommend that you review your browser's JavaScript settings to make sure it is enabled and working.
|
How do I check if JavaScript is enabled in my browser? Each browser has its own method for checking if JavaScript is enabled. Visit your browser's help section for steps on checking the JavaScript status. |
Check for JavaScript errors
JavaScript errors are problems that can prevent the Booking Widget code from running correctly. The system categorizes into three main types: syntax errors, runtime errors, and logical errors. We recommend using your browser's developer console or an online code validation tool to check for errors.
|
What is a developer console? A developer console is a built-in browser tool that lets you inspect, debug, and analyze websites by showing JavaScript errors, network requests, performance data, and allowing live code execution |
Test on multiple devices and browsers
Testing how the Booking Widget looks and behaves on multiple devices and browsers is a recommended step in troubleshooting display issues. This step helps determine whether the display issue is limited to a specific browser or device type.
|
What devices and browsers should I test with? Consider testing the Booking Widget display using one or more of these suggestions: Device: Desktop computer, laptop, mobile phone, or tablet Browser: Google Chrome, Mozilla Firefox, Microsoft Edge, or Apple Safari |
Preview the Booking Widget
Previewing the Booking Widget can help you troubleshoot issues with settings or styling.
Follow these steps to preview the Booking Widget:
- Go to the Booking Widget setup (Manage > Integrations > Website Integration > Booking Widget).
- Select your widget options and click the Preview button.
- Make any needed changes and preview the widget again.
|
Learn more about the Booking Widget For a detailed look at setting up the Booking Widget, check out the following article series: |