Introduction to Scripting
Places to put 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. A good recommendation to makes cross domain calls or live call’s in the header of your site. This would include any libraries hosted on external network ( Google’s CDN, Microsoft’s CDN or anywhere else your file is being hosted live).
You can also declare it in the options menu on your landing page. You can add scripts to the header or footer. Some scripts prefer you load the last scripts be loaded in the page footer to save on page load speeds.
There’s yet another option, which is not generally recommended, unless under certain circumstances. This option would mean that a Hubspot developer would add in a “custom html module” and you can 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.
Scripts in the Header
Earlier in the article I recommended we declare “live” scripts in the header section of your site. This can be done under on the template view.
From here HubSpot will open am odal window seen in the image below.
Scripts in HTML Blocks
We can add blank html blocks and add our scripts in the html block, with in the template layout view or in the page edit 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.
Scripts in the Footer
How to Code your Scripts
Hubspot comes with JQuery 1.7 as a default library. This means any script running anything higher than JQuery 1.7, will require you to make a call to one of the higher libraries. (I’m particularly a fan of Google’s hosted library but you should always use a backup).
We need to make sure we save our files with the appropriate extension “.js”. Here you can change the name of your file to whatever you like. I’d recommend keeping it the original if you are running a plug in. You can also choose where to save the file. You can create your own folders per project. I prefer to stick mine in a generic JS folder.
Once we’ve deployed our code, saved it to file in the appropriate folder it’s important we know the actual location of the file. From here we’ll go to Actions > get public url. Here a modal window will pop up with the HUBL markup language with a reference to the file “ ”. (I just put “yourpath/yourscript.js”, 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).
Note: We will not be able to call across domains to the script. If we run two sites in Hubspot, www.robotfuture123xyz.com and www.freethekittens.com , say we have scripts on each of those sites. So if you have a script at www.robotfuture123xyz.com/js/mysuperawesomescript.js , you cannot call “mysuperawesomescript.js” by inserting the HUBL markup in the header of www.freethekittens.com .
It is important that your script tag is lowercase. This is case sensitive in Hubspot , your script tags, should look like <script>My code here </script>.
When you enter any function or reference to Jquery , Hubspot will use colored code hinting on your scripts. This is a way to tell that you’ve implemented the script correctly.
Trouble Shooting Scripts
So have you implemented a script and had it not work ? This come be the most troublesome part of script development.
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?