Add a Codepen to Bricks Builder with External JS (Bricks 101 Part 29)

Learn how to add a Codepen to Bricks Builder that includes external JavaScript (JS). Codepen is a popular platform where developers can showcase and discover front-end code snippets. This tutorial will guide you through the process of integrating a Codepen into your Bricks Builder website, with a particular focus on handling external JS.

Steps to Add a Codepen to Bricks Builder

1. Locate the Codepen you want to add to your website
   For this tutorial, we are using a Codepen that includes HTML, CSS, and JavaScript, along with an external JS library.
   
2. Add a Code Widget to your Bricks page
   In Bricks Builder, navigate to your elements and select the Code Widget. Drag and drop it into the desired container on your page.
   
3. Copy the HTML from the Codepen
   Go back to your Codepen and copy all the HTML code.
   
4. Paste the HTML into the Code Widget
   In Bricks Builder, paste the copied HTML into the Code Widget. Click on “Execute Code” to render the HTML on your page.
   
5. Add the CSS from the Codepen
   Copy the CSS from the Codepen. In the Code Widget, type <style></style> at the bottom of the HTML code. Paste the CSS code between these tags.
   
6. Add the JavaScript from the Codepen
   Copy the JavaScript from the Codepen. In the Code Widget, type <script></script> at the bottom of the code (below the CSS). Paste the JavaScript code between these tags.
   
7. Add the external JS library
   In the Codepen, locate the external JS library in the JS section. Copy the URL of the library. In the Code Widget, find the closing </body> tag in the HTML code. Above this tag, type <script src=""></script>. Paste the URL of the JS library between the quotes in the src attribute.
   
8. Save and view your page
   Click “Save” in Bricks Builder and view your live page to see the Codepen in action.

When should you Add a Codepen to Bricks Builder

Adding a Codepen to your Bricks Builder website can be beneficial in several scenarios. For instance, if you find a Codepen that includes a unique navigation menu, an interactive animation, or a dynamic form, you can integrate it into your site to enhance its functionality and user experience. Codepen is a treasure trove of creative front-end ideas, and integrating these into your site can help it stand out.

Common Issues

1. Codepen not displaying correctly
   Ensure that you have correctly copied and pasted the HTML, CSS, and JavaScript from the Codepen into the Code Widget in Bricks Builder. Also, make sure to click “Execute Code” after pasting each type of code.
2. Animations or movements not working
   This is likely due to the external JS library not being properly added. Make sure to add the <script src=""></script> tag with the URL of the library above the closing </body> tag in the HTML code.