How to embed an iframe in Framer
Framer has an Embed component in the Insert menu. You can type a URL, or paste iframe or script code in its HTML tab. Some sites block embedding with HTTP headers, and then the embed stays blank.
2 min read · Updated
- Raw iframe code
- Yes, in the HTML tab
- Embed a URL
- Yes
- Scripts in the editor
- Publish to test
Steps
Step 1: Open the Insert menu and search for Embed
The Insert menu shows the Embed component.
Step 2: Drag the Embed component onto the canvas
Put it where you want the frame on the page.
Step 3: Type the URL, or paste code in the HTML tab
To show a page, type its full URL in the component. To use iframe or script code, select the component and paste the code in the HTML tab.
Step 4: Publish and open the site in a browser
Framer runs some scripts only in the browser, not in the editor. Check the embed on the published site.
Check your URL first
If the page blocks framing, the Embed component shows an empty box or an error.
Limits
Some websites block embedding through HTTP headers, so they do not show in the Embed component.
Framer runs scripts in the head and body only in the browser, not in the editor.
Some script embeds need extra code around the script tag before they work.
Troubleshooting
- The embed is blank
The page sends X-Frame-Options or a CSP frame-ancestors header. Test the URL to see which header blocks it.
Blank iframe, no error- "Refused to connect"
The site does not allow other sites to frame it. Only the site owner can change that header.
"Refused to connect": cause and fix- The widget does not show in the editor
Framer does not run scripts in the editor. Publish your changes and open the site in a browser.
Blank iframe, no error
- Framer Help: How to add an iframe or embed script · framer.com
- Framer Help: Embedding a Loom video in your site · framer.com
- Framer Help: Embedding a Trustpilot widget in your site · framer.com