How To Add JavaScript To Webflow
- George Apostolov
How To Add JavaScript To Webflow: step-by-step guide
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.
Quick answer: To add JavaScript to Webflow, click the project settings icon from the dashboard, navigate to the Custom code section, and enter your code wrapped in script tags before the body tag. Alternatively, apply it to a specific page via the Pages tab settings, then save and publish your project.
About this Webflow tutorial
Embed custom JavaScript code into your Webflow project globally or on specific pages by updating the custom code settings before publishing. This guide shows how to add JavaScript To Webflow in 12 steps, starting with "From the Webflow dashboard locate your project thumbnail and click on the three dotted..." and finishing with "Save your changes and publish your project to see them live". The interactive demo above is a click-through copy of the real Webflow interface, so you can rehearse each step before doing it in your own account.
Frequently asked questions
How many steps does it take to add JavaScript To Webflow?
12 steps. Each one is listed in order above, and the demo highlights exactly where to click.
Can I try it without changing my own account?
Yes. Clicking through the demo doesn't touch your Webflow data or settings. Once you know the flow, repeat it in your own workspace.
This tutorial is filed under Webflow. Related guides: How To Add Pages In Webflow, How To Add Slider In Webflow and How To Add Text In Webflow. Last reviewed 05 Oct 2026.
Create your first interactive demo in minutes
No credit card required • Start building today
