Turning a CodePen Project Into a HubSpot Module
What Is CodePen?
Why Use CodePen?
CodePen is a playground for coders and developers that enjoy pushing the boundaries of web development. The best thing about this playground is its social element. CodePens can be shared, copied, altered, and improved by anyone that wishes to do so.
CodePen can also house frequently used groups of code. At Hypha HubSpot Development, we create client signatures in CodePen with easy instructions for team members about implementation and making adjustments.
That being said, the creations in CodePen are open source and can be utilized on any site, anywhere. Luckily for HubSpot users, you can take the code from CodePen and transfer it right into the HubSpot Design Manager to feature and use on your site.
1. Copy the Code: transferring code from CodePen to HubSpot is very straightforward. You can start by simply copying the it from one panel in CodePen and pasting it into the associated panel in the HubSpot Design Manager.
- HTML > HTML + HubL
- CSS > CSS
- JS > JS
2. Check for Libraries & External Files: once the code is copied over, you’ll want to check for any external stylesheets, libraries or scripts included in the CodePen. The most common library you’ll see attached here is jQuery. You’ll want to make sure any files referenced in the CodePen settings are referenced in your HubSpot module (shown below).
3. Check Your Module: To test your new HubSpot module, you can click on the “Preview” button in the upper right of the HubSpot Design Manager (shown below). This opens up a live preview window of your module and how it functions and looks. Your module should be almost identical to the CodePen you referenced.
Unfortunately, sometimes you run into problems during this process. Below is a list of things to try in order to troubleshoot your module when it doesn’t perform as expected.
1. Double-check external files: I know, I know, you already did this, but it’s ALWAYS worth a double-check. Make sure you’ve reviewed each panel for any external files you may have missed. Also, double-check the preprocessor settings for each panel (HTML, CSS and JS).
3. Ask for help: Ask someone else, anyone else, to take a look at your module. Getting a fresh pair of eyes on your code can never hurt. Have you ever looked at a word you use all the time and think, “Is that how it’s spelled?” Sometimes you’re staring at your code for so long you start to miss things you never thought you would.
Build Your First HubL Custom Module
Below are some CodePens we've created or altered from other users. From the simple to the complex, these examples demonstrate CodePen’s ability to elevate HubSpot custom modules.
Actions on Scroll
Interactive Alexa Demo