CodePen

A CodePen allows site visitors to view user-created HTML, CSS and JavaScript code. CodePen blocks can be added to most content pages. 

For more information on the block, visit CodePen in our Block library.

Embed CodePen

1. From the administration bar, select Workbench, and then select My Dashboard.

2. Select a content page (for example a Web page) from Content list or create a new page from Content types.

3. On the content page, select the Layout tab. 

4. Select + Add section, if applicable, then select + Add block.

5. Under External embeds, select CodePen.
   
   

   Open

   

6. Add Title. Select whether you want it to be displayed by checking/unchecking the Display Title box.

7. Enter the CodePen ID.

8. Enter the CodePen username with the CodePen ID.

9. Enter the Author's name for display. Anonymous pens cannot be embedded.

10. Enter the Title for display.

    Open

    

11. Select Default tab(s) to open from the drop-down menu. If the size of the block is too small (for example, if the block is part of a 4 column section), then only one tab will be displayed. If the CodePen does not support the selected tab, it will not be displayed.

12. Enter the CodePen embed height. The minimum height is 100 pixels. Ensure that the pixel height is large enough to accommodate the size of the CodePen.

13. Select Add block (Or Update if it’s a pre-existing CodePen Block).

14. Select state from the Change to: drop-down menu.

15. Select Save layout.