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

About the Author

Jacob Lett is the founder of Bootstrap Creative, a digital marketing consultancy that helps Michigan manufacturers generate qualified leads through HubSpot, technical SEO, and Google Ads. With over a decade of hands-on experience, he acts as a direct partner for B2B companies seeking measurable ROI from their marketing investment.



Related posts

Tags: ,

| Read My Editorial Policy

Want to Get Email Updates of New Articles?

Join My Email Newsletter