How To Build High-Performing Modules on the HubSpot Template Marketplace

This article was authored by a member of the HubSpot developer community, David Roma.

HubSpot recently released new standalone modules on the HubSpot Template Marketplace, giving users the unique ability to extend a website's functionality while simultaneously making it easily manageable for end users – a perfect blend of power and simplicity.

Modules are the perfect opportunity for developers to showcase their expertise, foster connections, and generate leads. By contributing to HubSpot's Template Marketplace, developers can even open up new avenues for revenue generation.

This article shares best practices and guidance by a tenured HubSpot Solutions Partners. Read on to learn more.

Why Build Modules

Understanding the difference between HubSpot themes and custom modules is essential to harnessing the full capacity of the HubSpot platform. Themes, like our Generator theme, act as the fundamental framework for a website. They come with a variety of pre-configured modules and styling options, simplifying the process of creating compelling websites.

However, when it comes to offering a unique and personalized touch, custom modules become an irreplaceable resource. These modules provide additional functionality, allowing for intricate personalization and enhancement that goes beyond the capabilities of standard themes.

So, when might you need a custom module? Picture this: A user is in the midst of working with a theme and needs functionality that isn't available in the theme or HubSpot's default modules. It could be any kind of specialized functionality – from an interactive feature to a system integration. This is where custom modules come into play.

Modules empower users to deeply customize their HubSpot CMS website, from basic enhancements to complex solutions. For instance, our simple Animated Text module extends the functionality of HubSpot’s native Rich Text module, adding dynamic animation capabilities. Contrastingly, I've created complex solutions such as a Mortgage Payment Calculator, an Interactive Map, and even a module allowing document embedding with PandaDoc.

What sets custom modules apart is the ease of their integration into any website. Any HubSpot CMS customer can seamlessly incorporate these modules into a website using HubSpot's intuitive drag-and-drop tools – no coding required. The beauty of custom modules is the endless possibilities for creativity, allowing users to truly customize their website to fit their unique vision.

Best Practices for Building Modules

In creating modules for HubSpot, success hinges on understanding and applying these best practices. In this section, we'll dive into some of the fundamental principles for creating robust, efficient, and user-friendly modules.

Solve for the customer

As developers, we often approach problems with a developer's mindset. However, when crafting modules for CMS-driven websites, our primary user is typically a marketer or non-technical knowledge worker – not a developer. Not only should the module function impeccably, but the design should foster a simple and intuitive editing experience. By stepping into the shoes of our user, we can develop modules that seamlessly integrate into their workflow.

Drive clarity with context clues

Guiding users through module configuration is instrumental in delivering a high-quality user experience. Inline help text and tooltips can offer crucial instruction that ensure users navigate your module with ease and gain a comprehensive understanding of its functionality This will also boost overall usability and satisfaction.

Use default content as an educational tool

Often, our modules contain placeholder text. Instead of using generic (i.e. Lorem Ipsum), use this space to guide the user. This extra layer of guidance can significantly improve UX and your module’s effectiveness.

Follow HubSpot’s field organization guidelines

Whether you're developing a module for the marketplace, a client, or your own company, adhering to HubSpot’s Field Best Practices is crucial. These guidelines lead to a superior user experience.

Use modules categories and tags

Implementing a system of module categories and tags establishes organization and improves UX within the content editor. By grouping related modules together, you simplify the process of finding the right tools when building content on HubSpot. This practice caters to content creators by presenting an intuitive navigation system.

Optimize for page speed

When building modules on HubSpot, optimal page speed delivers a superior user experience, reduces bounce rates, and secures commendable search engine rankings.

It is crucial to load CSS and JavaScript dependencies at the module level instead of the theme level. Implementing this practice ensures that the additional code only loads when the module is in use on the page, thereby circumventing unnecessary data load and maintaining a streamlined site performance.

Also be sure to optimize default images and videos. Large and high-resolution multimedia elements can considerably impede page loading times, directly affecting user experience. It is advised to compress these assets, employ suitable dimensions, and apply next-generation formats (i.e. WebP) to enhance page loading speeds and overall site performance.

Embrace theme compatibility

HubSpot recently introduced new functionalities to ensure module compatibility with various themes. Adapting your module guarantees continued functionality and a positive user experience, regardless of theme.

Submit your module to HubSpot’s Template Marketplace

Publishing free modules on HubSpot's marketplace can be a highly effective lead generation tactic. Moreover, by offering paid modules, you can unlock new revenue streams. But remember, before you submit your module to the marketplace, it's important to maintain compliance with HubSpot’s Template Marketplace guidelines.

Get involved with the HubSpot developer community

Like any platform, developing on HubSpot comes with its nuances. Actively participating in the HubSpot developer community provides an unmatched opportunity to understand these intricacies. I highly recommend the following to grow your skills as a developer.

• Bookmarking HubSpot developer docs
• Joining the HubSpot developer Slack
• Participating in the HubSpot developer community forum
• Get tips from the HubSpot developer YouTube channel

Embracing the Power of Modules

New standalone modules represent an unparalleled opportunity, opening a world of possibilities for developers and marketers alike. Whether you're a seasoned HubSpot developer or new to the ecosystem, the tips and best practices shared in this article can guide you on the path to successfully building for the HubSpot Template Marketplace.

Here's to engineering innovative and powerful solutions that transform HubSpot websites! Leverage your skills, share your expertise, and shape the future of HubSpot together.