Create and add a JavaScript file to HubSpot

Create and add JavaScript files in the Design Manager to customize the functionality of your HubSpot-hosted content. Create a JavaScript file, attach it to a template, or add it across an entire domain or on individual pages.

For example, use a JavaScript file to add interactive elements, integrate third-party scripts, or customize page behavior beyond standard modules. 

Before you get started

Before working with JavaScript files, review the following requirements and considerations.

Understand limitations & considerations

• Publishing changes makes updates live immediately on associated templates or pages.
• Adding JavaScript at the domain level applies the script to all HubSpot-hosted pages on that domain.

Create a JavaScript file

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click the File dropdown menu and select New file.
3. In the dialog box, click the What would you like to build today? dropdown menu and select JavaScript. Then click Next.
4. In the File name field, enter a name for your JavaScript file.
5. To update the file's location, in the File location section, click Change and select the folder to add the file to.
6. Click Create. 
7. Enter your JavaScript into the code editor.
8. If you've enabled ESLint, view any JavaScript warnings or errors by toggling the Show output switch on.

9. When finished, click Publish changes in the top right.

Attach a JavaScript file to a drag and drop template

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click the template you want to update.
3. In the inspector on the right, click the Edit tab.
4. In the Linked JavaScript files section, click the Add dropdown menu and select your JavaScript file.
5. When finished, click Publish changes in the top right.

Attach a JavaScript file to a coded template

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click the template you want to update.
3. In the code editor, enter the require_js HubL function. Learn more about using the require_js HubL function.

Add a JavaScript file to HubSpot pages

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

Access a JavaScript file's public URL

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click the name of the JavaScript file. Then click the Actions dropdown menu and select Copy public URL.

Add a JavaScript file to all pages on a domain

1. In your HubSpot account, click the settings settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Content > Pages.
3. Click the Choose a domain to edit its settings dropdown menu and select the domain to add the JavaScript file to. To apply the JavaScript file to all connected domains, select Default settings for all domains.
   
4. In the Site footer HTML section, paste the public URL as the value for the script tag’s source: 

<!-- start example.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End example.js-->

5. When finished, click Save on the bottom left.

Add a JavaScript file to an individual page

Please note: advanced settings are not available in starter templates.

1. Navigate to your content:
   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of your page.
3. In the content editor, click the Settings menu and select Advanced.
4. In the Footer HTML section of the dialog box, paste the public URL as the value for the script tag's source:

<!-- start example.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End example.js-->

5. When finished, click Publish or Update in the top right.