# Add an External Javascript File to a Module?

**URL:** <https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062>\
**Category:** CMS Development\
**Tags:** javascript\
**Created:** [April 15, 2020, 6:08am UTC](https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062 "2020-04-15T06:08:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![amcintosh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/amcintosh/32/32338_2.png) [@amcintosh](https://community.hubspot.com/u/amcintosh)\
**Post date:** [April 15, 2020, 6:08am UTC](https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062/1 "2020-04-15T06:08:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![psdtohubspot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/psdtohubspot/32/70262_2.png) [@psdtohubspot](https://community.hubspot.com/u/psdtohubspot)\
**Post date:** [April 15, 2020, 8:24am UTC](https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062/2 "2020-04-15T08:24:42Z")

</div>

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

> **[Create and edit modules in the design manager](https://knowledge.hubspot.com/design-manager/create-and-edit-modules)**
>
> Learn how to create and customize modules in HubSpot's Design Manager to enhance your blog, pages, or emails.

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

 ![Slick Slider.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/0dae1077117e232b7017d4339c9223912252b69c.png)

Add please use Repeater Option to add more Slider Item

> **[Module and theme fields - HubSpot docs](https://developers.hubspot.com/docs/cms/reference/fields/module-theme-fields)**
>
> HubSpot has many different field types, you can use to add flexibility and customization to your themes and modules.

 ![repeater option.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/c/8c44e6f509654cb9963617de6b3333754e0ebf29.png)

Please let me know this solve your issue or not 🙂  
Thanks!  
Ajit

---

<div class="post-metadata">

**Author:** ![amcintosh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/amcintosh/32/32338_2.png) [@amcintosh](https://community.hubspot.com/u/amcintosh)\
**Post date:** [March 11, 2021, 6:07am UTC](https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062/3 "2021-03-11T06:07:47Z")

</div>

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](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)

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [March 11, 2021, 3:27pm UTC](https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062/4 "2021-03-11T15:27:06Z")

</div>

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

```lia-code-sample
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

```lia-code-sample
<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.

---

<div class="post-metadata">

**Author:** ![jmclaren](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jmclaren/32/38449_2.png) [@jmclaren](https://community.hubspot.com/u/jmclaren)\
**Post date:** [March 12, 2021, 4:19pm UTC](https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062/5 "2021-03-12T16:19:05Z")

</div>

You can actually load the file by [using the require\_js function in your module.html](https://developers.hubspot.com/docs/cms/building-blocks/modules/files#require-js)

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.

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [March 15, 2021, 10:59am UTC](https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062/6 "2021-03-15T10:59:45Z")

</div>

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

![39479i6E5E4A6AE0E794DD.gif](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/c/bc67e2a56f75dc3bf19c70e4505f43ad6e1e02d9.gif)

---

<div class="post-metadata">

**Author:** ![amcintosh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/amcintosh/32/32338_2.png) [@amcintosh](https://community.hubspot.com/u/amcintosh)\
**Post date:** [March 22, 2021, 10:03pm UTC](https://community.hubspot.com/t/add-an-external-javascript-file-to-a-module/20062/7 "2021-03-22T22:03:45Z")

</div>

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

Thanks so much for the answer, @jmclaren !