Embedding the Booking Widget | Levy Fleets Help

The embed widget is a single <script> tag that adds a floating "Book a rental" button to any webpage. Customers click it, a modal opens with your booking flow inside an iframe, and the booking completes without leaving your site.

It's the FareHarbor "Lightframe" equivalent.

Prerequisites

Public booking page configured and enabled — see Configuring your public booking page

The snippet

/dashboard/shop-rentals/public → bottom of the page → Embed snippet. Click Copy snippet. You'll get something like:

<script src="https://fleets.levyelectric.com/embed/v1.js"
        data-subaccount="my-shop"
        data-button-color="#1d4ed8"
        data-button-text="Book a rental"></script>

Paste this anywhere in your HTML — typically just before </body> or in your CMS's "Custom HTML" / "Footer scripts" area.

What customers see

A floating button appears bottom-right of every page that has the script. Click → modal overlay → iframe of your booking page → 4-step flow → confirmation.

Closing the modal: ESC key, click outside the iframe, or the × button top-right.

Customizing per page

The script tag's data-* attributes drive button appearance. You can have different buttons on different pages by changing the snippet:

<!-- On the home page -->
<script src=".../embed/v1.js"
        data-subaccount="my-shop"
        data-button-color="#1d4ed8"
        data-button-text="Book a bike"></script>

<!-- On the tours page -->
<script src=".../embed/v1.js"
        data-subaccount="my-shop"
        data-button-color="#16a34a"
        data-button-text="Reserve a tour bike"></script>

The data-subaccount (your slug) must stay the same — that's what determines which booking flow loads.

CMS-specific install

WordPress

Plugin → Insert Headers and Footers (or any custom-code plugin). Paste in the Footer box → Save. Renders site-wide.

Squarespace

Settings → Advanced → Code Injection → Footer. Paste → Save.

Shopify

Online Store → Themes → Edit code. Open theme.liquid. Paste before </body>. Save.

Wix

Settings → Custom Code → Add Custom Code. Paste in the box. Set "Place Code in" to Body — end. Apply to all pages.

Webflow

Site Settings → Custom Code → Footer Code. Paste. Save → Publish.

Plain HTML site

Open your index.html (and any other pages where you want the button). Paste before </body>. Save and re-deploy.

Mobile behavior

On mobile, the modal takes up the full screen for easier interaction. The button positions in the bottom-right corner with safe-area inset for iOS devices with notches.

What the script does

The script is ~150 lines. It:

Reads the data-* attributes
Injects a fixed-position button into the page
On click, injects a fullscreen overlay with an iframe
The iframe URL is /book/<slug>?embed=1 — the embed=1 query strips the page's outer chrome
ESC key, outside-click, and × button all close the modal
No cookies set on the host site
No external requests beyond loading the script and the iframe

Source code: public/embed/v1.js in the repo.

Performance impact

The script is small (~5 KB gzipped). It loads asynchronously and adds no measurable page-speed impact. The iframe only loads when a customer clicks the button — until then, no booking-related JavaScript executes.

Security

The host site (your website) and the booking page (Levy Fleets) are on different origins. The iframe's CSP allows frame-ancestors * so any site can embed it. The booking flow handles its own session state — no cookies leak to or from your domain.

Testing the embed

After installing:

Visit your website
Wait 1-2 seconds for the button to appear
Click it — the modal should open
Try a fake booking through to confirmation
Close and reopen — ensure state resets cleanly

If the button doesn't appear:

Check the browser console for errors (ad blockers might interfere)
Verify the <script> tag is actually in the HTML (View Source)
Check that data-subaccount matches your enabled slug
Make sure your public booking page is enabled

Customizing the embed appearance

The button is a fixed-position element with inline styles — you can override them with CSS targeting body > button:last-of-type (hacky) or wait for the upcoming data-position and data-size attributes.

For deeper customization (a different button design that triggers the modal), wait for the JS API release — it'll let you call window.LevyFleetsEmbed.open() from your own button.

When to use the embed vs. direct link

Use	When
Embed widget (modal)	Customers should stay on your website while booking. Best for content-driven sites.
Direct link to `/book/<slug>`	Customers should get the full Levy-branded experience. Best for paid ads, email, social.
Both	Most shops use both — embed on the website, direct link in email/social.

The data captured (booking, customer record, payment) is identical regardless of source.

What's coming next

Inline calendar embed — instead of a modal, render the booking flow inline in a <div>
JS API for custom buttons — LevyFleetsEmbed.open({ slug, ... })
Conversion tracking — Google Analytics + Meta Pixel events fire when a booking completes (planned)

Embedding the Widget on Your Website