Creating Powerful Custom Modules in HubSpot

Over the past year, HubSpot has made huge strides towards improving the developer experience within the platform. In early 2018, they rolled out a new Design Manager that resolved many developer pain points via UI improvements and added functionality. They focused on four key areas of the Design Manager: file and folder management, better UX, speed and efficiency, and extensibility. The key improvements were made to the finder, editor, and inspector, along with an improved code editor and new module framework. All were well received among our team with an emphasis on the new custom module framework. So what’s this new custom module framework all about?

What are Custom Modules?

Custom Modules allow developers to create custom content types and give users the ability to easily add them to templates. Developers can control the type of content that each module has and define styles and rules for how that content is displayed. This ensures a consistent look and feel to those specific content types and allows them to be easily added. The custom module framework is composed of the finder, editor, and inspector. Let’s talk about the editor and inspector.

The Editor

The layout editor is now divided into three sections - HTML+HubL, CSS, and JS. Each section is resizable and collapsible/expandable, allowing custom editor layout. The CSS and JS sections are minified and injected into your header/footer respectively and loaded only once to improve your page. As part of the Design Manager update, you’ll also notice some improvements such as a new dark background to reduce eye strain, color-coded classes for easier troubleshooting, and readability and error checking to ensure your code is working properly.

The Inspector

The inspector pane within a custom module has four distinct sections - Fields, Linked Files, Filter Tags, and Template Usage. I’ll briefly go over each section.

Fields

This is the meat of custom modules. Here you can choose the type of content you want to display in your module. There are many new field additions with the Design Manager update. The available field options are divided into three sections and are as follows:

• Content
• Date
• Date and Time
• Number
• Rich Text
• Text
• Simple Menu
• Logic
• Boolean
• Choice
• Selectors
• Blog
• Color
• CTA
• Email Address
• File
• Follow-Up Email
• Form
• HubDB Table
• Icon
• Image
• Logo
• Menu
• Page
• Tag
• Workflow

Each field has unique content options associated with each. For more information, head on over to HubSpot’s official documentation on modules. There are also editor options, display conditions, and repeater options for each to ensure rock-solid modules and give you the ability to create truly robust custom modules.

One of the most glorious options for me was the repeater options. This allows for a developer to create a module that allows users to add or subtract content in a structured but very extensible manner. Keep reading to find out more.

Linked Files

This section allows developers to link CSS and JS files associated with the module. Both will be injected into the header and footer respectively and only loaded once to improve page speed and performance. You also have the ability to link other files from your file manager. This is useful when your module has custom image assets associated with it such as arrows or close buttons on an image gallery or modal.

Filter Tags

Filter tags help users find the module they’re looking for. A developer can attach filter tags for content types and their purpose. This can be helpful for your clients or your future self to keep modules from getting lost in messy portals.

Template Usage

Template usage is a quick and easy way to get a module snippet and copy/paste it into your custom-coded templates.

Creating a Custom Module

Alright, so that’s all cool. So let’s see this in action. In the video below I’ll show you how to create a testimonials module.

Pretty sweet, huh!? The possibilities for creating custom modules are endless.

Custom Module Examples

Here are some ideas of elements that are perfectly suited for custom modules.

• Hero Sections
• Accordions
• Testimonials
• Carousels
• Tabbed Content
• Image Sliders
• Image Galleries
• Team Bios
• Social Links
• Custom Buttons
• Pricing Tables
• And the list goes on...