How To Add JavaScript To Webflow: 1-Min Guide

How To Add JavaScript To Webflow

‍

Here is how to add JavaScript code to your Webflow project:

From the Webflow dashboard locate your project thumbnail and click on the three dotted icon to view options.
Click on Settings.
From the left sidebar, navigate to the Custom code section.
This page will contain different sections for head, body and footer. Although you may add JavaScript code inside the head, it can slow your page load times. Instead it is recommended to add it in the body section.
Scroll down to find the section that says Add code before </body> tag and enter your code. Make sure you wrap your code inside the <script> and </script> tags. Do not include the <body> and </body> tags, your code is automatically placed inside them.
Validate and save your changes. Note that all code applied here will be applied to all pages of your project.
To apply JavaScript to a specific page, from inside the editor, go to the Pages tab in the left sidebar menu.
Hover over the page name to reveal a small gear icon for settings. Click to open.
Scroll to the bottom to find the Custom Code section. Click to expand.
Note that although you can add JavaScript to the head section of your page, it can increase the load time for your page. Instead, it is recommended to add scripts before the </body> tag, for which you may scroll down to the Before the </body> tag section.
Embed your JavaScript code inside this section for best performance. Make sure you wrap your code inside the <script> and </script> tags. Do not include the <body> and </body> tags, your code is automatically placed inside them.
Save your changes and publish your project to see them live.