How do I add custom code to the head or footer in Webflow?

Add site-wide code in Site settings

Custom code in Webflow is for extra HTML, CSS, and JavaScript. It is not for server-side languages such as PHP, Python, Ruby, or Perl. Site managers and Designers can add it when the site has an active Site plan, or when the Workspace is Core, Growth, Agency, or Freelancer.

Open Site settings, then the Custom code tab. Head code applies to the whole site and is placed before the closing head tag. Use it for metadata, links to external styles, and small style blocks. Footer code also applies to the whole site and is placed before the closing body tag. Use it for scripts that should run after the page content is in place.

Each of those two fields holds up to 50,000 characters. The page-level fields have the same limit. If a snippet is longer, host it elsewhere and reference it, or minify it with a third-party tool. Save after you paste. The live site does not change until you publish. Preview and comment mode can show the effect first. Expand canvas view does not run custom code.

Put scripts in the footer and meta tags in the head

Style and meta information belong in the head. Script tags may sit in the head, but placing them before the closing body tag lets the page content load first. That is better for visitors and for speed. External scripts in the head can slow the first view of the page. If a script must stay in the head, add an async or defer attribute on that script.

Do not wrap the snippet in html, head, or body tags. Those tags are already on the page. Adding them again can break the layout. Include the opening and closing tags the snippet itself needs, such as a script tag around JavaScript, or a style tag around CSS.

Example: a client wants a scheduling widget on every page. Paste the vendor script into Footer code, save, and publish. The homepage and the contact page both load the widget after the layout. A search console verification meta tag is different. That belongs in Head code, because it is metadata, not a widget.

If a Google Analytics measurement ID is already saved under Integrations, do not paste the same Analytics tag into Head code. Two installs can double-count visits. Use the Integrations field for ordinary GA4 page tracking, and use head or footer code for other scripts.

Newly published Webflow sites include jQuery 3.5.1. Importing another jQuery build in custom code can conflict with interactions and other scripts. Leave the built-in copy in place.

Limit code to one page when the rest of the site does not need it

Page settings custom code runs only on that page, and it is printed after the site-wide custom code. Open the page in the Designer, open Page settings, and use the Inside head tag field or the Before body tag field under Custom code. Save and publish.

Use the page field for a script that belongs on a single URL. A chat tool that should appear only on /contact goes in that page's Before body tag field. The homepage stays lighter. Site-wide footer code would load the same chat tool on the blog and the pricing page too.

The editor can find and replace, format the snippet, and warn you as you near the 50,000 character limit. If you close it with unsaved edits, it asks you to save or discard.

Publish, then remove the snippet if the page breaks

Custom code can conflict with Webflow, and Webflow does not guarantee that a snippet will work. Webflow support does not troubleshoot the snippet for you. Treat every paste as a change you can undo.

Before you replace a working snippet, copy the old text into a note. After you publish, open the live URL on a desktop and on a phone. Click the main button, send a test if the page has a form, and scroll the section the script touches. If the layout collapses or a button stops working, delete the new snippet, save, and publish again. Then compare the live page with the copy you saved.

A concrete failure: a marketing page loads a second animation library from Footer code, and the hero interaction no longer runs after publish. Remove that library, publish, and retest the hero. If the interaction returns, the library was the conflict. Keep the extra script only if you still need it and the page checks pass.

Scripts you add sit outside Webflow's review. On an Ecommerce site, extra scripts can create compliance work that only you can judge. For a normal marketing site, keep the habit smaller: one snippet, one publish, one live check, and a saved copy of the previous code.