How to Embed a Widget on Lemon Squeezy

Lemon Squeezy is a modern platform for selling digital products, SaaS subscriptions, and memberships. By combining Embeddy widgets with Lemon Squeezy's checkout, you can add interactive demos, calculators, quizzes, and lead forms to boost conversions. This guide covers three approaches: custom landing pages with Lemon.js overlay checkout, standalone landing pages, and product description embedding.

Beginner–Intermediate~7 min readUpdated 2026

Prerequisites

Before you start, have the following ready:

Your Embeddy embed code. Log in at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

Lemon Squeezy seller account. You need access to your Lemon Squeezy dashboard to get your product checkout URL and Lemon.js embed code.
Your own website (for Methods 1 and 2). A website where you can edit HTML is needed to host the landing page with both the Embeddy widget and Lemon Squeezy checkout.

About Lemon.js: Lemon.js is Lemon Squeezy's official JavaScript library that enables overlay checkout — a purchase modal that opens on top of your page without navigating away. This is the recommended way to integrate Lemon Squeezy checkout on your own website.

Method 1: Custom Landing Page with Lemon.js

Recommended — best conversion rate

The most effective approach is to create a landing page that combines an Embeddy widget with Lemon Squeezy's overlay checkout. Visitors can interact with your widget (demo, calculator, quiz) and purchase without leaving the page.

1
Get your Lemon Squeezy checkout URL
In your Lemon Squeezy dashboard, go to your product and copy the checkout URL (e.g., https://YOURSTORE.lemonsqueezy.com/checkout/buy/PRODUCT_ID).
2
Create your landing page
Create a page on your website. Add your Embeddy iframe for the interactive content, then add a Lemon Squeezy checkout button with the overlay attribute.
3
Include Lemon.js
Add the Lemon.js script to your page. This enables the overlay checkout experience.

<!DOCTYPE html>
<html>
<head>
  <title>Product Demo & Purchase</title>
  <!-- Lemon.js for overlay checkout -->
  <script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
</head>
<body>
  <div style="max-width: 900px; margin: 0 auto; padding: 2rem;">
    <h1>Try Before You Buy</h1>

    <!-- Embeddy Interactive Widget -->
    <div style="margin: 2rem 0;">
      <iframe
        src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
        width="100%"
        height="500"
        frameborder="0"
        style="border: none; border-radius: 8px;"
        loading="lazy"
        title="Interactive Demo"
      ></iframe>
    </div>

    <!-- Lemon Squeezy Checkout Button (overlay) -->
    <div style="text-align: center; margin: 2rem 0;">
      <a
        class="lemonsqueezy-button"
        href="https://YOURSTORE.lemonsqueezy.com/checkout/buy/PRODUCT_ID"
        style="display:inline-block;background:#7c3aed;color:#fff;padding:12px 32px;border-radius:8px;font-weight:bold;text-decoration:none;"
      >
        Buy Now
      </a>
    </div>
  </div>
</body>
</html>

4
Publish and test
Publish the page. Click the buy button to verify the Lemon Squeezy overlay checkout opens on top of the page while the Embeddy widget remains visible.

Tip: The lemonsqueezy-button class tells Lemon.js to open the checkout as an overlay instead of navigating away. This keeps visitors on your page for a smoother buying experience.

Method 2: Inline Embed + Lemon.js

Advanced — programmatic checkout

For more advanced setups, you can programmatically trigger the Lemon Squeezy checkout from your Embeddy widget interaction. For example, after a user completes a quiz or calculator, you can show a buy button that opens Lemon Squeezy checkout.

<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>

<!-- Embeddy Widget -->
<div style="max-width: 800px; margin: 2rem auto;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="500"
    frameborder="0"
    style="border: none; border-radius: 8px;"
    loading="lazy"
    title="Interactive Widget"
  ></iframe>
</div>

<!-- Dynamic checkout button that appears after interaction -->
<div id="checkout-area" style="text-align: center; margin: 2rem auto;">
  <a
    class="lemonsqueezy-button"
    href="https://YOURSTORE.lemonsqueezy.com/checkout/buy/PRODUCT_ID"
    style="display:inline-block;background:#7c3aed;color:#fff;padding:14px 36px;border-radius:8px;font-weight:bold;font-size:1.1rem;text-decoration:none;"
  >
    Get Started — Buy Now
  </a>
</div>

Pro tip: You can pass URL parameters to the Lemon Squeezy checkout link to pre-fill customer details or apply discount codes. Check Lemon Squeezy's documentation for supported query parameters.

Method 3: Product Description

Simple — link-based approach

Lemon Squeezy's hosted product pages have a rich text description editor. While direct iframe embedding may be limited, you can add a prominent link to a page hosting your Embeddy widget.

1
Edit your product
In your Lemon Squeezy dashboard, go to Products and edit the product description.
2
Add a link to your widget page
Add a call-to-action link in the description like "Try our interactive demo" that points to your landing page (from Method 1) where the Embeddy widget is hosted.
3
Save the product
Save and verify the link appears correctly on the product page.

Note: Lemon Squeezy product pages on their hosted domain may not support raw iframe HTML. The link-based approach is the most reliable way to connect your Embeddy widget with a Lemon Squeezy product when using their hosted pages.

Troubleshooting

Lemon.js overlay checkout does not open

Ensure you have included the Lemon.js script: <script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>. The checkout link must also have the lemonsqueezy-button class for the overlay to activate.

The Embeddy widget shows a blank area

Verify your Widget ID and Props ID are correct. Copy the embed code fresh from the Embeddy dashboard and ensure your widget is published.

Both iframes conflict on the page

Embeddy widgets and Lemon Squeezy checkout overlays use separate iframes and should not conflict. If you experience issues, check the browser console for JavaScript errors. Ensure both scripts are loaded (Lemon.js for checkout, no additional script needed for Embeddy iframes).

Widget is cut off on mobile

Ensure the iframe has width="100%" and your page includes a responsive viewport meta tag. Wrap the iframe in a container with max-width: 100%; overflow: hidden;.

Frequently Asked Questions

Can I embed an Embeddy widget directly on a Lemon Squeezy product page?

Lemon Squeezy's hosted product pages have a rich text description editor that may not support raw iframe HTML. For the best experience, create a custom landing page on your own website (Method 1) that includes both the Embeddy widget and a Lemon Squeezy checkout button.

Will an Embeddy widget conflict with Lemon.js?

No. Embeddy widgets load as independent iframes and do not interact with Lemon.js. Both can coexist on the same page without conflicts. The Embeddy iframe loads your widget content while Lemon.js handles the checkout overlay.

Is this free to use?

Embeddy offers a free tier for creating and embedding widgets. Lemon Squeezy charges transaction fees on sales but the Lemon.js library and checkout embeds are free to use. There is no additional cost for combining both tools.

Can I track conversions from the Embeddy widget to Lemon Squeezy sales?

You can use UTM parameters on your landing page URL and Lemon Squeezy's checkout link to track the conversion funnel. Lemon Squeezy also supports webhooks for server-side conversion tracking.

Ready to boost your Lemon Squeezy sales?

Build a free interactive widget — product demo, calculator, quiz, or anything you need — and pair it with Lemon Squeezy checkout to increase conversions.

Create your free widget at embeddy.ai

On this page