Your Blog Post Title Here...

Posted by


Introduction to Scripting

Javascript, is a language that is used to make interactivity with web pages.
Originally developed in 1995 byFile-Adobe-Dreamweaver-JavaScript-icon Brendan Eich, Javascript was one of the first interactive browser web languages. Javascript changed the way that developers, designers and users would interact with web pages. Over the years Javascript has evolved into lots of different libraries on of the most popular is JQuery. 

Javascript allows you to feature dynamic “Scripts” that can perform a wide variety of tasks in your browser. Almost all sliders, testimonial rotators, photo galleries and pretty much any interactive interface you see on the web was probably built with Javascript or one of its’ libraries. IT goes without saying that for there to be interactivity on your HubSpot COS site, you need to be using Javascript.  


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.

edit_head

From here HubSpot will open am odal window seen in the image below.

scripts_in_header

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.

custom_html_scripting

Scripts in the Footer

In the edit page view you can click on the “Options tab” and where we could declare a header script we can also declare a script in the footer. This is useful for those who prefer to load the scripts at the end of the document or if your script requires specificity in its’ Javascript calls this is the place to do that.

footer_section_html

How to Code your Scripts

So, now that we know where we can put our scripts we need to know how to implement them. This processes a little more complicated and technical. It requires knowledge of HTML markup, and Javascript.  Let’s go over the ways to code your script into your Hubspot COS site.  You should always refer to the technical documentation for your library of choice on implementation.  

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

Template Builder

So in the Design Center under the template Builder we can add CSS files and Javascript files to our site. While this is covered in the Hubspot COS Developer certification process we’re going to investigate it a little bit more in depth and see what’s really going on.

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.   

Template_Designer_JS

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

hubl_markup

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 .

Rich Html

Here’s where we can insert our call to a plug in or our own executable Javascript. We simply open a rich HTML file and begin to implement our tags. I’d recommend entering it in the template layout ( this way you can see and modify your code under the edit page or if you are creating templates for those unfamiliar with Javascript, this protects your code.

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

custom_html_scripting-1

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? 

Next Steps

Brush up on your knowledge of Javascript! Learn a new Javascript library!  Go find some neat plugins. Write your own scripts. There’s countless of things you can do with Javascript to help you improve your site.  What errors have you come across that you were unable to solve? Please feel free to join the discussion by commenting below.  

Topics: Web

RR_NewWebsite_HP_V4-COS-FIN-1.png

Six Symptoms of a Sick Website

And Your Prescription to a Better Website

Your website is the heart of your organization's digital body,
neglecting it can cause as much damage to your company as
neglecting your heart can cause to your actual body.

FIND OUT MORE