HubSpot Custom Module Boilerplate Code Snippet


HubSpot Custom Module Boilerplate Code Snippet

Below is a some boilerplate code to use when creating a custom module inside HubSpot CMS.

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


Written by: Jake Lett
Jake Lett is a results-driven B2B marketing consultant with 15+ years of experience helping businesses boost online visibility, generate qualified leads, and increase sales. Specializing in SEO, HubSpot, and PPC campaign management, Jake leverages proven strategies to deliver measurable growth. As a Certified Google Ads Specialist and HubSpot Developer, he is committed to driving impactful results for his clients.

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter