How to add a JavaScript file to HubSpot

Last updated: mai 31, 2018

Applies to:

Marketing Hub: Basic, Pro, Enterprise
In your design manager, you can host and edit JavaScript files. This article walks through adding a JavaScript file and linking it to a site, template, or page.

Navigate to the design manager

In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Marketing > Files and Templates > Design Tools.

Create a new coded file

Create a new file by clicking Actions > New file in the left sidebar menu (you may need to click the folder icon folder to expand the menu) or click Create a new file in the upper right-hand corner (this button appears if you don't have any tabs open in your design manager). 

In the dialog box, click JavaScript

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

New coded file

Edit the JavaScript file

Type or paste your JavaScript into the code editor. Click Publish changes to update your script and make your changes live.

Publish JS

Copy public URL

Once you have authored your JavaScript, copy the URL to reference in your script tag to load your file.  To get the URL, click Actions > Copy public URL in the left sidebar menu.

Get public URL

The URL is in the form of a HubL (HubSpot Markup Language) token that will render the URL path for your Javascript file. Every time you update the your script, the URL changes; therefore, using the HubL token to link your script will always load the latest version.  

Include script

After your have the HubL tag to generate the URL of your script, you can add it to the src attribute of your script tag.

While scripts can be added to your entire site or a single page, it is recommended that scripts are added to the <head> or a HTML module in the the global footer of your template. This ensures that you only load required scripts on pages using a certain template.

To access the head tag of a template layout, open the template in your design manager. In the right sidebar menu under the Edit tab, add the following to the Additional <head> markup field:

<script type="text/javascript" src="[copied public url here]"> </script>
HubSpot Help article screenshot

Alternatively, you can add the same code to a custom HTML module in your template's global footer. In your global footer, click the custom HTML footer module. In the right sidebar menu under the Edit tab, click Edit HubL source. Edit the code and then publish your changes.

HubSpot Help article screenshot

To include your file on all HubSpot-hosted pages, click your photo or avatar in the upper right-hand corner of your HubSpot account and click Settings. In the left sidebar menu, click Marketing > Web pages. Under the Page Templates tab, scroll down to the Site footer HTML section and paste the generated HubL token as the value for the script tag’s source, as seen below: 

<!-- start Main.js Do Not Remove -->
<script src='insert your generated token here'></script>
<!---End Main.js-->

Click Save

Using jQuery plugins and external scripts

Every layout or coded HubSpot template automatically includes jQuery 1.71 or 1.11x in the head tag of the page. Learn about selecting which version of jQuery to load here

Was this article helpful?

If you still need help you can get answers from the , or to contact support.

Previous article:

Next article: