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.
- From the Administration bar, click My Workbench.
- Select Create/Manage Content tab.
- 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).
- Place the cursor where the CodePen should be embedded.
- From the toolbar, select the CodePen button.
- A CodePen Embed Properties box will appear.
- 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
- Provide the CodePen username and Author name for display. Create a Title for Display.
- 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.
- 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.
- Select Ok and Save.
Users will need to select Run Pen view the CodePen.