Where should I write custom Javascript or CSS files for my COS pages?

HubSpot Product Team

To create a custom Javascript or CSS file in HubSpot, follow the instructions below:

 

  • Navigate to Content > Design Manager.
  • Click New Template > choose the Code Editor option > click Create.

new-template-code-editor-create.png

  • Give the new file a name that includes the appropriate extension file type (.js for scripts / .css for css files / .html for standard html files etc.), select a location, and click Save.

save-js-file-design-manager.png

  • When you are finished with your coding, click Actions > Get public URL to generate a HubL include that will be used to reference the file from your pages.
  • From the Public URL window, click Copy > click OK.

public-url-js-file.png

  • To include your file on all HubSpot hosted pages, navigate to Content > Content Settings > Site Footer HTML > paste the generated token as the value for the script tag’s source, as seen below:

<!-- start Main.js Do Not Remove -->

<script src='[generated token]'></script>

<!---End Main.js-->

 

So for our example in the screenshot above, this would be:

 

<!-- start Main.js Do Not Remove -->

<script src='{{ get_public_template_url('custom/page/Testing/new_script_file.js') }}'></script>

<!---End Main.js-->

 

  • Scroll down and click Save Changes to finish.
Hannah
2 Replies 2
Highlighted
Regular Contributor | Platinum Partner

I think that the cleanest way to manage the "general" styles and scripts for the most of the cases in a website (not for small css/js files that will only have one use for alanding page or something like that) is save them in the System folder.

On this way you can work with a better logic about use the same file for blog and pages (also error pages etc.). I think that this is the best practice to handle the basic/general files of your site.

Because following your logic you should fragment your file in more than one CSS/JS files inside each folder (blog|page...) and this isn't the best because you are opening a lot of pipes to download the CSS.

 

So how I manage this is:

- If you are going to make a file to use for all website (or most of pages). Save it in the system folder.

- If you need a minor customization, block or a totally different appearance for a landing page, or diferent appearance of your principal site. Save it in the page/blog/email (where appropriate) folder.

Esteemed Contributor | Platinum Partner

Gonzalo was straight on, just wanted to update his answer.

Now when custom modules need specific css or JS it should be done in the custom module itself OR if that css or JS might be shared with other modules or templates, make it it's own file and link the file to the module. This prevents repeating your code.

Also now the actual file locations for the css due to the new design manager, you can place it in a place that makes logical sense to you now.


I usually have a folder for css, js, custom modules, templates, partials

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.