Can you embed an interactive demo in Squarespace?

Yes, using a Code Block with the iframe embed code from your demo tool. Code blocks are a plan-gated feature, so check your plan first; if you do not have them, an Embed Block or a simple link to the hosted demo both work.

Why does my Squarespace page jump when the demo loads?

The iframe has no reserved height, so the page reflows once it appears. Set an explicit aspect ratio on the iframe and the space is held from the start.

Does an embedded demo slow down a Squarespace site?

It can if it is above the fold and not lazy-loaded. Add loading="lazy" for anything below the fold and keep the demo out of the top of the page so it does not become your Largest Contentful Paint element.

← Back to blog

How to Add an Interactive Demo to Squarespace

August 19, 2026

Squarespace handles iframe embeds well once you can add one, and the whole exercise takes about five minutes.

The one thing that catches people out is that code blocks are a plan-gated feature, so the first step is finding out whether yours has them.

The embed itself

Copy the embed code from your demo tool. It will be an iframe pointing at a hosted URL. Add a Code Block where you want it, paste, and save.

Squarespace renders the block in the editor as well as on the live page, so you can confirm it works before publishing.

If Code Block is not available

Check your plan. Code blocks sit behind the higher tiers, and Squarespace has moved which ones over time -- check your account rather than trusting an article, including this one.
Use an Embed Block instead. It accepts a URL and works for anything that supports oEmbed, though results vary by tool.
Or link out. A button linking to the hosted demo costs nothing, works on every plan, and loses surprisingly little.

Making it not hurt your page

Give the iframe an explicit aspect ratio so the page does not jump when it loads. `style="aspect-ratio: 16/10; width: 100%; border: 0;"` is enough, adjusted to your demo's real shape.

Add `loading="lazy"` if the demo is below the fold. Both take seconds and prevent the layout shift and speed complaints that get blamed on embeds generally.

Mobile

Squarespace templates are responsive but a fixed-width iframe is not. Use `width: 100%` rather than a pixel width, then check the page on a phone -- Squarespace's own mobile preview is reliable enough for this.

If the demo is unreadable at phone width, that is a demo problem rather than a Squarespace one: zoom into the important part of each step.

Frequently asked questions

Can you embed an interactive demo in Squarespace?: Yes, using a Code Block with the iframe embed code from your demo tool. Code blocks are a plan-gated feature, so check your plan first; if you do not have them, an Embed Block or a simple link to the hosted demo both work.
Why does my Squarespace page jump when the demo loads?: The iframe has no reserved height, so the page reflows once it appears. Set an explicit aspect ratio on the iframe and the space is held from the start.
Does an embedded demo slow down a Squarespace site?: It can if it is above the fold and not lazy-loaded. Add loading="lazy" for anything below the fold and keep the demo out of the top of the page so it does not become your Largest Contentful Paint element.

Keep reading

This is what Demorta does

Click through it — the same kind of demo you can record of your own product.

Try it on your own product

Record your first interactive demo free.

Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.

Start free →