The interactive image maker built for Wix.

Both editors accept the same iframe, but you reach the element differently and the sizing behaviour is not identical.

• Wix Editor (classic): Add → Embed Code → Embed HTML → "Code" tab, then paste the snippet. The element has a fixed width and height you drag, so set the box to the same aspect ratio as your image.
• Wix Studio: Add → Embed → Embed HTML. Studio uses a responsive grid, so stretch the element to the container and let the snippet's built-in aspect-ratio wrapper handle height instead of fixing it per breakpoint.

In both cases, publish the site after saving — the Wix editor preview and the live site render embeds separately, and an unpublished change is the single most common reason an embed "isn't working" on the public URL.

Wix gives the iframe exactly the box you draw. If that box is a different shape from your image, you get letterboxing or a scrollbar. Two fixes, in order of preference:

1. Copy a fresh snippet from the Embed panel — it bakes your image's real aspect ratio into a padding-based wrapper, so the content fills whatever width Wix gives it.
2. Or set the element height manually to width ÷ aspect ratio. A 1600×900 image in a 980px-wide element needs roughly 551px of height.

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe src="https://interactiveimage.com/embed/YOUR-ID"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    scrolling="no" loading="lazy" title="Interactive image"></iframe>
</div>

Also turn off "Show scrollbars" on the Wix element if your template offers it — the embed never needs to scroll.

Wix lets you attach a single link to an image, and its Hover Box can reveal one block of content on hover. Neither gives you multiple independent markers on one photo, popups with their own text and images, category filters, or hotspots that stay aligned when the image scales. That's the gap this fills — and because the hotspots live in Interactive Image rather than in the Wix page, you can edit them without reopening the Wix editor. For a plain-language primer, see what is an interactive image, or compare approaches on Interactive Image vs Wix apps.

Work down this list — it is ordered by how often each one turns out to be the cause:

Studio tempts you into sizing the embed separately at desktop, tablet, and mobile. You do not need to, and doing it creates three things to maintain:

1. Select the Embed HTML element and set width to 100% (or stretch it to the parent container) on the widest breakpoint.
2. Leave height on auto. The snippet's aspect-ratio wrapper computes height from whatever width Studio hands it.
3. Check the tablet and mobile breakpoints without changing anything — inherited values should already be correct. Only override if a parent container adds padding you did not intend.

If you have already pinned a pixel height at a breakpoint, clear it back to auto — a leftover override is the usual reason one breakpoint letterboxes while the others look right.

If you run Wix Stores, the highest-value version of this is a lifestyle or exploded product shot where every hotspot links to a product page:

• Give each hotspot a CTA pointing at the full product URL —https://yoursite.com/product-page/item-name. Use absolute URLs; relative paths resolve against the embed, not your Wix site.
• Set the CTA to open in a new tab so shoppers do not lose the image they were exploring, or same-tab if the product page is the intended next step.
• Put the price in the popup text and keep it to one line — hotspot popups are a teaser, the product page does the selling.
• Use categories when one image covers multiple collections, so visitors can filter to just the pieces they care about.

Full walkthrough on the shoppable image maker.