How can I add this Codepen to my Webflow site?

TL;DR
  • Copy the iframe embed code from CodePen’s "Embed" option.  
  • In Webflow Designer, add an Embed element, paste the code, adjust styling as needed, then publish and test your site.

To add a CodePen project to your Webflow site, you need to embed it using an Embed element and the proper CodePen embed code.

​

1. Get the Embed Code from CodePen

​

  • Go to the CodePen page you want to embed.
  • Click the "Embed" button located at the bottom right or near the top-right menu.
  • Choose your preferred layout (Default, Dark Theme, etc.) in the embed settings.
  • Copy the full iframe embed code provided in the "HTML" section. Make sure it starts with <iframe.

​

2. Add an Embed Element in Webflow

​

  • Open your project in the Webflow Designer.
  • Drag an Embed element from the Add panel (press A key, then find "Embed").
  • Paste the iframe embed code from CodePen directly into the Embed field.
  • Click Save & Close.

​

3. Adjust Sizing and Positioning

​

  • Use standard Webflow styling tools to change the width and height of the embed element.
  • If the embed doesn’t fully show, try setting min height on the containing div or define a height directly within the iframe tag (e.g., height="500").

​

4. Publish and Test

​

  • Click Publish to push the changes to your live site.
  • Visit your live URL and verify that the CodePen works and appears as expected.

​

Summary

​

To embed a CodePen into Webflow, copy the iframe embed code from CodePen’s "Embed" option and paste it into a Webflow Embed element. Style and size it as needed, publish your site, and confirm it displays properly.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I hide certain pages in a Webflow template I purchased when publishing, without deleting them?
How can I remove autoplay from a video background in Webflow and play the video with a button click? The code I have tried doesn't seem to work.
How can I integrate my website page with my Twitter account using Webflow?
How can I make the content area in my Webflow layout expand to a height that pushes the footer to the bottom, even on screens with limited content?
How can I redirect my WordPress website to the non-www version after switching to Webflow?
How can I create nesting lists in Webflow?
How can I blur only the background image of a div block in Webflow without blurring the content inside it?
Why does the video element in Webflow show an "Invalid embed type: link" error when trying to set a public video URL from S3?
Is it possible to add a code block or preformatted text within a Rich Text element in Webflow? Currently, I only see options for text formatting, headings, and quotes. We're looking to include JSON code in code blocks instead of quote blocks. Please refer to the documentation page for more information.
How can custom elements of controls from a YouTube video be implemented in Webflow? Is there anyone who has experience doing this or can provide the HTML code for a video frame with identical controls to embed on a Webflow page?
How can I make my website wider in Webflow for larger monitors?
How can I create a Webflow site with half-scrolling sections, where the left side controls the scrolling of the right side and the right side cannot be scrolled until it reaches the top of the page?
How do I disable Horizontal Scroll on all pages in Webflow, for both desktop and mobile, in order to fix alignment issues on mobile? Additionally, how can I center the form in the footer for mobile in Webflow?
How can I combine the animated JS number counter with scroll animation on Webflow and ensure it only animates when the section is in view?
How can I enable event tracking for button clicks in Webflow using Google Analytics?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?