Embed an interactive 3D flipbook in Framer
Framer's strength is design — but their native PDF embeds are flat. Drop an i3dify 3D viewer for portfolios, lookbooks, and pitch decks worthy of Framer.
Why this works
Framer's Embed component takes any iframe HTML. Combined with Framer's responsive breakpoints, the i3dify viewer adapts cleanly across desktop, tablet, and mobile. Both tools share a design-first philosophy.
Step-by-step
4 steps from PDF to live embed
- 1
Publish in i3dify
Upload your project to i3dify, set visibility to Public or Unlisted, copy the iframe from the Share panel.
- 2
Insert the Embed component
In Framer, from the Insert menu, choose Embed. Switch to "HTML" mode and paste the iframe code.
- 3
Set responsive constraints
Use Framer's Fixed Height + Fill Width for the embed container. The viewer fills the width and respects your set height (use 600 px for desktop, 400 px for mobile via breakpoint overrides).
- 4
Preview and publish
Click Preview to see the live 3D viewer. Framer's preview supports JS execution unlike Webflow Designer.
The code
Copy this into Framer
<iframe src="https://i3dify.com/view/YOUR_PROJECT_ID" width="100%" height="600" frameborder="0" allowfullscreen loading="lazy" ></iframe>
Note: Framer's Embed component supports both URL embeds and raw HTML. For full control over the iframe attributes (loading, allowfullscreen), use the HTML mode.
Heads-up
Framer-specific things to know
Framer Smart Components don't wrap iframes well
If you try to put the iframe inside a Smart Component variant, behavior can be inconsistent. Keep iframes in regular frames, not Smart Components.
CMS works with template-driven embeds
You can store i3dify project IDs in a Framer CMS Collection and use them in template pages. The Embed component supports dynamic URLs via Framer's CMS bindings.
Framer free domain limits embeds
On Framer's free framer.website domain, some browsers block third-party iframes due to cross-origin policies. Connect a custom domain (free with annual plan) for reliable embeds.
FAQ
Framer embed questions
Does the viewer work in Framer's Smart Animate?
Smart Animate runs on Framer's native elements only. The i3dify viewer is an iframe so it does not participate in Smart Animate transitions — it stays static across page transitions, which is usually what you want for a viewer.
Can I dynamically swap the embedded project?
Yes — use Framer CMS to store the project ID as a field. Bind that field to a URL parameter in the Embed component. Each CMS entry renders a different i3dify viewer.
How does this compare to Framer's native lightbox?
Framer's native lightbox shows static images in a modal. The i3dify viewer is interactive — page-turning physics, dock with links, zoom, fullscreen. Better for portfolios, brochures, and 3D business cards.
Will it impact Framer's Lighthouse score?
The iframe is lazy-loaded by default. PageSpeed Insights treats it as an off-screen resource. The host page's LCP and CLS are unaffected.
Keep exploring
Pages other readers found useful
Free 3D Portfolio Builder
A virtual 3D walk-through gallery — not another Squarespace scroll-grid template.
ReadFree toolFree 3D Photo Album Maker
A 3D hardcover album grandma actually opens on her phone.
ReadEmbed inEmbed an interactive 3D flipbook in Webflow
Webflow's PDF lightbox is closed-source and ugly.
ReadEmbed inEmbed an interactive 3D flipbook in Squarespace
Squarespace's native PDF block is flat.
ReadFor your teami3dify for photographers
Deliver wedding albums grandma actually opens.
ReadFor your teami3dify for musicians & artists
Replace your Linktree with a 3D visual album fans flip through — cover art, lyrics, tour photos, every streaming link in one place.
ReadMake a project, paste in Framer
3 free projects on i3dify, no credit card. Each one is one iframe away from being live on your Framer page.
Start free