Add a JavaScript file to HubSpot
Last updated: October 13, 2020
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.
- 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.
- 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.
- 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.
- 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.
Related content
-
Create and edit modules
In the design manager tool, you can create custom coded modules to add advanced features to your blog, pages,...
Knowledge Base -
Personalize your content
With personalization tokens, you can show personalized content to your contacts based on their property...
Knowledge Base -
Build a custom coded template
In your design manager tool, designers can build templates with HTML from scratch. For Marketing Hub ...
Knowledge Base