How to Embed a Widget on Ecwid

Ecwid (by Lightspeed) is a popular e-commerce platform that lets you add a store to any website. By embedding Embeddy widgets on your Ecwid store, you can add interactive calculators, product configurators, quizzes, and more. This guide covers three methods: Instant Site custom code blocks, product description HTML, and embedding on an external site alongside your Ecwid store.

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>

Ecwid admin access. You need store owner access to edit your Instant Site and product descriptions.
Business plan or higher (for Method 1). The custom code feature on Instant Site requires a Business plan or above. Product descriptions with HTML (Method 2) work on all plans.

Plan note: If you are on the Ecwid Free or Venture plan, use Method 2 (product description) or Method 3 (external site) to embed your widget, as the custom code feature is not available on lower-tier plans.

Method 1: Instant Site Custom Code

Easiest — visual editor

Ecwid's Instant Site includes a custom code section that allows you to inject HTML, CSS, and JavaScript directly into your store pages. This is the quickest way to add an Embeddy widget to your Instant Site.

1
Open the Instant Site editor
In your Ecwid admin panel, go to Website > Edit Site to open the Instant Site visual editor.
2
Add a custom code section
Click "Add Section" at the position where you want the widget. Scroll through the available sections and select "Custom Code".
3
Paste your embed code
Click on the custom code section to open its editor. Paste your Embeddy iframe embed code into the code area:

<div style="max-width: 800px; margin: 2rem auto; padding: 0 1rem;">
  <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>

4
Publish
Click "Publish" to save your changes. Visit your Instant Site to verify the widget appears correctly.

Tip: You can drag the custom code section to reposition it relative to other sections like your store catalog, about section, or contact information.

Method 2: Product Description HTML

Works on all plans

You can embed an Embeddy widget directly in a product's description using the HTML editor. This is ideal for product-specific widgets like size calculators or configurators.

1
Edit a product
In your Ecwid admin, go to Catalog > Products and click the product you want to edit.
2
Switch to HTML mode
In the product description editor, click the </> button (or"HTML" toggle) to switch to raw HTML editing mode.
3
Paste your embed code
Paste the iframe embed code at the end of the product description (or wherever you want the widget to appear).
4
Save the product
Click "Save". Visit the product page on your store to verify the widget appears within the description.

<!-- Add this at the end of your product description HTML -->
<div style="margin-top: 1.5rem;">
  <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>

Note: Some Ecwid plans may sanitize certain HTML tags in product descriptions. If the iframe does not render, try Method 1 or Method 3 instead.

Method 3: Embed on Your External Site

Any plan — full control

If you embed your Ecwid store on your own website (WordPress, Wix, HTML, etc.), you can add the Embeddy widget directly to your site's HTML alongside the Ecwid store widget. This gives you full control over placement and styling.

1
Open your site editor
Open the page on your website where the Ecwid store is embedded.
2
Add the Embeddy iframe
Add an HTML block (or edit the page source) and paste your Embeddy iframe code above, below, or alongside the Ecwid store widget.
3
Save and publish
Save the page and verify both the Ecwid store and the Embeddy widget load correctly.

<!-- Embeddy Widget above your Ecwid store -->
<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>

<!-- Your Ecwid store widget below -->
<div id="my-store-STORE_ID"></div>

Tip: This method works regardless of your Ecwid plan and gives you the most flexibility in terms of widget placement and styling.

Troubleshooting

I do not see the "Custom Code" option in Instant Site

The custom code section requires an Ecwid Business plan or higher. If you are on the Free or Venture plan, upgrade your plan or use Method 2 (product description) or Method 3 (external site) instead.

The widget shows a blank area or loading spinner

Verify your Widget ID and Props ID are correct. Copy the embed code fresh from the Embeddy dashboard and ensure your widget is published (not in draft mode).

Iframe is stripped from product description

Ecwid may sanitize certain HTML tags in product descriptions depending on your plan. Make sure you are editing in HTML mode (not the visual editor). If iframes are still stripped, use the Instant Site custom code method or embed on your external site.

Widget is cut off on mobile

Ensure the iframe has width="100%" and the wrapper div has max-width: 100%. Ecwid's Instant Site is responsive, but custom code sections need responsive styling applied manually.

Frequently Asked Questions

Will an embedded widget slow down my Ecwid store?

No. Iframes load independently and do not block your store's rendering. Using loading="lazy" defers the widget until it is scrolled into view.

Can I add the widget to specific product pages only?

Yes. Use Method 2 to add the embed code to individual product descriptions. Each product can have a different widget with its own Widget ID and Props ID.

Does Ecwid support custom JavaScript in Instant Site?

Yes, the Custom Code section supports HTML, CSS, and JavaScript on Business plans and above. However, for Embeddy widgets, you only need the iframe HTML — no JavaScript is required.

Ready to supercharge your Ecwid store?

Build a free interactive widget — calculator, product configurator, quiz, or anything you need — and embed it on your store in minutes.

Create your free widget at embeddy.ai

On this page