Lightframe Overview
Last updated: April 4, 2025
The Lightframe is an online booking tool developed by FareHarbor, designed to provide your customers with an intuitive, secure booking process.
Overview
When a specific button, item, or link is clicked, the Lightframe opens as an overlay on top of the current webpage. This allows online customers to browse and complete their reservation without ever leaving your site.
You can customize the Lightframe to open to an availability calendar, a “browse by activity” page, a specific item page, or an individual availability.
Once a customer has picked the date and time of their activity, they’ll complete their booking in the Lightframe’s secure checkout form. When finished, they can exit the Lightframe and continue browsing your website.
Benefits of using the Lightframe
It’s user-friendly. From choosing a date to entering payment information, the Lightframe is laid out in an intuitive, easy-to-understand format.
It’s secure. FareHarbor and the Lightframe are securely encrypted over SSL, ensuring that all customer data is kept private. (We do recommend you also add SSL to your website, though.)
It’s optimized to sell. The Lightframe’s easy navigation and one-page layout mean customers are more likely to complete the online booking process, leading to increased conversion rates and more bookings.
It’s customizable. You can adjust the Lightframe to match different areas of your website (for example, open an all-availability calendar from your homepage, but open to a specific item’s calendar from a different page).
It can be used across the world. The Lightframe is designed to automatically detect a user’s browser locale, giving customers the option to translate the text when necessary. Users can also select their language with the Google Translate menu at the bottom of the Lightframe.
Adding the Lightframe to your website
To quickly and easily integrate the Lightframe into your website, get in touch with us and one of our specialists will update your website for free.
To add the Lightframe yourself, you’ll first need to implement our Lightframe API on your website. The API will open the Lightframe to the expected view when any valid FareHarbor booking link on the page is clicked.
Include the Lightframe API script tag in the body of your page, preferably just before the closing
</body>tag:<script type="text/javascript" src="https://fareharbor.com/embeds/api/v1/?autolightframe=yes"></script>Tip: Add this tag to the global footer of your site to support the Lightframe across your entire website.
From your FareHarbor Dashboard, use the embed generator to generate custom book buttons or links for your website. These links should start with
<a href=https://fareharbor.com/embeds/book/your-company-name/...- Copy and paste the FareHarbor links into your website.
Learn more about Advanced Lightframe usage.
Note: Some platforms do not support the Lightframe overlay. If you’re using one of these platforms for your website, your customers will instead be taken to a “fallback” page, which is the Lightframe accessed directly as a webpage. The booking and checkout flow on this page is exactly the same as using the Lightframe.
Using cancellation badges for online booking
Knowing if an activity offers free cancellation can be a key factor in a customer’s decision to book that activity. You can use cancellation badges in the Lightframe to increase visibility of your activity’s cancellation policy.
If you’re interested in enabling cancellation badges for an activity, contact FareHarbor Support.
Cancellation badges are best utilized when free cancellation is allowed up to 48 hours before start time, but can be enabled as long as a cancellation policy is defined.
Once enabled, the Flexible cancellation policy badge, as well as an Instant confirmation badge, will accompany the activity information in the booking flow:
Why doesn’t the Lightframe show up on my mobile or touch-based device?
On a desktop computer, loading the Lightframe while also keeping your website open under it makes for the best user experience. However, this isn’t always the case with mobile devices like phones and tablets. Too many applications open simultaneously can slow down the device, making it more likely for customers to leave the booking process.
Additionally, some touch devices have trouble understanding which page you are trying to scroll when there’s an overlay on another page, such as the Lightframe.
For these reasons, users booking on certain mobile devices will instead be automatically taken to a “fallback” page, which is the Lightframe accessed directly as a webpage. The checkout flow on this page is exactly the same as using the Lightframe. This “fallback” option minimizes the chance of loading or scrolling issues, and provides an easier flow when navigating on a mobile device.
Why isn’t the Lightframe working?
If the Lightframe is not working on your website, there are a few different things you can try:
- Ensure the FareHarbor API script is on your page. View the source of your page and search for the
<script>tag. Some content management systems will remove script tags without notice, so it’s good to double check it made it onto your page. - Ensure the API script tag is placed within the
<body>of the page. The script will not work in the<head>of the page. If you have the script in the body and it is still not working, double check that the script isn’t in the head as well. - Check your console for errors. If you’re getting an instance of
FH.openbeing undefined, the API isn’t properly linked on your page. - Double check that you’re using the correct version of the API script. If your links do not have an
onclickfunction that launches the FareHarbor function, you will need to use the Auto-Lightframe script:<script type="text/javascript" src="https://fareharbor.com/embeds/api/v1/?autolightframe=yes"></script> - Make sure your links are not set within an iframe. FareHarbor links will not function properly if they’re set within an iframe embed.
- If you receive a “page not found” error, please contact FareHarbor support.
How can I get help with technical questions about the Lightframe API?
If you or your developer need help setting up or troubleshooting the Lightframe, you can contact us or take a look at some of our technical documentation: