How can jQuery and Webflow.js scripts be accessed from custom embeds or external JavaScripts in Webflow?
TL;DR
- Webflow automatically includes jQuery in the
<head>and Webflow.js after the</body>tag. - Use jQuery in custom code after it's loaded and for Webflow.js, place scripts before the closing body tag.
- Ensure custom scripts run post page-load using
_ready()or$(document).ready().
To access jQuery and Webflow.js scripts from custom embeds or external JavaScripts in Webflow, follow these steps:
1. Understanding Webflow's Inclusion of jQuery and Webflow.js
- Webflow automatically includes jQuery and Webflow.js in your project.
- These scripts are essential for interactive and animated elements managed through Webflow.
2. Locate When Scripts Are Loaded
- jQuery is loaded in the
<head>section by default. - Webflow.js is typically loaded immediately after the closing
</body>tag.
3. Accessing jQuery in Custom Code
- You can directly use jQuery in any Custom Code Embed or Page Settings.
- Ensure that your scripts that rely on jQuery are placed after jQuery is loaded.
4. Accessing Webflow.js
- To access functions within Webflow.js, your custom scripts should be placed after Webflow.js is loaded.
- Place any Custom Scripts in the before body tag section if they need to interact with Webflow's behavior.
5. Integrate with Custom Code
- Use
_ready()or$(document).ready()to ensure scripts run after the page has fully loaded: - Example for jQuery:
**$(document).ready(function() { / Your code here / });**
- Example using Webflow's way:
**window.Webflow = window.Webflow || []; Webflow.push(() => { / Your code here / });**
Summary
To use jQuery and Webflow.js in your custom scripts within Webflow, place your scripts appropriately relative to their loading points. jQuery is always available, but ensure your scripts utilizing Webflow.js functionalities are added after the library is fully loaded, typically by placing them before the closing body tag.