How To Add Custom Code In Webflow

Quick summary

Adding custom code in Webflow lets you embed scripts, styles, and third-party snippets directly into your site's head, body, or footer sections. You can apply code globally via Project Settings or target individual pages using the page-level custom code panel inside the Webflow editor.

Steps

1. From the Webflow dashboard, locate your project thumbnail and click the three-dot icon to reveal project options.
2. Click Settings to open your project's settings panel.
3. In the left sidebar, navigate to the Custom Code section.
4. On the Custom Code page, find the separate fields for head, body, and footer — enter your code in the section where it should be applied.
5. Validate and save your changes; note that code added here applies to all pages of your project.
6. To apply code to a specific page, open the Webflow editor and go to the Pages tab in the left sidebar menu.
7. Hover over the target page name to reveal the gear icon, then click it to open page settings.
8. Scroll to the bottom of the page settings panel to find the Custom Code section.
9. Enter your code in the appropriate head, body, or footer field — CSS typically goes in the head tag and JavaScript before the </body> tag — then save.
10. Save your changes and publish your project to push the custom code live.