Webflow sync, pageviews & more.
NEW

How can I add this Codepen to my Webflow site?

TL;DR
  • Copy the embed code from CodePen.
  • Paste it into a Webflow Embed element and publish the site to view it live.

To embed a CodePen into your Webflow site, you'll need to extract the embed code from CodePen and insert it into an Embed element in Webflow.

1. Copy the Embed Code from CodePen

  • Open the CodePen you want to embed.
  • Click the “Embed” button below the Pen or in the top-right navigation bar.
  • Choose your embed style (default, dark style, etc.).
  • Click “Copy Embed Code.”
  • The embed code usually includes a <iframe> tag, or a script if you're embedding a live preview.

2. Add an Embed Component in Webflow

  • In Webflow Designer, drag an “Embed” element from the Add panel (under Components) into the desired section or container.
  • In the Embed settings, paste the CodePen embed code directly into the code editor.
  • Click “Save & Close.”

3. Publish Your Site to See the Embed

  • Webflow’s Designer does not render external embeds like CodePen in the preview.
  • Click “Publish” to your staging domain to test the live embed.
  • Go to your published site URL and confirm the CodePen is loading properly.

4. Optional: Adjust Embed Size or Responsiveness

  • If the embed code uses fixed width/height values, replace them with responsive CSS styles using Webflow classes or inline CSS (width: 100%; height: auto;).
  • Alternatively, you can wrap the Embed element inside a responsive div block and style it for different screen sizes.

Summary

To add a CodePen to Webflow, simply copy the CodePen embed code and paste it into a Webflow Embed element. Then publish your site to test it live.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I purchase an account plan and site plan on Webflow without using a credit card or PayPal? I am based in Vienna, Austria and would like to use my bank account or PayPal as a payment option.
How do I resolve the issue of custom code not taking effect when added to the header or footer of my Webflow site?
How can I add a "Print Page" button to my website using Webflow and custom CSS to make the content print-friendly?
Why doesn't my background video display properly in the Webflow designer with the correct height?
How can I set up Canonical tags in Webflow to indicate republished articles while also ensuring Google knows the correct canonical URL for my site, considering multiple custom domains connected to Webflow?
Can Webflow connect to an external data source and use that data as if it was an internal collection, or is the only option to use the API to manually push data into Webflow?
Has anyone successfully used Webflow and Shopify together to run an e-commerce store? If so, can you provide any feedback on this process?
How can I style the second, third, and fourth slides after the currently active slide in the Webflow Slider using CSS or JavaScript?
How can I get Webflow to allow access to the API and stop blocking the cross-origin response with MIME type application/json?
Will Webflow Ecommerce allow the addition of form fields and customization of checkbox default status in the checkout form, or is this a permanent limitation?
How can I fix the issue where a pop up appears every time I go to the home page after changing the trigger to load in Webflow?
How can I enable the auto play function in the Splide slider on my Webflow site?
Why does the Page Section anchor link in my Webflow site not go to the proper spot when I first enter the site?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I ensure that the div in my Webflow website is positioned relative to the bottom of the page instead of the bottom of the screen?
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 dynamically redirect to a CMS created after form submission in Webflow?
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!
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?