Mockstage

May 8, 2026 · 4 min read

How to embed a 3D phone mockup in Framer

Add an interactive 3D iPhone or MacBook mockup to your Framer site with one HTML Embed.

Framer's HTML Embed component accepts any iframe — including our 3D showcase. The whole process takes one drag and one paste.

1. Grab your embed code

From your Mockstage dashboard, open the showcase and copy the iframe snippet.

2. Add an HTML Embed in Framer

Insert → Embed → HTML. Paste the iframe and Framer will preview it immediately. Resize the embed box to the height you want.

3. Match the canvas to your section

Set the embed to 100% width and a fixed height (typically 480–600px). Because the canvas is transparent, your section background shows through.

Related

3D phone mockup for Framer

Try Mockstage free

One interactive showcase, embed anywhere, no card required.