Add an External Javascript File to a Module?

SOLVE
amcintosh
Participant

I'd like to build a module that uses some externally-hosted javascript (Slickslider, for example).

 

It'd be neat if there were a way to do this without adding the Javascript to the page template - that way, the client could just drag-and-drop the module in, and it would automagically work. Is there a recommended method for doing this?

 

Thanks!

Amanda

0 Upvotes
1 Accepted solution

Accepted Solutions
jmclaren
Solution
HubSpot Employee

You can actually load the file by using the require_js function in your module.html

The file will then only be loaded when the module is actually used on the page. It will also only ever load once, regardless of how many module instances are on the page and how many other modules may call the library. Additionally if you only need it if say certain fields in your module are turned on, you can include that require statement in an if statement, and conditionally load the library.

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

View solution in original post

6 Replies 6
psdtohubspot
Key Advisor

Hi @amcintosh 
You can do it in a very simple way as we served to our many Happy Clients.
Happy to help you also 🙂  

Please create a custom module follow these steps
https://knowledge.hubspot.com/cos-general/create-and-edit-modules

And then add you all javascript file to the side of custom module see attached screenshot for reference
Slick Slider.png

Add please use Repeater Option to add more Slider Item
https://designers.hubspot.com/docs/building-blocks/module-theme-fields#repeaters
repeater option.png

Please let me know this solve your issue or not 🙂 


Thanks!
Ajit

 

amcintosh
Participant

Hey Ajit!

 

Thanks for the answer, but I was talking about external files served by a CDN (for example, https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js) - if you would rather use a file hosted by an outside source, it'd be nice to have a built-in way to include a link in a module, without having multiple instances of the module on a page include the link multiple times (as would happen if you just throw a <script> tag in there) 

0 Upvotes
piersg
Key Advisor

@amcintosh if this module is only ever going to use that one external script you could do it with JS like this

let executed = false;
function addScriptOnce() {
  if(executed) {
    return;
  } 
  executed = true;
  var s = document.createElement('script');
  s.src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js';
  var x = document.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);
}
addScriptOnce();

 

Or if you wanted the src to be a variable you could do it in the HubL like this

<script>
let executed = false;
function addScriptOnce() {
  if(executed) {
    return;
  } 
  executed = true;
  var s = document.createElement('script');
  s.src=`{{module.external_script_url}}`;
  var x = document.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);
}
addScriptOnce();
</script>

 

I don't know of a way to get a count of how many times a module has been used inside a module sadly.

0 Upvotes
jmclaren
Solution
HubSpot Employee

You can actually load the file by using the require_js function in your module.html

The file will then only be loaded when the module is actually used on the page. It will also only ever load once, regardless of how many module instances are on the page and how many other modules may call the library. Additionally if you only need it if say certain fields in your module are turned on, you can include that require statement in an if statement, and conditionally load the library.

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

View solution in original post

piersg
Key Advisor

@jmclaren This is waaay better than what I said, I completely forgot about the require_js function.

giphy

amcintosh
Participant

Me too! I feel like a dope for not thinking of that, haha.

 

Thanks so much for the answer, @jmclaren !