May 12, 2026 · 5 min read
How to embed a 3D phone mockup in Webflow (2026 guide)
Step-by-step: add an interactive 3D iPhone mockup to your Webflow site in five minutes using a single Embed component.
Webflow is one of the best places to ship a modern product site, but its native asset library tops out at static images and videos. If you want visitors to rotate a phone holding your screenshot, you need a 3D embed. Here's how to add one in five minutes.
1. Create your showcase
Sign up free, drop your screenshot in the editor, pick the iPhone device, and save. You'll land on the embed panel.
2. Copy the iframe
The embed panel gives you a one-line iframe like:
<iframe src="https://mockstage.app/embed/your-id" width="100%" height="600" frameborder="0" loading="lazy"></iframe>3. Paste into Webflow
In the Webflow designer, drag an Embed component into your hero section, paste the iframe, and click Save & Close. Set the parent section's max-width to control how large the device renders.
4. Publish
Hit publish. The embed lazy-loads when it enters the viewport, so your Lighthouse scores stay clean.