You can embed a published Numio calculator directly in your own website using an iframe. The embed renders with a transparent background so it sits seamlessly inside your page's layout. This article covers getting the snippet and dropping it into your site.
Get the embed code
- Publish your project if you haven't already — see Publish your project.
- Click the Share button in the editor toolbar to open the Share your project dialog.
- Under Share link type, choose Embed.
- (Optional) Name the link to track responses from it separately — this is a Professional feature. See Named / tracking links.
- Click Generate.
- Click Copy embed code to copy the full iframe snippet, or Copy embed link to copy just the embed URL.
The embed snippet
The copied embed code is an iframe wrapped in a positioned container:
<div style="position:relative;overflow:hidden;">
<iframe frameborder="0" style="width:100%;height:100%;" src="YOUR_EMBED_URL" />
</div>
The iframe is set to fill its container (width:100%;height:100%;), so the size of the embed is controlled by the wrapping <div>. To give the calculator room, set a height on the container in your own page — for example:
<div style="position:relative;overflow:hidden;height:700px;">
<iframe frameborder="0" style="width:100%;height:100%;" src="YOUR_EMBED_URL" />
</div>
Adjust the height to suit your calculator's length. Because the iframe fills its parent, you control the responsive sizing from the container in your site's CSS.
Transparent embed mode
Embed links use a dedicated runtime route that renders the calculator with a transparent page background, rather than the solid page color used by the full-page hosted link. This means whatever background color or pattern your website uses shows through around the calculator, so the embed looks native to your site.
Because of this, set page-level styling (background, wallpaper) on your own site — the embed won't paint its own page background.
General link vs embed link
The Embed link is purpose-built for iframes and the transparent background. If you want a standalone, full-page version of the calculator to share directly — in an email or a message — use the General link instead. See Share a project via link for the distinction.