How to Embed a Verystep Tool in Framer (Embed Component)

Framer gives you two modes for the same component — the snippet goes in one, the bare address in the other.

Published November 4, 2026 · A Verystep guide

Illustration: nested rectangular frames offset like design layers, the innermost holding colour swatch squares

In Framer, embed a Verystep tool by inserting the Embed component and choosing a mode: HTML mode takes the tool’s full snippet, URL mode takes just its embed address (https://verystep.com/embed/…). The Embed component itself has no plan gate. Size it like any frame on your canvas, and remember the tool brings its own styling.

HTML mode or URL mode?

Framer’s Embed component is one element with two appetites. HTML mode is for code: paste the snippet from a tool’s embed box and you get the frame exactly as the snippet describes it, lazy loading included. URL mode is for addresses: paste the tool’s embed URL and Framer wraps it for you. Both work; HTML mode is the one we recommend, because it is the same snippet every other platform uses and it behaves identically if you ever move the page. Do not paste the snippet into URL mode or the address into HTML mode — that mismatch is the top Framer embed mistake.

Step by step

Open the tool and copy its embed code — the example below is the Color Converter.
In Framer, press Insert and add the Embed component where the tool belongs.
In the component’s properties, choose HTML and paste the snippet. (Or choose URL and paste only the embed address.)
Set the frame’s width to fill its parent and its height to fit the tool — start at 520 and adjust.
Check the tablet and phone breakpoints; resize the frame per breakpoint if the tool clips.
Publish.

Worked example

The exact snippet from the Color Converter’s embed box:

<iframe src="https://verystep.com/embed/color/" title="Color Converter (HEX ↔ RGB)" width="100%" height="520" loading="lazy" style="border:0"></iframe>

For URL mode, the address alone is https://verystep.com/embed/color/ — swap in the slug of whichever tool you are embedding.

If something looks wrong

The component shows the snippet as text. It is in URL mode with a snippet pasted in, or HTML mode is fine but the paste got escaped. Switch to HTML mode and paste fresh from the tool’s embed box.

It works on desktop and clips on mobile. Framer breakpoints carry their own frame sizes. Select the embed at the phone breakpoint and give it the height the tool needs there.

The colours inside the frame are not my site’s. By design — the tool keeps Verystep’s interface so it stays familiar and keeps working across updates. Frame it with your own padding and background; the inside is ours to maintain. More on the arrangement on the embed overview.

Keep going

Closest cousins: Webflow’s Code Embed element (with a paid-plan note) and Carrd’s Embed element for one-pagers.

The example on this page, live

The worked example below embeds the Verystep Color Converter — the HEX to RGB translator designers keep open all day. Find its code in the embed box under the FAQs.

Open the Color Converter (HEX ↔ RGB) →

Frequently asked questions

Which mode should I use in Framer’s Embed component?

HTML mode with the full snippet from the tool’s embed box. URL mode also works if you paste only the embed address (the URL containing /embed/), but never paste the snippet into URL mode.

Does the Embed component need a paid Framer plan?

The component itself is not plan-gated. (Site-wide custom code is a separate Framer feature with its own plan rules — you do not need it for an Embed component.)

Why does the embedded tool keep Verystep’s styling?

The frame loads the tool from Verystep, so its interface is ours: consistent for your visitors, and it picks up fixes and improvements automatically. You control the frame’s size and surroundings.

How do I stop the tool being clipped on mobile?

Select the Embed component at the phone breakpoint and increase its height there. Framer keeps breakpoint sizes independent, so the desktop height does not carry over automatically.

More guides

Illustration: a blog page built from stacked blocks, with a calculator block being dragged into place