How to Add a JavaScript File in Hubspot CMS

Managing JavaScript in Hubspot is essential when you build custom modules, templates, or themes. This guide explains step by step how to upload, attach, and manage JavaScript files in your design tools so you can control site behavior without breaking your front-end code.

Understanding JavaScript Management in Hubspot

Before adding any file, it helps to know where JavaScript lives and how it loads within your Hubspot assets. JavaScript can be linked to:

• Theme or coded templates
• Individual modules
• Page-level head or footer settings

Using the design manager keeps your JavaScript organized and improves maintainability of your Hubspot projects.

Access the Hubspot Design Manager

All JavaScript file management starts in the design manager interface.

1. Log in to your account.
2. Navigate to Marketing > Files and Templates > Design Tools (or Design Manager, depending on your navigation).

The design manager is where you create and store theme assets, including JavaScript, CSS, and templates for your Hubspot website and landing pages.

Create or Upload a JavaScript File in Hubspot

You can either write a new JavaScript file directly in the code editor or upload an existing one.

Create a New JavaScript File

1. In the design manager, click the File menu or use the folder tree sidebar.
2. Select New file.
3. Choose JavaScript as the file type.
4. Select the folder where the file should live in your Hubspot theme or custom coded directory.
5. Give the file a clear name, such as main.js or menu-toggle.js.
6. Click Create to open the file in the code editor.

You can now write or paste your JavaScript logic directly in the editor and save it to the Hubspot file system.

Upload an Existing JavaScript File

1. In the left sidebar, right-click the folder where you want to store the file.
2. Click Upload files.
3. Select your .js file from your computer.
4. Confirm the upload to add it to your Hubspot design assets.

Once uploaded, the file will appear in the design manager tree. You can open it to view or edit the contents within the Hubspot interface.

Attach JavaScript to Hubspot Templates

After creating or uploading the file, you need to attach it to the appropriate coded or theme template so it loads on the right pages.

Add JavaScript to a Coded Template

1. Locate your template in the design manager and open it in the code editor.
2. In the HTML + HubL layout, add a reference to your JavaScript file using a script tag in the appropriate place, usually before the closing </body> tag.
3. Use the file path generated by the design manager so Hubspot can correctly reference the asset.
4. Save your template changes.

Placing JavaScript at the bottom of the template helps avoid blocking rendering and improves performance for Hubspot-hosted pages.

Use the Template Inspector to Attach Files

Some templates allow you to manage attached assets through a settings panel instead of editing HTML directly.

1. Open the template in the design manager.
2. Click the Settings or Inspector tab in the right sidebar.
3. Look for sections labeled Linked files or Attached JavaScript.
4. Add your JavaScript file from the list of available assets in your Hubspot design tools.
5. Save the template.

This method keeps your markup clean and makes it easier to reuse scripts across multiple Hubspot templates.

Attach JavaScript to Hubspot Modules

Custom modules sometimes need their own JavaScript to handle interactivity or data formatting.

1. In the design manager, open the module where you need behavior.
2. Switch to the module editor and look for the JS or JavaScript section.
3. Either paste inline JavaScript or link to a separate Hubspot JavaScript file from your asset tree.
4. Save and publish the module.

Module-level JavaScript runs only when that module is used on a template or page, keeping your Hubspot codebase modular and performant.

Add JavaScript per Page Using Hubspot Settings

You can also inject JavaScript at the page level when you do not want to modify templates.

1. Open a page in the page editor.
2. Click Settings, then find the Advanced options or Additional code area.
3. Paste your JavaScript inside the designated head or footer fields.
4. Update or publish the page.

This method is useful for page-specific tracking scripts, A/B testing snippets, or other one-off code that should not be applied globally across your Hubspot content.

Best Practices for JavaScript in Hubspot

• Keep files organized: Use clear folders for theme-level and module-level scripts.
• Minimize global scripts: Only attach JavaScript where needed to improve Hubspot page speed.
• Test in a staging environment: Create test templates or staging pages before applying changes to live content.
• Use browser dev tools: Check for console errors after each deployment from your Hubspot design manager.

Following these practices will help you maintain a clean front-end structure and prevent conflicts between different JavaScript files across your Hubspot site.

Official Hubspot Reference and Further Help

For complete, up-to-date instructions, always review the official documentation. You can find the original guide on how to add a JavaScript file to your account at this Hubspot knowledge base article.

If you need strategic implementation support, theme development, or advanced tracking setup across your Hubspot portal, you can also consult specialists at Consultevo for tailored technical assistance.

By following these steps, you can confidently manage JavaScript within the Hubspot design manager, attach files to templates and modules, and keep your pages optimized for performance and maintainability.

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

“`