Skip to content
Design Manager

Add a JavaScript file to HubSpot

Last updated: August 4, 2021

Applies to:

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

You can host and edit JavaScript files in the design manager. Learn how to create a JavaScript file and link 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 File > New file. You may need to click the folder folder icon to expand the menu. 
  • In the dialog box, click the What would you like to build today? dropdown menu and select JavaScript.

design-manager-new-file-javascript
  • Click Next.
  • In the File name field, enter a name for your JavaScript file. 
  • To update the file's location, in the File location section, click Change and select the folder to add the file to.

design-manager-new-javascript-file

  • 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-javascript-show-output
  • In the upper right, click Publish changes to take your changes live.

Attach a JavaScript file to a template

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

 

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

Include a JavaScript file on 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 access the file's public URL:

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

design-manager-add-javascript-file

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 Choose a domain to edit its settings dropdown menu and select the domain to add the JavaScript file to. You can select Default settings for all domains if you want the JavaScript file to apply to all connected domains. 
  • 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 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.