I’ve been working with HubSpot and need to figure out how to include custom modules within my coded templates. I’ve searched everywhere but can’t seem to find clear instructions on whether this is actually supported.
What I’m calling a custom module: Basically any reusable HTML component. For this example, let’s say I made a simple greeting component called “Welcome Message”:
<div>Welcome to our site</div>
My coded template setup: Here’s what my template structure looks like:
<!DOCTYPE html>
<html>
<head>
<title>{{ content.html_title }}</title>
{{ standard_header_includes }}
</head>
<body>
<!-- Need to insert my custom module somewhere around here -->
{{ standard_footer_includes }}
</body>
</html>
Does anyone know if there’s a method to integrate custom modules into coded templates like this? Any help would be great!
the hardest part isn’t coding - it’s fixing it when things go wrong. hubspot’s error messages are terrible, so i test every module separately before adding to a template. pro tip: caching can be a pain. your changes might not show even after you clear it.
Custom modules work great in coded templates, but here’s another option depending on what you need. For simple stuff like welcome messages, skip the full custom module and just use HubL variables or macros right in your template. I usually define basic HTML components as HubL macros at the top of my template file when they don’t need field configuration. Everything stays in one place and you don’t have to mess with Design Manager. But if content creators need to edit it or you want to reuse it across templates, go with the proper custom module route like others mentioned. Module tags give you way more flexibility for complex components with configurable fields.
Had this exact problem last year building custom templates for our marketing team. alexj’s module syntax is right, but they missed a key step - you’ve got to create the custom module in Design Manager before you can reference it in your template. Go to Design Manager, create a new custom module, build your Welcome Message component with that HTML, then save it. After that, you can embed it using the module tag with the exact module name. Here’s the gotcha: the module name has to match exactly what you saved it as - spaces, special characters, everything. I wasted hours debugging a template once because I had a typo in the module reference.
You’re struggling to manage custom modules across multiple HubSpot templates, leading to inconsistencies and difficulties in maintaining your website’s components. Manually creating and updating modules in Design Manager and referencing them in templates becomes unwieldy as the number of modules and templates grows. This results in wasted time, potential errors (like typos in module names), and difficulty tracking which templates use which modules.
Understanding the “Why” (The Root Cause):
The manual approach to managing custom modules in HubSpot is inherently inefficient at scale. Manually creating, updating, and referencing modules introduces multiple points of potential error, increasing the likelihood of inconsistencies and broken components across your templates. The lack of a centralized system for managing module versions and deployments makes it difficult to maintain a consistent and up-to-date website.
Step-by-Step Guide:
Automate Module Management with a Third-Party Service: Implement an automated workflow to manage your entire custom module pipeline. Use a service like Latenode (or a similar solution) to streamline the process. This involves connecting the service to your HubSpot account and configuring it to monitor a designated component library for changes.
Establish a Component Library: Organize your custom modules into a well-structured repository, separate from your HubSpot templates. This ensures that your components are version-controlled and easily accessible for deployment.
Configure Automated Deployment: Configure the third-party service to automatically create or update custom modules within HubSpot Design Manager whenever changes are detected in your component library. This automation eliminates manual uploads and the risk of typos in module names.
Sync with Templates: Simultaneously, configure the service to automatically update the appropriate templates, replacing outdated module instances with the newest versions.
Testing and Monitoring: Continuously test and monitor the deployed modules to catch errors and ensure compatibility across templates.
Common Pitfalls & What to Check Next:
API Key and Permissions: Ensure your chosen service has the correct API keys and sufficient permissions to interact with your HubSpot account.
Component Structure: Maintain a consistent naming convention and structure for your custom modules to simplify automation.
Error Handling: Implement proper error handling within the automated workflow to gracefully manage failures (such as API connection errors or deployment issues).
HubSpot API Limits: Be mindful of HubSpot’s API rate limits and adjust the update frequency accordingly. Implement strategies (such as batching updates) to manage API usage effectively. Consult HubSpot’s API documentation for guidelines.
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!
Been developing HubSpot templates for enterprise clients for three years. The module syntax works fine, but here’s what trips up most developers - context switching between Design Manager and your template editor.
Custom modules in Design Manager get their own CSS and JavaScript scope. This doesn’t always play nice with your template’s existing styles. Found out the hard way when client modules started breaking page layouts because of conflicting CSS selectors.
Now I create a staging template first. Test how each custom module behaves with the template’s CSS framework before going live. Also - custom modules add extra HTTP requests. If you’re using multiple small components like that Welcome Message example, consolidate them into fewer, bigger modules. Way better for performance.
Understanding the “Why” (The Root Cause):
Step-by-Step Guide:
Common Pitfalls & What to Check Next:
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!