Embedding the Widget on Your Website

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:

1. Reads the data-* attributes
2. Injects a fixed-position button into the page
3. On click, injects a fullscreen overlay with an iframe
4. The iframe URL is /book/<slug>?embed=1 — the embed=1 query strips the page's outer chrome
5. ESC key, outside-click, and × button all close the modal
6. No cookies set on the host site
7. 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:

1. Visit your website
2. Wait 1-2 seconds for the button to appear
3. Click it — the modal should open
4. Try a fake booking through to confirmation
5. 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

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)