Try i3dify free
Integration guide · Webflow

Embed an interactive 3D flipbook in Webflow

Webflow's PDF lightbox is closed-source and ugly. Drop an i3dify iframe in any Embed block — real 3D viewer, responsive, ships with your site.

Get a free i3dify projectMake a flipbook first

Why this works

Webflow ships an Embed element (HTML widget) that accepts any iframe. Combined with Webflow's flexbox + responsive controls, the i3dify viewer adapts cleanly to your breakpoints. No plugin, no Webflow CMS friction.

Step-by-step

4 steps from PDF to live embed

  1. 1

    Publish your i3dify project

    Set visibility to Public or Unlisted in the share panel. Copy the iframe code.

  2. 2

    Drag an Embed element in Webflow

    In Webflow Designer, from the Add panel, drag the "Embed" element to where you want the viewer. A modal opens for the HTML code.

  3. 3

    Paste the iframe

    Paste the full iframe code and click Save. The embed preview shows a placeholder in Designer; the live viewer renders on the published site.

  4. 4

    Wrap for responsiveness

    Wrap the Embed element in a div with `aspect-ratio: 4 / 3` (set via Webflow's style panel using Custom CSS). The iframe will scale at every breakpoint.

The code

Copy this into Webflow

<iframe
  src="https://i3dify.com/view/YOUR_PROJECT_ID"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="lazy"
></iframe>

Note: In Webflow Designer the embed shows a static "Embed" placeholder. Hit Publish (Designer preview at top right) to see the real 3D viewer running. Designer preview mode is JS-disabled by design.

Heads-up

Webflow-specific things to know

Designer preview shows placeholder

Designer renders embeds as a placeholder block. The 3D viewer only runs on the published site (staging or production). This is a Webflow limitation, not an i3dify bug.

CMS Collection items work too

You can store the i3dify project ID as a CMS field on a Collection (e.g. "Portfolio piece") and dynamically build the iframe in a Collection Template page using the embed block + dynamic fields.

Free Webflow sites have a code limit

Webflow's free starter plan caps custom code at 50 KB. The i3dify iframe is well under that — only an issue if you have many large embeds on one page.

FAQ

Webflow embed questions

Does i3dify integrate with Webflow CMS?

Yes — store the i3dify project ID as a plain text field on a Collection. Use it inside an Embed block on the Collection Template page to dynamically render a viewer per item.

Can I use this on a Webflow E-commerce store?

Yes. Embed a 3D product brochure or lookbook on product pages. The iframe works in product description, custom embed blocks, and template pages.

Will it slow down my Webflow site's PageSpeed score?

The iframe uses `loading="lazy"` so it only loads when scrolled into view. PageSpeed treats it as an off-screen asset — minimal hit to LCP and CLS.

How does this compare to Webflow's built-in PDF lightbox?

Webflow's lightbox shows a flat PDF page-by-page. i3dify renders the PDF as a 3D book with page physics. Bigger visual differentiation for portfolios, lookbooks, and catalogs.

Keep exploring

Pages other readers found useful

Free tool

Free 3D Portfolio Builder

A virtual 3D walk-through gallery — not another Squarespace scroll-grid template.

ReadFree tool

Free PDF to 3D Flipbook Converter

Real 3D page physics, not the 2D CSS flips of Issuu and Flipsnack.

ReadEmbed in

Embed an interactive 3D flipbook in Framer

Framer's strength is design — but their native PDF embeds are flat.

ReadEmbed in

Embed an interactive 3D flipbook in Squarespace

Squarespace's native PDF block is flat.

ReadFor your team

i3dify for photographers

Deliver wedding albums grandma actually opens.

ReadFor your team

i3dify for real estate agents

Lawn-sign QR → 3D brochure → Calendly booking.

Read

Make a project, paste in Webflow

3 free projects on i3dify, no credit card. Each one is one iframe away from being live on your Webflow page.

Start free