Introduction to Scripting
Places to Add Scripts
HubSpot’s Template Builder has many different places where a HubSpot developer can put in their scripts of choice. We can declare our script in the header using traditional syntax or HubSpot’s markup language (HubL.) The most common recommendation is to add your script calls (how a browser knows where to find your script files) in the header of your site. This would include any libraries hosted on an external network (Google’s CDN, Microsoft’s CDN, or anywhere else your file is being hosted).
You can add scripts to the header or footer. In recent times, many have begun to show a preference for scripts to be loaded in the page footer to save on load speeds. If the script call is on your header, it will be considered a "render-blocking" resource, and your page will likely show a delay until the script has fully loaded.
There’s yet another option, which is not always recommended, but has grown in use due to the ever increasing fight for faster load speeds. This option is to add in a “custom HTML module” to your template and then drop your script in there. I would recommend this option if you were looking at having your script be used as a global module to be used elsewhere in the site, or if you are creating marketplace templates where you have no control over the template settings.
Scripts in the Header or Footer (Entire Site)
Earlier in the article, I recommended we declare “live” scripts in the header section of your site. This can be done in Settings under "Website" in a link called "Pages."
From here HubSpot will show a modal window for the header and another below it for the footer as seen in the image below.
Scripts in the Header or Footer (Single Page Only)
Scripts in Additional Markup Blocks
We can use the custom HTML blocks in the template of any page and add our scripts in the "Additional markup before </body>" block, within the template layout view. Here we implement our script by declaring the type before it. Then simply insert our script. This is good if we want to add some functionality and keep the HTML / CSS / JS in one module.
Here is where you can find the this section:
- Locate the inspector on the right-hand side of the design tools of your specific template
- Scroll down as far as it will go
- Click "Expand" to show the entire modal window for your code
How to Code your Scripts
HubSpot gives you the option of using either jQuery 1.7.x or 1.11.x as your default library. This means any script running anything higher than jQuery 1.7 or 1.11, will require you to make a call to one of the higher libraries. (I’m particularly a fan of Google’s hosted libraries but you should always use a backup).
Here you can change the name of your file to whatever you like. I’d recommend keeping it the original name as you found if you are running a plugin. You can also choose where to save the file. You can create your own folders per project, or if you prefer in a generic JS folder. The files will automatically be saved with the appropriate extension of “.js”.
Once we’ve deployed our code, and saved it in the appropriate folder, it’s important we know the actual location of the file. From here we’ll go to "Actions" > "Copy public URL." Here an alert window will pop up letting you know the URL has been copied to your clipboard. Once you paste from your clipboard you will see that the file path is found using HubL markup language with a reference to the file
yourpath/yourscript.js is used to illustrate the folder structure of any custom coded file).
We can use this markup language in the header under the template view, or in the header and footer in the page edit view. This markup will call our script and load it into the page. We really should be putting our script files in the design center so we can call to them from anywhere on the site as well as ease of maintainability of the script (only one place to update the file versus lots of inline scripting).
Another newer way that was added to the Design Tool V2 is using the inspector right-hand sidebar in any page or blog template. This can be found directly above the "Additional markup before </body>" block.
Trouble Shooting Scripts
So have you implemented a script and had it not work? This can be the most troublesome part of script implementation.
Make sure to use the tools in the web developer toolkit that comes standard in most browsers. Is the page loading your custom hosted script? Are you getting a 403?
Check the console to see where there are errors. Go back and check your code. Missing brackets? Missing Semicolons? Logic Errors? Incorrectly spelled variable names or functions?
This post was originally published on 5/24/2014 and has been updated & re-published for freshness and accuracy.