How to Include jQuery Across Your Hubspot Pages

If you manage website content in Hubspot and rely on jQuery for interactive components, you need a safe, scalable way to load the library across all your pages. This guide walks you through HubL-based boilerplate setup so that you can add, control, and override jQuery without breaking existing scripts.

Why Manage jQuery Centrally in Hubspot

Loading jQuery from a single, central place in your Hubspot account makes your site easier to maintain and less prone to conflicts.

Key benefits include:

Consistent jQuery version across all templates.
Reduced risk of loading multiple versions by mistake.
Cleaner template code using HubL includes instead of copy/paste.
Easier upgrades when you change jQuery versions later.

The method below is based on HubL tags and custom boilerplate templates that work across landing pages, website pages, blog templates, and system pages.

Hubspot Boilerplate Setup for jQuery

The most flexible approach is to add a small, reusable boilerplate file in your custom folder. You then include it in your layout templates wherever you want jQuery to load.

Create the Hubspot jQuery Boilerplate File

Start by creating one boilerplate file that will handle loading the library and any related scripts.

In your design manager, open the custom folder.
Create a new file named, for example, jquery-boilerplate.html.
Make sure the file type is set to HTML + HubL if available in your Hubspot account.

Inside this boilerplate file, you will add the HubL tags that output your script references only when needed.

Insert jQuery with HubL in the Boilerplate

The next step is to add the jQuery reference and any dependent scripts into the boilerplate so they are wrapped in proper HubL logic.

A typical structure can look like this:

A comment that explains the purpose of the file.
A conditional check to avoid double-loading scripts.
A script tag that references your chosen jQuery source.
Optional custom scripts that depend on jQuery.

You can host jQuery locally in your Hubspot file manager or use a CDN, depending on your performance and caching preferences. The HubL logic ensures the file is only injected in templates where the boilerplate is included.

Add jQuery to Hubspot Layout Templates

Once the boilerplate file is configured, you need to include it in your layout templates so that jQuery loads across the right set of pages.

Include jQuery in Global Hubspot Layouts

For a global implementation, you typically use a main layout template that most pages inherit from.

Open your primary website or landing page layout in the design manager.
Locate the <head> or footer area where scripts are normally loaded.
Insert a HubL include tag that points to your jquery-boilerplate.html file.

Placing the include near the footer is common to help with load performance, but you can adjust the location to meet the requirements of scripts that must run earlier.

Use the Boilerplate in Additional Hubspot Templates

If you have other Hubspot templates, such as blog layouts or system templates for error pages, you can repeat the same include approach so they all share the same jQuery source.

Typical template types to update:

Landing page templates used in campaigns.
Website page templates for core site content.
Blog templates for listing and post views.
Custom system templates like error or subscription pages.

Using the same boilerplate across these templates reduces the risk of version mismatches and keeps maintenance simple.

Controlling jQuery Loading in Hubspot

There may be Hubspot templates or specific pages where you want to override or prevent the default jQuery loading. This is often needed when:

You migrate to a different JS framework on certain pages.
You test a newer jQuery version in a limited area.
You want to avoid potential conflicts with embedded third-party widgets.

Override the Hubspot Boilerplate Per Template

To override jQuery for a particular template, you can adjust the HubL logic around the include or add an alternate boilerplate that loads a different version.

A common pattern is:

Set a HubL variable in the template to signal that default jQuery should be skipped.
Wrap the include in a conditional so that it checks the variable.
Optionally include a different boilerplate that loads another version of the library.

This gives you granular control while still keeping most behavior centralized.

Override jQuery on Individual Hubspot Pages

In some cases, you may want to change jQuery behavior on a single Hubspot page instead of the entire template. You can often achieve this using page-level settings, custom fields, or HubL variables exposed via the page editor, depending on the structure of your theme.

Typical options include:

Using a page-specific custom module that sets a flag to bypass the default boilerplate.
Injecting alternative scripts through the page settings head HTML field.
Coordinating with your developer to add a toggle field to the template.

Ensure that you only override jQuery when strictly necessary to keep behavior predictable across your site.

Troubleshooting jQuery Issues in Hubspot

When working with scripts in Hubspot, you may run into conflicts or unexpected behavior. Here are common troubleshooting steps:

Check the browser console for JavaScript errors referencing jQuery or $.
Confirm that jQuery is only being loaded once on the page.
Verify that your boilerplate file path in the HubL include is correct.
Inspect page source to confirm that the script tags appear in the expected order.

If you see multiple jQuery references (from a widget, plugin, or embedded app), adjust your boilerplate or override logic to avoid duplication.

Reference Material and Next Steps

To see the original instructions and additional context straight from the platform documentation, review the official article on including jQuery across your pages here: Hubspot jQuery knowledge base guide.

For broader strategy around implementing tracking scripts, consolidating libraries, and aligning technical SEO with your Hubspot build, you can also consult experts who specialize in this ecosystem. A good starting point is Consultevo, which provides consulting around scalable website architecture and analytics setup.

By centralizing your jQuery logic in a boilerplate file, carefully including it in Hubspot templates, and using overrides only where necessary, you keep your scripts maintainable and your pages performing reliably over time.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Hubspot jQuery Setup Guide