HubSpot Custom Module Starter Code Snippet

[Jake_Lett]

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 %}

[Jake_Lett]

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

[Indra · Accepted solution]

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.

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!

[evaldas]

Nice one @Jake_Lett !

[albertsg]

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

[Anton]

This is gold @Jake_Lett ! Thanks for sharing!

[BérangèreL]

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