How can I add this Codepen to my Webflow site?

To add a Codepen to your Webflow site, you can follow these steps:

Step 1: Copy the Codepen embed code
Go to Codepen and find the pen you want to embed on your Webflow site. Look for the "Share" or "Embed" button, which usually appears with the pen's options. Click on it and copy the provided embed code.

Step 2: Open Webflow Designer
Log in to your Webflow account and open your project in the Webflow Designer.

Step 3: Add an Embed element
On the Webflow Designer canvas, navigate to the page where you want to insert the Codepen, or create a new page. Drag and drop an Embed element onto the canvas where you want the Codepen to appear.

Step 4: Paste the Codepen embed code
Double-click on the Embed element to open the Embed settings panel. In the panel, you'll see a code editor where you can input custom code. Paste the Codepen embed code that you copied in Step 1 into the code editor.

Step 5: Adjust the embed settings (optional)
In the Embed settings panel, you can configure some settings related to the Codepen embed. For example, you can choose the size of the embed, whether to show or hide the Codepen title and details, and more. Adjust these settings according to your preferences.

Step 6: Preview and publish
Switch to preview mode in the Webflow Designer to see how the Codepen looks on your site. Make any necessary adjustments to the placement or styling of the Codepen by modifying your Webflow site's layout or CSS styles.

Finally, publish your Webflow site to make the Codepen embed live and accessible on the internet.

That's it! Now you should have successfully added the Codepen to your Webflow site. Visitors to your Webflow site will be able to interact with the embedded pen directly on the page.