How can I reference the jQuery library in my web page's <head> tags in order to use this script in Webflow?

Published on
September 22, 2023

To reference the jQuery library in your web page's tags in order to use a script in Webflow, follow these steps:

  1. Select the page where you want to include the jQuery library. You can do this by clicking on the page name in the left sidebar of the designer or by selecting the page from the dropdown menu in the top navbar.

  2. Once you are on the desired page, click on the "Settings" tab in the right sidebar.

  3. In the "Custom Code" section, scroll down to the "Head Code" field.

  4. Paste the following code snippet into the "Head Code" field:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  1. Save your changes by clicking outside the "Settings" panel or by pressing the "Cmd + S" (Mac) or "Ctrl + S" (Windows) shortcut.

By following these steps, you have successfully referenced the jQuery library in the tags of your web page in Webflow. You can now use jQuery scripts and functionality in your Webflow project.

Note: Webflow automatically loads jQuery for you on published sites, so you don't need to include the script in the Designer. The above steps are mainly for cases where you want to use custom jQuery scripts while working in the Webflow Designer.

Additionally, it's worth mentioning that Webflow doesn't officially support custom scripts or libraries, so make sure to test your code thoroughly and be cautious of any potential conflicts or compatibility issues.

Common Questions:

  1. How can I reference custom scripts in Webflow?
  2. Can I use jQuery plugins in Webflow?
  3. What is the difference between the Head Code and Body Code in Webflow?