Lidascope on any site

If you can edit the page's HTML, you're one paste away. Webflow, Framer, Wix, hand-written sites — same line everywhere.

01Copy your line

From the Lidascope editor's Put it on your site panel:

<div style="position:relative;width:100%;aspect-ratio:16/9;">
  <iframe src="https://www.lidascope.com/e/YOUR_ID" title="Kaleidoscope"
    style="position:absolute;inset:0;width:100%;height:100%;border:0;"
    loading="lazy" allow="clipboard-write"></iframe>
</div>

02Paste it where it should appear

Anywhere inside <body>. The wrapper is fluid — it takes the width of whatever container you drop it in and keeps its shape on every screen size.

03Control the size

Width comes from the parent container. To cap it, wrap it or set max-width on the outer div; to change the shape, adjust aspect-ratio (or re-copy with a different shape from the editor). The Hero shape sizes by screen height instead — height:70dvh — so it's wide on desktop and tall on phones, like a native hero section.

04Site builders with an HTML element

Webflow: Embed element · Framer: Embed · Wix: Embed HTML. Paste the same line into any of them.

Your exact line — with your kaleidoscope's ID already in it — is in the editor, under Put it on your site.

Open the editor