# HubSpot Custom Module Starter Code Snippet

**URL:** <https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913>\
**Category:** CMS Development\
**Tags:** css, html\
**Created:** [March 29, 2025, 10:37am UTC](https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913 "2025-03-29T10:37:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [March 29, 2025, 10:37am UTC](https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913/1 "2025-03-29T10:37:14Z")

</div>

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](https://bootstrapcreative.com/resources/hubspot-hubl-docs-cheat-sheet/).

```lia-code-sample
 {#
 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 %}

```

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [March 31, 2025, 8:00am UTC](https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913/2 "2025-03-31T08:00:06Z")

</div>

Hi [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866), 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

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 31, 2025, 8:58am UTC](https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913/3 "2025-03-31T08:58:55Z")

</div>

This is gold [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866) ! Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![albertsg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/albertsg/32/99473_2.png) [@albertsg](https://community.hubspot.com/u/albertsg)\
**Post date:** [March 31, 2025, 1:33pm UTC](https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913/4 "2025-03-31T13:33:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![evaldas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/evaldas/32/69160_2.png) [@evaldas](https://community.hubspot.com/u/evaldas)\
**Post date:** [March 31, 2025, 4:30pm UTC](https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913/5 "2025-03-31T16:30:31Z")

</div>

Nice one [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866) !

---

<div class="post-metadata">

**Author:** ![Indra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/indra/32/98381_2.png) [@Indra](https://community.hubspot.com/u/Indra)\
**Post date:** [April 8, 2025, 2:22pm UTC](https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913/6 "2025-04-08T14:22:32Z")

</div>

Hi [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866),

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

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

```

CSS

```lia-code-sample
.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.

```lia-code-sample
document.addEventListener('DOMContentLoaded', function () {
 const modules = document.querySelectorAll('.module-name');
});

modules.forEach(function(modules, index){
 const button = module.querySelector('.button');
 if(button){
 button.addEventListener('click',function(e){
 e.preventDefault();
 console.log('clicked');
 });
 }
});

```

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!

---

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [April 8, 2025, 2:32pm UTC](https://community.hubspot.com/t/hubspot-custom-module-starter-code-snippet/128913/7 "2025-04-08T14:32:59Z")

</div>

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