How to add a Javascript file to HubSpot

Last updated: December 5, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise
Design Manager not only allows you to write HTML and CSS, but also allows you to host and edit JavaScript files. In this tutorial, we will add a JavaScript file and link it to our site, template, or page.

Instructions

Follow these instructions to author JavaScript within Design Manager's code editor.

Navigate to Design Manager

To create a JavaScript file, navigate to Design Manager (Content > Design Manager).

Navigate to Design Manager

Create a new coded file

Select the Code Files folder and click New coded file.

New coded file

Choose Code Editor and Page.

Name and save file with .js extension

You must name your file with a .js file extension. You may also want to add a new folder to keep all of your JavaScript files organized.

Name JS

Edit the JavaScript file

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

Publish JS

Get public URL

Once you have authored your JavaScript, you need to get the URL to reference in your script tag to load your file.  To get the URL, click Actions > Get public URL.

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.  

Click Copy to copy the URL.

Public URL tag

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, click Edit > Edit Head.

Add the following to the Additional HTML Head Markup for this Layout box:

<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. 

HubSpot Help article screenshot

Using jQuery plugins and external scripts on the COS

Below is some additional information about using jQuery plugins and external scripts on the COS.

jQuery is included in every COS page

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

Select jQuery version

Previous article:

Next article: