topic Re: HubSpot Custom Module Starter Code Snippet in CMS Development

HubSpot Custom Module Starter Code Snippet

Jake_Lett — Sat, 29 Mar 2025 10:37:14 GMT

When I create custom modules, I often need similar code, and I found myself writing the same stuff over and over. So I created a little snippet I use to start a new module. I just copy and paste it into the HTML section of a custom module and make adjustments as needed.

I thought I would share it here as it might help other developers save some time. You can also find this on my HubSpot developer cheat sheet.

{# HubSpot uses different prefixes so this just gets the number module_######### widget_######### outputs just the number #} {% set instanceID = name[7:] %} {{ instanceID }} <div class="module-class" id="module{{instanceID}}"> <div class="row-fluid"> <div class="span6">A</div> <div class="span6">B</div> </div> </div> {% require_head %} {# optional - if you need to add something to the HEAD #} {% end_require_head %} {% require_css %} <style> {% scope_css %} {% end_scope_css %} </style> {% end_require_css %} {% require_js %} <script> document.addEventListener("DOMContentLoaded", function () { const moduleWrapper = document.querySelector("#module{{ instanceID }}"); }); window.addEventListener("load", (event) => { }); </script> {% end_require_js %}

Re: HubSpot Custom Module Starter Code Snippet

BérangèreL — Mon, 31 Mar 2025 08:00:06 GMT

Hi @Jake_Lett, I hope that you are well!

This is great, thanks so much for sharing this Custom Module Snippet that you created with the HubSpot Community!

This will be helpful for many Community Members, I am sure! ❤️

Have a lovely day!

Warmly,
Bérangère

Re: HubSpot Custom Module Starter Code Snippet

Anton — Mon, 31 Mar 2025 08:58:55 GMT

This is gold @Jake_Lett ! Thanks for sharing!

Re: HubSpot Custom Module Starter Code Snippet

albertsg — Mon, 31 Mar 2025 13:33:08 GMT

This is really cool, thank you for sharing it with the Community! 👏

Re: HubSpot Custom Module Starter Code Snippet

evaldas — Mon, 31 Mar 2025 16:30:31 GMT

Nice one @Jake_Lett !

Re: HubSpot Custom Module Starter Code Snippet

Indra — Tue, 08 Apr 2025 14:22:32 GMT

Hi @Jake_Lett,

Nice default. I have a few options that I use on my projects for different aspects.

Unique ID

If you only want a ID instead of module_ of widget_ you could also use {% name|md5 %} This will result in a value with only numbers. This will create a unique ID for the module.

Fixing scope_css or alternative

In your snippet, I see your using {% scope_css %}. This can be very usefull, but be aware that this only can be applied when you don't include no_wrapper=true to a embedded module. I use the no_wrapper=true a lot to minimize the html output of a page. An alternative for that is using css variable and set those options to the main element. In your default css you can setup default and overwrite it inside the inline styles for each module. This way you will minimize your css.

HTML

<div class="module" style="--text-color: #fff; --bg-color: #000;"> module </div>

CSS

.module{ color: var(--text-color, #fff); background-color: var(--bg-color, #000); }

Optimizing javascript

When I'm looking at the javascript, I use the module.js. If you use the module multiple times on your page you can optimize your code by making a loop out of your function. This way you will minimize your JS. This will also work if you are using repeaters inside a module.

Hopefully, this gives you a different perspective and some ideas on how it could be set up as well. Let me know what you think of it!

Re: HubSpot Custom Module Starter Code Snippet

Jake_Lett — Tue, 08 Apr 2025 14:32:59 GMT

@Indra Great suggestions and techniques. Thank you for sharing.