The CodePen external embed Block allows site visitors to view user-created HTML, CSS and JavaScript code.
Embed information
Elements to consider when adding a CodePen external embed Block:
Click to load
All CodePen embeds will use "click-to-load" when displayed, meaning content in this embed must click the "Run Pen" option in the CodePen Block to view the content.
Anonymous pens
CodePen does not allow embedding anonymous pens. Users will have to create an account on CodePen to save and embed pens.
CodePen embed height
The minimum height (in pixels) for a CodePen Block is 100. When selecting a height, always ensure the pixel height is large enough to accommodate the size of the CodePen.
CodePen ID
When obtaining and entering the CodePen ID, always ensure all letters in the code are lowercase.
If the ID is entered wrong, the following 404 error message will be displayed in the CodePen Block:
"I'm afraid you've found a page that doesn't exist on CodePen. That can happen when you follow a link to something that has since been deleted. Or the link was incorrect to begin with. Sorry about that. We've logged the error for review, in case it's our fault."