How to Embed a Widget on Gumroad

Gumroad is a popular platform for selling digital products, courses, and memberships. By combining Embeddy widgets with your Gumroad products, you can add interactive demos, calculators, quizzes, and lead forms to boost conversions. This guide covers three approaches: product description HTML, custom landing pages with both Gumroad and Embeddy embeds, and using Gumroad's overlay checkout alongside an Embeddy widget on your own site.

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>

Gumroad seller account. You need access to your Gumroad dashboard to edit product descriptions and access embed codes.
Your own website (for Methods 2 and 3). If you want to combine Gumroad checkout with an Embeddy widget on a landing page, you need a website where you can edit HTML.

Note: Gumroad product pages on gumroad.com have limited HTML support in descriptions. For the most reliable embedding experience, use Method 2 or Method 3 with your own landing page.

Method 1: Product Description

Quick — limited HTML support

Gumroad's product description supports rich text and some HTML formatting. While full iframe support may be limited on the Gumroad-hosted product page, you can try embedding directly in the product description.

1
Edit your product
In your Gumroad dashboard, click Products and select the product you want to edit.
2
Edit the description
In the product description editor, you can add rich content. If the editor supports embed/HTML mode, paste your Embeddy iframe code. Otherwise, add a link to a landing page with the widget (see Method 2).
3
Save and preview
Click "Save" and preview the product page to check if the widget renders.

Alternative: If Gumroad strips the iframe from the description, add a prominent link or button in the description that says "Try our interactive demo" and link to a landing page with the Embeddy widget (Method 2).

Method 2: Custom Landing Page

Recommended — full control

The most effective approach is to create a landing page on your own website that includes both an Embeddy widget and a Gumroad purchase button. This gives you full control over the layout and ensures the widget renders perfectly.

1
Create a landing page
Create a page on your website (WordPress, HTML, Next.js, etc.) for your product.
2
Add the Embeddy widget
Paste your Embeddy iframe code in the page HTML where you want the interactive widget to appear (e.g., a demo, calculator, or quiz).
3
Add the Gumroad purchase button
Copy the Gumroad embed code or overlay button code from your product settings and add it below or alongside the Embeddy widget.

<!-- Embeddy Widget: Interactive demo/calculator -->
<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>

<!-- Gumroad Purchase Button -->
<div style="text-align: center; margin: 2rem auto;">
  <a class="gumroad-button" href="https://YOURNAME.gumroad.com/l/PRODUCT_ID">
    Buy Now on Gumroad
  </a>
  <script src="https://gumroad.com/js/gumroad.js"></script>
</div>

Tip: Place the Embeddy widget (e.g., a product demo or ROI calculator) above the Gumroad buy button. This lets visitors interact with the widget first, which can significantly increase conversion rates.

Method 3: Gumroad Overlay Checkout + Embeddy Widget

Advanced — seamless purchase flow

Gumroad's overlay checkout opens a purchase modal on top of your page without navigating away. Combine this with an Embeddy widget to create a seamless experience where visitors interact with your widget and buy without leaving the page.

<!DOCTYPE html>
<html>
<head>
  <title>Product Demo</title>
  <script src="https://gumroad.com/js/gumroad.js"></script>
</head>
<body>
  <div style="max-width: 900px; margin: 0 auto; padding: 2rem;">
    <h1>Try Our Product</h1>

    <!-- Embeddy Widget -->
    <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>

    <!-- Gumroad Overlay Button -->
    <div style="text-align: center; margin-top: 2rem;">
      <a class="gumroad-button" href="https://YOURNAME.gumroad.com/l/PRODUCT_ID">
        Get It Now
      </a>
    </div>
  </div>
</body>
</html>

How it works: When a visitor clicks the Gumroad button, the checkout opens as an overlay modal on your page. The Embeddy widget remains visible in the background, maintaining context for the purchase.

Troubleshooting

Gumroad strips the iframe from product descriptions

Gumroad's product description editor may sanitize HTML and remove iframe tags. This is expected behavior. Use Method 2 (custom landing page) for reliable embedding. You can link to your landing page from the Gumroad product description.

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.

Gumroad overlay does not open

Make sure you have included the Gumroad JavaScript file gumroad.com/js/gumroad.js in your page. The overlay button requires this script to function. Also ensure the product URL in the href is correct.

Widget is cut off on mobile

Ensure the iframe has width="100%" and your page has responsive viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">

Frequently Asked Questions

Will an Embeddy widget work directly on gumroad.com product pages?

Gumroad's hosted product pages have limited HTML support and may strip iframe tags. For the best experience, use a custom landing page on your own website (Method 2 or 3) and link to it from your Gumroad product.

Can I use Gumroad's embed widget and Embeddy together on the same page?

Yes. Both use iframes and will load independently without conflicts. Place the Embeddy widget where you want the interactive content and the Gumroad embed where you want the purchase button. They can coexist on the same page without issues.

Is this free to use?

Embeddy offers a free tier for creating and embedding widgets. Gumroad charges transaction fees on sales but does not charge for embedding their checkout buttons. There is no additional cost for combining both tools.

Ready to boost your Gumroad sales?

Build a free interactive widget — product demo, calculator, quiz, or anything you need — and pair it with your Gumroad products to increase conversions.

Create your free widget at embeddy.ai

On this page