How can I resolve the issue with Webflow displaying a blank page when trying to insert code from CodePen?
TL;DR
- Use only the iframe-based embed code from a public CodePen and paste it into Webflow’s Embed component.
- Ensure the iframe has defined width and height, avoid full HTML structures, and check browser console for errors like blocked scripts or X-Frame restrictions.
A blank page in Webflow after embedding CodePen content usually indicates a problem with how the embed code is inserted or how it's being loaded within Webflow. Here's how to fix it.
1. Check the Embed Code Format
- Only use the CodePen Embed code, not the full page URL.
- From CodePen, click the “Embed” button (on the bottom right of the Pen).
- Copy the iframe-based embed, not the JavaScript share link.
- Avoid pasting raw HTML files or external scripts that load entire documents—they won’t render properly in Webflow.
2. Use Only the Embed Component
- In Webflow Designer, add an Embed element from the Add panel (under Components).
- Paste the cleaned CodePen iframe code inside the Webflow Embed element.
- Make sure that the embed starts with an
<iframe>and does not include<html>,<head>, or<body>tags—Webflow doesn’t allow full document structures inside embeds.
3. Enable CodePen’s Safe Embedding
- Ensure the CodePen you’re embedding is public and does not contain blocked scripts like alert(), prompt(), or document.write().
- Private or restricted pens may not display correctly in Webflow or may return a blank screen.
4. Match the Width and Height
- Add explicit width and height attributes to your iframe (e.g.,
width="100%" height="400"). - Webflow can sometimes collapse the embed if it has no defined height, showing a blank or collapsed space.
5. Test with a Valid Pen First
- To confirm it's not a Webflow issue, embed a known working CodePen (like https://codepen.io/team/codepen/embed/PNaGbb).
- If this renders correctly, the problem is likely with your specific Pen setup (e.g., private setting, buggy code).
6. Check for Browser Console Errors
- Use Chrome Developer Tools (Right-click → Inspect → Console) to look for any errors, such as:
- Mixed content (HTTP inside HTTPS)
- X-Frame-Options restrictions (CodePen may block embedding if improperly configured)
7. Use loading="lazy" or sandbox Options
- For performance and security, you can add basic iframe properties like
loading="lazy"or asandboxattribute. - However, adding overly strict sandbox parameters (like
sandbox="true") can block script execution in the embed.
Summary
To fix a blank CodePen embed in Webflow, use only the valid iframe embed code, insert it via Webflow’s Embed component, ensure it’s from a public and safe Pen, and define proper height/width attributes. Avoid full document embeds and check your browser console for helpful errors.