Embed Interactive Content on Wix
No Wix app needed. Copy one line of code, paste it into a Custom Code block, and you're live.
Last updated: May 2026Maintained by CalcStack
Why CalcStack
Why CalcStack for Wix?
Lead capture built in
Every tool can gate results behind an email form. Leads arrive in your CalcStack dashboard with full context, every input, every output, benchmark position, and the source URL of the Wix page that converted them.
Industry benchmarks
Show visitors how they compare to industry averages. Benchmarks increase engagement, make your tools more valuable and shareable, and produce higher-quality leads with richer context data.
White-label ready
Remove all CalcStack branding on Growth and Agency plans. Your tools look like a native part of your Wix site, visitors see your brand, your colors, and your domain throughout the experience.
| Category | Value |
|---|---|
| Wix | 4.3% |
| Squarespace | 2.5% |
| Webflow | 0.9% |
Source: W3Techs CMS usage statistics, 2026Share of all websites among hosted builders. Wix powers the largest slice of the small-business builder market, a vast base of sites a one-line embed can turn into lead-capture surfaces.
How the Wix Embed Works
Wix lead generation through CalcStack works via the HTML iframe widget on any Wix page. Visitors interact with calculators, scorecards, or quizzes; their inputs become qualified leads with full context routed via webhook. Integration requires no Wix app install, no Velo code, and no theme modifications, just paste the embed code into an HTML widget.
The embed loads inside an isolated iframe. Your Wix site layout, fonts, and performance remain completely unaffected. The tool communicates lead data back to CalcStack via a secure postMessage bridge, your site never handles sensitive visitor data directly.
This architecture works identically across Wix Editor, Wix Studio, and Wix sites with custom domains. No server-side configuration or Velo (Wix Code) knowledge is needed for the standard embed. According to W3Techs CMS market-share data and BuiltWith technology surveys, Wix powers millions of websites worldwide and has been consistently ranked among the largest hosted website builders since 2018.
Embed Code Reference
Two ways to embed on Wix: the HTML iframe widget in the Wix Editor (recommended for most users), or Velo (Wix Code) for advanced programmatic control. Both methods support lead capture, custom styling, and CRM integration.
HTML iframe Widget (Recommended)
In the Wix Editor, click "+" → "Embed Code" → "HTML iframe". Paste the code below into the widget code field.
Standard iframe embed
<iframe src="https://calcstack.net/embed/profit-margin-calculator?customer=your-id" width="100%" height="700" frameborder="0" style="border:none;border-radius:12px;"></iframe>Script embed with auto-resize
<div data-calcstack-tool="profit-margin-calculator" data-customer="your-id"></div>
<script src="https://calcstack.net/embed.js"></script>Velo (Wix Code), Advanced
If you need programmatic control, for example, passing dynamic values from Wix form inputs into the calculator, enable Velo Dev Mode and use the HtmlComponent API to load the embed. This is optional and only needed for advanced use cases.
Velo HtmlComponent example
$w("#htmlEmbed1").src = "https://calcstack.net/embed/profit-margin-calculator?customer=your-id";Find your Customer ID in your CalcStack dashboard under Settings. Without a Customer ID, the embed runs as a demo with CalcStack branding and no lead capture. Browse all available tools on the resources page.
Common Issues & Troubleshooting
Most Wix embed issues are resolved in under a minute. Here are the three most common problems and their fixes.
HTML widget shows blank in Wix Editor preview
Cause: The Wix Editor canvas does not render HTML iframe widgets in the drag-and-drop design view. This is a known Wix Editor behavior, the widget placeholder appears empty while editing.
Fix: The HTML widget only renders on the published site or in Wix's Preview mode. Click the "Preview" button in the top-right of the Wix Editor to verify the tool loads correctly before publishing. Once published, the tool renders fully for all visitors.
Tool appears too small in the HTML widget
Cause: The default HTML iframe widget in Wix has a relatively small height. If the CalcStack tool has multiple steps or long form fields, the content gets cut off or requires scrolling inside a small frame.
Fix: Select the HTML widget on your Wix page, open the element settings (the gear icon or stretch handles), and set the widget height to 600–800px. For tools with many fields or multi-step flows, 800px is recommended. The width should be set to 100% or stretch to the column width.
Mobile layout cuts off the tool
Cause: Wix uses a separate mobile editor with independent element sizing. The desktop HTML widget dimensions do not automatically translate to the mobile layout, so the tool may appear cropped or overflow on smaller screens.
Fix: Switch to the Wix Mobile Editor (the phone icon in the top bar) and adjust the HTML widget size for mobile separately. Set the width to full-width and the height to 600–700px. CalcStack tools are fully responsive inside the iframe, so they adapt to whatever container size you provide.
Wix Editor vs Wix Studio: Two Layout Models
Wix now ships two editors with very different layout philosophies, and the embed experience reflects that. The classic Wix Editor is absolute-positioned: you drag elements anywhere on a fixed canvas, and the HTML widget sits at exact coordinates with a separate mobile layout you adjust by hand. It is forgiving for simple pages but means you maintain desktop and mobile placements as two distinct things, which is why a tool sized on desktop can misbehave on the mobile view until you size it there too.
Wix Studio, the newer professional editor, is built on responsive stacks and a CSS-grid-style system where elements scale and reflow across breakpoints rather than living at fixed coordinates. Here you place the embed inside a responsive container and let it stretch, and the layout adapts down to mobile far more automatically than the classic Editor manages. If you build in Studio, lean into that: set the embed container to fill its cell and define behavior at each breakpoint once, instead of hand-placing a separate mobile version. The same CalcStack snippet works in both, but Studio rewards a responsive-container mindset while the classic Editor expects per-view manual sizing.
There is also Wix ADI, the AI-driven setup flow that assembles a starter site from a few answers. ADI sites can be opened in the Editor afterward, which is where you add the HTML widget, since ADI's guided flow does not surface custom-code placement directly. If you started with ADI, the path to a tool is to switch into the full Editor and add the embed there. Knowing which of these three you are in saves the confusion of hunting for an Add Embed option that lives in a different interface than the one on your screen.
Going Further with Velo and Dynamic Pages
For most sites the HTML widget is all you need, but Velo, Wix's built-in development platform, unlocks patterns the plain embed cannot reach. The most useful is feeding values from your Wix page into the tool. If a visitor selects a service or enters a number in a native Wix form field, Velo can read that input and update the embed's source so the calculator opens pre-filled to their context. That turns a generic tool into a tailored one driven by what the visitor already told your page, without making them re-enter it inside the iframe.
Wix dynamic pages are the other advanced fit. If you run a Wix collection, a directory of locations, a list of services, a set of plans, dynamic pages generate one page per item from a single template. Placing the embed on that template means every generated page carries the tool, and by storing the relevant tool slug as a collection field you can have each dynamic page load the calculator that matches its subject. A multi-location service business can show a location-specific estimator on every branch page without building those pages individually.
These are optional. Velo requires turning on Dev Mode and writing a little JavaScript, so it is for teams that want the tighter integration, not a prerequisite for capturing leads. The default path, an HTML widget with the embed pasted in, ships a working, lead-capturing tool with no code at all. Velo is the upgrade you reach for when you want the calculator to react to the rest of the Wix page rather than stand on its own, and it is good to know the door is there even if most sites never need to open it. A reasonable rule of thumb: start with the plain widget, ship it, and only graduate to Velo once you have a concrete reason, such as wanting a Wix form selection to pre-configure the tool, that the simple embed genuinely cannot satisfy.
Performance and Plan Requirements on Wix
Wix sites carry a fair amount of their own JavaScript, so isolating an added tool inside an iframe matters here specifically. The embedded calculator runs in its own browsing context and never joins the Wix page's main-thread work, which means it does not compound whatever script weight your template and apps already carry. The Wix page loads as it normally would, and the tool streams in beside it rather than queuing behind your site's existing scripts. That containment is what keeps a feature-rich tool from making an already busy Wix page feel slower.
The plan requirement is the gotcha to flag up front. A free Wix site, the kind on a wix.com subdomain with Wix ads, does not permit custom embeds, so the HTML widget needs a paid plan that allows custom code, which begins at the Connect Domain tier. Anyone planning to add interactive tools should be on a plan that supports custom code before they start, the same way they would confirm any other premium feature. This is a Wix platform rule, and it trips people who assume the free tier behaves like the paid one.
On a qualifying plan, the experience is identical whether you build in the classic Editor or Wix Studio and whether the site runs on a Wix subdomain or your own connected domain. According to BuiltWith technology surveys, Wix powers a large share of small-business sites worldwide, and the appeal is the same reason the embed model fits it: the platform handles hosting and delivery so the owner does not have to, and a one-line tool extends that hands-off promise to lead capture. For a small-business owner who chose Wix precisely to avoid technical work, that is the point: the tool adds a real conversion mechanism without asking them to learn anything they were trying to skip.
Popular Lead Generation Tools for Wix Sites
ROI Calculator
Help prospects calculate return on investment before they buy.
Pricing Calculator
Let visitors configure pricing and see costs in real time.
Mortgage Calculator
Essential for real estate and financial services Wix sites.
Solar ROI Calculator
Perfect for solar installers showcasing savings on their Wix site.
Break-Even Calculator
Show visitors when their investment will pay for itself.
Profit Margin Calculator
A must-have for e-commerce and SaaS pricing pages.
Turn Your Wix Visitors Into Qualified Leads
Start with the Free plan, no credit card required. Embed interactive tools and start capturing leads today.
Also available on: