You can embed Pens on other sites through our provided copy-and-paste Embed code. To get the code, click the Embed This Pen button you'll find in the footer of the Editor on any Pen.

embed-this-pen

This will open the Embed Builder. Here you can see a preview of what the Embedded Pen will look like on your site, customize it, and get the embed code. The embed code is in the upper right corner.

embed-builder-popup

All Embedded Pens have a theme. Even if you don't chose one, it will use the default theme. You can update your default theme (all users get one theme for free) or leave it as-is. The controls along the left are for controlling and updating that theme. The advantage to using a theme is that all Embedded Pens using that theme can be updated visually all together. If you need more than one theme, our PRO plan offers unlimited Embed Themes.

The Embed Code

Here's an example of what the embed code looks like. It is HTML:

<p data-height="268" data-theme-id="0" data-slug-hash="ClnAe" data-user="afkatja" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/ClnAe'>ClnAe</a> by Katja Hollar (<a href='http://codepen.io/afkatja'>@afkatja</a>) on <a href='http://codepen.io'>CodePen</a></p>

The embed code uses JavaScript to replace the HTML element with the class name "codepen" with an iframe with the actual embed. We do it this way so that it is semantic, accessible, progressively-enhanced, and syndication-friendly (i.e. there will be usable links/information in RSS feeds). We also apply the theme and do some design-y stuff via the JavaScript. If you absolutely can't use JavaScript but you can use an iframe, you are free to iframe the embed URL itself. It has /embed/ in place of /pen/ in the URL. For example:

http://codepen.io/chriscoyier/embed/gfdDu

Example

Here's an example customized Embedded Pen:

See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen

Video Tutorial

Here's a five minute video tutorial on theming Embedded Pens:

The Embed Builder

Under the main menu, there is a link to the Embed Builder:

main-menu-embed-builder

This is the "Full Page" embed builder, which presents a list of all the Pens you own on the left to choose from. This can be helpful if you are embedding several Pens at a time and don't want to bounce around to different pages to do it.

full-page-embed-builder

Override Attributes

You'll notice in the HTML embed code, there are

data-* attributes (e.g. data-theme-id="178"). These attributes control which Pen is embedded and how it looks and behaves. These attributes have the power to override anything set in the theme itself. Much like inline styles override styles set in CSS. Here's a list of all the available attribute overrides:

Attribute Example Value Default Notes
data-theme-id 319 0
data-slug-hash gfdDu n/a Required
data-user chriscoyier n/a Not required
data-default-tab html result html/css/js/result
data-height 250 300 Not a part of themes
data-show-tab-bar true true true/false, PRO only
data-animations run run run/stop-after-5
data-border none none none/thin/thick
data-border-color #000000 #000000 Hex Color Code
data-tab-bar-color #3d3d3e #3d3d3e Hex Color Code
data-tab-link-color #76daff #76daff Hex Color Code
data-active-tab-color #cccccc #cccccc Hex Color Code
data-active-link-color #000000 #000000 Hex Color Code
data-link-logo-color #ffffff #ffffff Hex Color Code
data-class my-special-class Added to `