Webflow sync, pageviews & more.
NEW

How can I resolve the issue with Webflow displaying a blank page when trying to insert code from CodePen?

TL;DR
  • Use Webflow's Embed component with only the iframe embed code from CodePen, not full HTML documents.
  • Ensure all linked assets use HTTPS, check for X-Frame-Options headers that may block embedding, and manually recreate the Pen in Webflow if needed.

A blank page appearing when embedding CodePen content in Webflow is usually caused by incorrect embedding methods, unsupported scripts, or cross-origin restrictions.

1. Use the Embed Component Properly

  • Drag in an Embed element from the Add panel (press A, then select Embed under Components).
  • Copy the correct embed code from CodePen:
  • Click "Embed" under the CodePen's share options.
  • Use the iframe embed code, not the full page's HTML document.
  • Paste only the iframe portion (should start with <iframe ... and end with </iframe>).

2. Avoid Using Full Page HTML from CodePen

  • Do not paste full HTML documents (i.e., <html>, <head>, or <body> tags) into Webflow’s Embed element.
  • Webflow only accepts valid inline HTML or scripts that can run within its environment. Full-page HTML will be ignored or break rendering.

3. Check for Mixed Content and Script Issues

  • If your CodePen contains external scripts or assets from non-HTTPS sources, they may be blocked in Webflow’s secure (HTTPS) environment.
  • Make sure all referenced resources (CSS, JS, images) use HTTPS URLs.

4. Confirm Outbound Visibility of the iFrame

  • Some CodePens may use X-Frame-Options headers that disallow embedding in external sites like Webflow.
  • If this is the case, the iframe will render a blank space. To test:
  • Open your CodePen normally.
  • Use browser dev tools → Network tab → look for the x-frame-options response header.
  • If you see SAMEORIGIN or DENY, the Pen won’t embed in Webflow.

5. Test with a Different Embed

  • Use a known working CodePen embed from their official examples or community showcase.
  • If that renders correctly, the issue is likely specific to the Pen you're trying to embed.

6. Consider Using Published Code

  • If iframe fails, copy and paste the actual HTML, CSS, and JavaScript into Webflow manually:
  • HTML into a Webflow Embed block.
  • CSS into Page Settings > Inside <style> tag or use Webflow's Designer.
  • JavaScript into Page Settings > Inside <body> tag section.

Summary

To avoid a blank screen, always embed CodePen content using the iframe embed code, ensure the Pen is embeddable (no X-Frame restrictions), and triple-check that all resources are loaded over HTTPS only. If embeddability is blocked, recreate the Pen’s code directly within Webflow.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make a transparent overlay sit above a background image in Webflow?
What are the best practices for embedding autoplaying and looping videos without controls or sound on a Webflow site? I want to achieve a gif-like video experience without sacrificing quality, similar to the videos found on specific websites. I've tried using the HTML embed widget in Webflow and following certain instructions, but I still encounter overlays and letterboxing. Are there any other services that freelance web developers can use for passive videos in their projects? Additionally, I'd like to understand the use cases and limitations of the "background video" and "video" widgets in Webflow. Are there any tutorials or posts that I may have missed during my research on this topic? Thank you.
How can I integrate Google Analytics into my Webflow website and track specific button clicks using the event tracking feature?
Can Webflow integrate with a hotel booking calendar plugin or use custom codes for that purpose?
Is there a native app or plugin available in Webflow for embedding Instagram feeds above the footer of a website, without having to rely on third-party tools?
Is it possible to set the viewport in Webflow's code to address the mobile usability issue flagged by Google Search Console? Is this warning something I should be concerned about? Thank you!
How can I create two dropdown selectors in Webflow for a form, one for 'Location' and one for a hidden email response dropdown for Zapier and CRM integration?
Is there a Webflow desktop application available for website creation instead of using the website itself?
How can I set up user signups and access to a CMS collection page in Webflow? There is a troubleshooting loom video provided for reference.
How can I make the dropdown menu in my Webflow site 100VW without it stretching off the screen? I've tried changing it from absolute positioning, but it became misaligned. Is there a simpler solution?
Is it possible to assign images to each column in a master spreadsheet on my existing website using Webflow without the need for third-party hosting like Google Drive?
Is there a Webflow Slack channel available for Partners, Freelancers, and Agencies to join?
How can I add confetti to my Webflow site using CodePen and CSS?
What could be causing the error when submitting a form in Webflow?
How can I fix the white flickering background repeat load issues on my website in the Chrome browser using Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?
Is there a way to auto-scroll the page in Webflow after a certain amount of time, without the script automatically scrolling back up if the user has already scrolled past the designated point?
How can I close a dropdown in Webflow when clicking on a link?