What is it?
Developers, admins, or HubSpot solutions partners are now able to build custom, interactive, and data-rich elements that can be embedded directly into quote templates, or individual quotes.
Check out the high-level overview here, or read more below.
These custom elements enable admins to add custom-coded sections to quotes, replace existing sections (ex. customizing how the Line Items table renders products/services/totals), or even build the entire quote template from scratch using their custom elements.
These elements (HubSpot CMS React modules) are extremely flexible. They can...
- - Access data inside the CRM (ex. a module could be used to swap Terms and Conditions language based on Company properties like "Type")
- - Access data outside the CRM (ex. pulling in architectural drawings from an external database)
- - Capture information on the quote and push it to the CRM (ex. capturing onboarding or billing info during the quote acceptance.
- - Even provide user interfaces to quote-creators allowing them to provide inputs while building quotes (ex. a user selects which payment schedule option they want to offer on for a given quote, which renders different schedules and kicks off invoice creation post-quote acceptance.)
The possibilities are endless.
Why does it matter?
More flexibility and control for admins using CPQ
Quotes already allow admins to drag-and-drop rich text content sections that they can customize with text, images, videos, bulleted lists, etc. Those rich text sections can even have their source-code modified for deeper customization.
However, the HubSpot Quotes are more than just documents. They're buyer-accessible web pages. To access their full potential, many users need go beyond rich text customization to tailor the appearance, content, and logic of quotes to meet specific business requirements that cannot be met with standard templates and modules.
Whether you are large enterprise or a small team, this update gives you the flexibility to have full brand control and the flexibility to streamline operations using the quote as a platform.
AI-generated code has reduced barrier to entry
While this capability would be game-changing at any time, the availability of AI-coding agents like Claude Code, Codex, Cursor, or Gemini Assist) has made it easy for anyone to create code.
Read more below about how to get started (including how to use AI agents to get started).
How does it work?
Quick start guide
If you're using an AI agent to get started, create a folder on your computer to work out of and download the documentation and sample project below to include as context. Then, use the agent to draft a module spec (ex. "magical_module.md") that the agent can implement. Review the spec before you ask the agent to build anything to make sure the module will work as you expect.
- Create module(s): Build your custom module. Review this high-level overview offers potential use-cases and links to all critical sub-documentation including...
- Deep-dive documentation on creating custom CMS React modules that can be added to quotes.
- Example project on Github that you (or a coding agent) can use for reference
- Watch a demo from our lead engineer, Josh, explaining how to build and deploy custom modules to your team.
- Add custom module to template: Once the module is created in HubSpot, you will see it available in the "+" button of the left hand side of the UI when creating quote templates or quotes (screenshot below). Grab it from the left sidebar and drag it into the template either above, below, or next-to existing sections. You can also hide other modules as needed (ex. hiding Parties, Line Items, default content sections, etc.)
3. Build quotes: If a module is added to a quote template, any quotes created from that template will contain the module. Or, quote creators can drag and drop the module from the "+" button as needed. If you have added module fields for quote creators to interact with when using the module, they will appear in the left sidebar when the module has been clicked-on in the editor.
Related features on the roadmap
We always welcome feedback. If you have suggestions on how to make the experience of building customized quotes, please contact ekopit@hubspot.com.
That said, there are several additional features underway that we expect to hear demand for given this rollout and are already underway or planned.
- - Quote Template Governance: Right now, quote creators can edit or hide any module on the quote (including custom ones). We are working on a feature that would give admins the ability to "lock" modules from being hidden or edited. We plan to offer this capability in Q2/Q3.
- - Optional Line Items: A common reason to create a custom module is to upsell potential customers on "optional" add-ons, or allow them to choose between different options. This capability is also in development. We plan to offer this capability in Q3.
- - Line Item Table sections: Another common reason to custom-code a Line Items module is to add sections (ex. grouping by "hardware" or "services"). We plan to offer this capability in Q3.
- - More out-of-the-box modules: While AI has made custom-coding dramatically easier, many folks would still prefer more no-code customization options, similar to HubSpot Email or Web Pages. We plan to offer even more out of the box modules (ex. embedded forms, page breaks, testimonial carousels) in the coming quarters.
Who gets it?
Commerce Hub Professional, Commerce Hub Enterprise