You can embed Pens on other websites with our copy-and-paste Embed code. To get the code, click the "Embed" button in the footer of the Editor on any Pen. Or, select "Embed Pen" from the export menu.
The Embed Builder helps you customize your embed. You can:
Choose your embed theme: We have two built-in themes: Light and Dark. Every CodePen also gets a customizable, personal default theme. PRO members get unlimited embed themes.
Choose which tabs to display: the embed builder will start out with your result tab and one of your code tabs selected. You can choose a different code tab, turn off the code tabs entirely to maximize the result, or hide the result and maximize a code tab.
Make the preview "Click-to-Load": Check the checkbox next to "use click-to-load" to enable the preview version for your embedded Pen. Preview embeds show a static image preview of your Pen with a "Run Pen" button. When your visitors click the button, the Pen will load.
Make the embed editable: PRO members can make their embeds editable, just like the editor on CodePen. You can read more about how editable embeds work in our PRO Embeds documentation.
Set the embed height: Drag the bar at the bottom of the embed to change its height. The Copy & Paste code will update with the new height.
After you've finished customizing the embed code, copy the code from the "Copy & Paste Code" box below the embed preview. Paste the code into your website and your embed will appear.
Documentation: Embedded Pens