Lightspeed Reservations Widget Guide
1.
Copy the code snippet provided in the Back Office settings.
Lightspeed Reservations > Settings > Add a widget to your website
2.
Open the website editor.
For example: WordPress, Wix, or Squarespace.
3.
Find the global code injection area.
This is often called Custom Code, Footer Code, or Site-wide Code Injection.
4.
Paste the code snippet into that area.
5.
Save your changes and publish your website.
On a plain HTML website:
Paste the widget code directly before the closing </body> tag on every page where you want the widget to appear.
If you use a templating system, add the code to the main layout file so it loads on all pages.
Using WordPress:
There are several methods, but the easiest is to use a plugin that allows custom header and footer injection, such as Insert Headers and Footers.
Alternatively, you can directly edit a theme’s footer.php file and paste the code just before </body> (for advanced users only).
Using Wix:
Go to the website, then:
- Select Settings.
- Scroll to Development & integrations, then select Custom Code.
- Click Add Custom Code, paste the widget code into the snippet section, and name the widget so you can easily identify it later.
- Select the pages where you want the widget to appear, then set the placement to Body – end.
Using Squarespace:
Go to the website, then:
- Select Pages.
- Select Custom Code, then Code Injection.
- Paste the widget code into the Footer section.
ℹ️ Integrating the widget using Wix:
- Go to your home screen of Wix dashboard and follow the steps below.
Click on Settings on left sidebar. Then in search input type Custom Code.
Click on Add Custom Code or click on Add Code inside Head area.
— Paste widget code in snippet section.
— Write name of the widget (just to remember what this widget for).
— Select pages on which you want widget to appear.
Verify that your custom code is enabled.
✅ Done! The floating widget should now appear on the site.
Some important notes:
- The current version of the widget does not support appearance or placement changes.
- We continuously improve the widget based on feedback, so please let us know if these options are important to you.
About the Reservation Widget API
The API lets developers programmatically control the widget, including opening and closing the booking modal, and subscribing to events such as when a booking is completed.
This is useful for advanced integrations, custom buttons, and tracking.
- For more information on API access, tracking bookings, and subscribing to events, please see:
Situation:
Possible causes and solutions:
The widget code is installed, but the floating button is not showing up.
1. Incorrect location ID: Double-check that data-merchant-id in the script tag is set to your specific YOUR_LOCATION_ID.
2. Code not loaded globally: Make sure you pasted the code into the site footer, header, or a site-wide code injection area, and not only on a single page.
3. Ad blockers: Test your site in an incognito window or in a different browser. Some aggressive ad blockers can prevent the widget script from loading.
4. CMS caching: Clear any caching mechanisms on your CMS (for example, WordPress plugins or server-side cache) and your browser cache, then reload the page.
The widget appears, but the booking modal does not open when you click it.
1. Script loading issues: Check your browser’s Developer Tools Console for any JavaScript errors related to the widget script URL provided in your Back Office. This often indicates a conflict with another script or an issue with the script file itself.
2. Network restrictions: Ensure your network or firewall is not blocking access to the widget script URL provided in your Back Office.
The widget appears, but says: This business doesn’t accept reservations.
1. Lightspeed Reservation Add-on status: Confirm that the Lightspeed Reservation Add-on is active and that onboarding is complete.
2. Online bookings are paused: Online bookings may be paused. If so, you will see a warning message in the Back Office.
3. Reservation settings in the Back Office: Check your Automatic booking settings configuration.
4. Restaurant availability: The restaurant may be fully booked. Try a different date or time.
