Design Manager

Add a JavaScript file to HubSpot

Last updated: October 13, 2020

In Beta

Applies to:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

In your design manager, you can host and edit JavaScript files. Learn how to create a JavaScript file and linking it to a template or domain.


Create a JavaScript file

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the left sidebar menu, click Actions > New file. You may need to click the folder icon folder to expand the menu. 

new-file

  • In the dialog box, click JavaScript

  • In the next dialog box, enter a name for your JavaScript file and click Create.

  • Type or paste your JavaScript into the code editor. 
  • If you've enabled ESLint, you can see any JavaScript warnings or errors by clicking to toggle the Show output switch on.

    design-manager-coded-file-show-output
  • In the upper right, click Publish changes to take your changes live.

Attach your JavaScript file to your template

  • In the finder, click the template you want to update.
  • In the inspector, click the Edit tab.
  • In the Linked JavaScript files section, click the Add dropdown menu and select your JavaScript file.

attach-javascript-file

  • In the upper right, click Publish changes to take your changes live.

Include your JavaScript file on your HubSpot pages

You can include your JavaScript file on all the pages of a HubSpot-hosted domain, or on individual pages by using the public URL.

To get the file's public URL:

  • In the left sidebar menu, select your JavaScript file.
  • Click Actions > Copy public URL.

Then, to add the file to all your HubSpot pages on a domain:
  • In your HubSpot account, click the settings icon settings in the main navigation bar.
  • In the left sidebar menu, navigate to Website > Pages.
  • Click the Modifying dropdown menu and select the domain to add the JavaScript file to.
  • In the Site footer HTML section, paste the public URL as the value for the script tag’s source: 
<!-- start Main.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End Main.js-->
  • Click Save

Or, to add the file to an individual page:

  • In your HubSpot account, navigate to Marketing Website > Website Pages or Landing Pages.
  • Hover over the page that you want to edit, then click Edit.
  • In the page editor, click the Settings tab.
  • Click Advanced options.
  • In the Footer HTML section, paste the public URL as the as the value for the script tag's source:
<!-- start Main.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End Main.js-->
  • To publish your changes to the live page, in the upper-right, click Update.