How to embed CodePen

Content maintainers can embed CodePen within different content types (web page, news, event, blog post, person profile, etc.).

Note: Due to size restrictions and usability reasons, CodePen can only be embedded in the body/content area.

Embedding CodePen

1. From the Administration bar, click My Workbench.
2. Select Create/Manage Content tab.
3. Select the content type (e.g., Web Page) in which CodePen is to be embedded, and add a new page (e.g., Add web page).
4. Place the cursor where the CodePen should be embedded.
5. From the toolbar, select the CodePen button.
   
6. A CodePen Embed Properties box will appear.
   
7. Provide the CodePen ID.
   To find CodePen ID: Navigate to the CodePen you want to embed. From the URL path, copy the portion of the URL following /pen/
   Example URL: https://codepen.io/wcms/pen/qgxdrj
   CodePen ID: qgxdri
8. Provide the CodePen username and Author name for display. Create a Title for Display.
   Note: These will display if JavaScript is disabled.
9. From the Default tab(s) to open drop-down, select which CodePen tab(s) you would like to display.
   
   Note: At narrow page widths, CodePen will only open one tab regardless of the selection. If an option that is not present in the CodePen is selected, that option will not display.
10. Provide a CodePen embed height (in pixels). CodePen embed heights must be a minimum of 100 pixels.
    Note: Pixel height should cover the full height of your CodePen. If too small, the Codepen will not display properly.
    
11. Select Ok and Save.
12. Publish.
    Users will need to select Run Pen view the CodePen.