How to Create Translations of Your Modules in Hubspot

Building multilingual websites in Hubspot requires more than just translated pages. To provide a consistent experience across languages, you also need to translate your custom modules so that labels, help text, and default values appear correctly for every visitor.

This step-by-step guide explains how to create translatable modules, manage translation keys, and configure language variants so your content is easy to maintain at scale.

Understanding Hubspot Module Translation Basics

When you build custom modules in the design manager, you can mark certain fields as translatable and then map them to translation keys. These keys connect your module fields to a JSON-based translation file so each language can load its own copy of the texts.

The overall workflow is:

• Define translation keys inside your module.
• Store translations in JSON objects per language.
• Load the correct translation object based on the page language.
• Render the translated strings in your module templates.

The official Hubspot documentation for this process can be found on the module translation help page.

Preparing a Custom Module in Hubspot

Before you add translations, you need a custom module that uses fields such as text, rich text, or choice fields. Only these fields can be connected to translation keys.

Supported Translatable Fields in Hubspot Modules

The following field types are typically used when translating a module:

• Text and textarea fields for headings or labels.
• Rich text fields for formatted marketing copy.
• Choice fields for dropdowns or radio options.
• Help text or instructional content tied to any of the above.

System-generated labels, such as the module name in the design manager, are not translated through this mechanism. Instead, focus on user-facing text that will appear in page content.

Creating Translation Keys in Hubspot

To make a module translatable, you map each user-visible field to a translation key. This key is the bridge between your module and the JSON translation object you will use later.

Step-by-Step: Add Translation Keys

1. Open your custom module in the Hubspot design manager.

2. Select a field that contains visible text, such as a text or rich text field.

3. In the field options, look for the translation settings or translation key configuration.

4. Assign a clear, descriptive key, for example: hero.heading or form.submit_label.

5. Repeat this process for every field you want to translate.

Use a consistent naming convention across modules. Group keys by module or page section so you can maintain them easily.

Building JSON Translation Maps for Hubspot Modules

Once your keys are defined, you need translation maps. These are JSON objects that pair each key with a string in a given language.

Structure of a Translation JSON Object

A simple JSON translation object might look like this:

{
  "hero.heading": "Welcome to our site",
  "hero.subheading": "We help you grow",
  "form.submit_label": "Send message"
}

For another language, you use the same keys but different values. For example, a translation map in another language would assign localized strings to the same keys.

Where to Store Translation Maps in Hubspot

Depending on your implementation, you can:

• Store JSON objects as module fields (for advanced modules).
• Use theme fields or global partials.
• Reference JSON files through the design manager’s coded files.

The key point is that each page or theme language should have an accessible translation object that the module can read at render time.

Connecting Language Variants to Hubspot Modules

Hubspot supports language variants for pages, which lets you create localized copies of your site. To keep modules in sync with those variants, you must ensure that each page language loads the correct translation object.

Aligning Page Language and Module Language

In a typical setup:

1. You create a primary page in your default language.

2. You create language variants for each additional locale.

3. In your module, you check the page language or language context variable.

4. Based on that language, you select the appropriate JSON translation object.

5. Each translatable field uses its key to pull the correct text for that language.

This keeps your module structure identical across languages while the displayed strings change based on the variant.

Rendering Translation Strings in Hubspot Templates

Inside your module’s HTML and HubL markup, you use the translation object and keys to show localized strings.

Example Rendering Pattern

Although the exact syntax depends on your implementation, the general pattern is:

• Select the translation object for the current language.
• Reference the key associated with the field.
• Provide a fallback string in case the key is missing.

This pattern ensures visitors always see readable content, even if a translation is still in progress.

Managing and Updating Hubspot Module Translations

As your site grows, you will add new modules, fields, and languages. A clear maintenance process avoids inconsistencies.

Best Practices for Sustainable Translation Management

• Centralize keys: Keep a shared list of all translation keys used in your Hubspot modules.
• Use consistent naming: Prefix keys by module or feature (for example, pricing., blog.).
• Document changes: When you add or remove fields, update your JSON translation maps right away.
• Review variants: After changes, test every language variant to confirm all keys resolve correctly.

These habits reduce the risk of missing translations and keep your multilingual experience clean.

Testing Your Translated Modules in Hubspot

Before publishing, fully test your localized pages and modules.

Quality Checks Across Languages

• Open each language variant and confirm all module text is translated.
• Look for hard-coded strings that should use translation keys instead.
• Verify that default values and help text appear in the correct language.
• Check module layouts to ensure different string lengths do not break design.

If you spot missing strings, update the relevant translation map and republish the page.

When to Use an Expert for Hubspot Localization

Complex sites with many custom modules, themes, and languages may need a structured localization strategy that goes beyond basic setup. An experienced implementation partner can help you design translation schemas, automate updates, and integrate external translation workflows.

For strategic multilingual architecture, custom development, and technical SEO support, you can work with a specialist agency like Consultevo, which focuses on scalable digital implementations.

Next Steps for Better Multilingual Experiences in Hubspot

To recap, translating custom modules in Hubspot involves:

• Identifying user-facing fields that require localization.
• Assigning clear translation keys inside each module.
• Creating and maintaining JSON translation maps per language.
• Connecting page language variants to the correct translation objects.
• Rendering strings in module templates based on keys and language context.

By following this structured process, your multilingual website will be easier to manage, more consistent, and better aligned with visitor expectations across all regions.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`