How can I add this Codepen to my Webflow site?

To add a CodePen to your Webflow site, you need to embed the CodePen’s output using an embed code. Webflow allows HTML embeds via its Embed element or page settings.

1. Get the CodePen Embed Code

• Go to the CodePen page you want to embed.
• Click the “Embed” button under the Pen window (usually on the bottom-right).
• In the modal, choose your theme and size preferences.
• Copy the provided iframe-based embed code (it will look like <iframe ...></iframe>).

2. Add an Embed Element in Webflow

• Open your Webflow project.
• In the Designer, drag an Embed element from the Add panel (under Components) onto your page where you want the CodePen to appear.
• Paste the copied CodePen iframe code into the Embed field.
• Click Save & Close to insert.

3. Publish and Test

• Publish your site to your Webflow staging domain or custom domain.
• Visit the page to check that the CodePen renders correctly.
• Make sure the content is not being blocked — browser restrictions or insecure embeds (HTTP vs HTTPS) might prevent loading.

4. Alternative: Use the Pen’s Output Code

If you want deeper integration with your design (rather than embedding a full iframe), you can manually copy the HTML, CSS, and JS from the Pen and place it in your Webflow project:

• Add HTML code using a Webflow Embed component.
• Add custom CSS via the Page Settings → Custom Code (in the <style> tags).
• Add JavaScript in the same area at the Footer or Before section.

Be sure any external libraries (like jQuery or anime.js) used by the CodePen are also included in your Webflow Page Settings → Custom Code.

Summary

To embed a CodePen in Webflow, copy the Pen’s iframe embed code and paste it into a Webflow Embed component. Alternatively, recreate the Pen manually using its source code and place it within Webflow’s HTML, CSS, and JS areas.