Embedded Pens – CodePen

Jump to Docs Navigation

You can embed Pens on your website with our copy-and-paste Embed code. To get the code, click the “Embed” button in the footer of the Editor on any Pen.

This will open the Embed Builder.

the CodePen embed builder displaying an example embed.

The Embed Builder helps you customize your embed. You can:

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.

Choose your embed theme: We have two built-in themes: Light and Dark. Every CodePen member also gets a customizable, personal “Default” theme. PRO members get unlimited embed themes.

Make the preview “Click-to-Load”: Slide the toggle next to “use click-to-load” to “On” 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 gray bar at the bottom of the embed preview 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’s HTML and your embed will appear.

The Embed Code

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="Mamboleoo" data-slug-hash="XWJPxpZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Walkers - How to">
  <span>See the Pen <a href="https://codepen.io/Mamboleoo/pen/XWJPxpZ">
  Walkers - How to</a> by Louis Hoebregts (<a href="https://codepen.io/Mamboleoo">@Mamboleoo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

The embed code uses JavaScript to replace the HTML element with the class name “codepen” with an iframe of 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 JavaScript. If you absolutely can’t use JavaScript — but you can use an <iframe> — you can iframe the embed URL itself. Change /pen/ in your Pen’s URL to /embed/. For example:

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

If you use the HTML embed code, there is a callback function that you can use to run code after the embeds have been added to the page. A callback function:

__CodePenIFrameAddedToPage

with call when the embeds have been added, so overriding it, like:

function __CodePenIFrameAddedToPage() {
  console.log("do extra things here");
}

… is how you can hook into it.

Embed Themes

All embeds have a theme, which controls the style of the CodePen header, tabs, and other style details on your embed. We have two built-in themes: Light and Dark. Every CodePen member also gets a customizable, personal default theme. PRO members can create unlimited embed themes, and have access to a few extra-special theme customization options.

When you change one of your embed themes, all of the Pens that use that theme will be updated at the same time. For example, if you redesign your website, you can update your CodePen embed theme to match it. All of your embedded Pens will update with your new theme immediately.

Example

Here’s an example of a Embedded Pen with a custom theme:

The Embed Theme Builder

You can get to the Embed Theme Builder from your user menu in the header:

This is the Embed Theme Builder, which can be used to customize the look and feel of your embedded Pens. All controls are on the left, ranging from animations, to colors, to border appearances. PRO users can also customize the tab bar’s visibility, add custom CSS, and make as many themes as you want (everyone gets one customizable default theme for free).

Remember, changes to your embed themes will apply directly to all the Pens that use the theme, including any Pens you embedded before changing the theme.

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 how 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, also takes “100%” if you want your iframe to expand to its container.
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 <iframe> of embed
data-custom-css-url	http://cpdn.io/url.css
data-preview	true	none
data-zoom	0.5	1	Can be 1, 0.5, or 0.25

Delayed Embeds

If you want to dynamically add a CodePen embed to the DOM after it’s loaded or create your own “Click to Run” functionality, you can call window.__CPEmbed() to trigger the embed script to rerun. By default, window.__CPEmbed() looks for elements with the .codepen class, just like when it runs on load, but if you provide a selector as the first argument, window.__CPEmbed('.my-class'), it will only run embeds on elements matching that selector.

For a “Click to Run” button, set up your embeds as you normally would, only don’t use the class name codepen on the wrapping <div>. Instead, use any other selector you can target like codepen-later.

Then on whatever action you choose (could be something like a click, or a scroll into view event, some kind of timeout, or whatever you can think of), you call our global API to convert them into embeds. Here’s an example of a button click to load them:

<div class="codepen-later" data-user="ellebt" data-slug-hash="QYdRLx">
  <!-- You may include other Embed attributes, but `data-user` and `data-slug-hash` are required -->
  <button class="enhance-me">See example</button>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

document.querySelector('.enhance-me').addEventListener('click', e => {
  // you could also `fetch` the ei.js script in here.

  // The API for looking for and creating embeds
  window.__CPEmbed(".codepen-later");
});

Troubleshooting Embeds

Embed Doesn’t Load

If an embed fails to load, you’ll see text with a link to the Pen instead. There are a couple of reasons why this can happen.

CMS restrictions: some CMS’s don’t allow 3rd party JavaScript, iframes, or other elements of a CodePen embed. For example, you can’t use the iframe or HTML embed code in a Medium post. If your CMS supports oEmbed, you can embed you Pen by pasting a link to the Pen into your page. Read more about oEmbed.

Preview vs. Published in a CMS: Some CMS’s do allow embeds, but won’t expand the embed in a “preview” version of your page (for example, an unpublished draft). In that case, your embed will be visible once your post or page is published.

Incomplete copy of the code: There’s a script element at the bottom of the embed code that’s required for the embed to run. If that’s missing or blocked you’ll see the placeholder text instead.

Embeds and HTTPS

Embeds work on HTTPS sites, but keep in mind that if your embedded Pen includes any assets loaded over HTTP, it can cause mixed-content warnings on your HTTPS site. You don’t need to worry about this if you use CodePen PRO hosted assets — they’re HTTPS by default!

Mobile Rendering

Embeds on mobile devices generally work fine. The side-by-side code and results layout works at a minimum width of 600px. At smaller widths, the embed will show either your chosen code tab, or the result if you’ve toggled the code tabs off.

iOS Quirks

We’ve seen an issue on iOS, where the iframe renders far too wide and the text appears much larger. This happens on Pens with very long lines of code. Unfortunately, you can’t force the width of the <iframe> back to a normal width with something like iframe { width: 100%; }, and having it sit in a container you know to be of correct normal width. Quirk of WebKit, we suppose. You can fix it by forcing a non-percentage width on the iframe. You might want to try doing that in a media query in the CSS of the page you are embedding onto, like:

@media (max-width: 400px) {
  iframe[src*="codepen.io"] {
    width: 320px !important;
  }
}

Making Embedded Pens Resizeable

Here’s a way to do it.

Was this article helpful?

YesNo