Webflow Custom Code: Where It Goes and What's Possible

TL;DR: Webflow custom code lives in five locations, and every one of them caps out at 50,000 characters:

• Site settings, Head code: runs on every page, before the closing head tag
• Site settings, Footer code: runs on every page, before the closing body tag
• Page settings, inside the head tag: one page only
• Page settings, before the body tag: one page only
• Code Embed element: a block of code at an exact spot on the canvas or inside rich text

Webflow custom code is the HTML, CSS and JavaScript you add outside the Designer's visual controls, and all five locations require a paid Site plan or a paid Workspace. Choosing between them is almost entirely a question of scope: how many pages genuinely need this code to run? On the agency projects I lead, that one question settles most placement arguments before anyone opens a code editor.

Where does custom code go in Webflow?

Webflow custom code goes into one of five locations: Head code and Footer code in Site settings, the inside-head and before-body sections in Page settings, and the Code Embed element on the canvas, per Webflow's documentation on custom code in head and body tags. Page-level custom code appears after site-wide custom code in the published markup, which is what allows a single page to override a site-wide rule.

The rule I apply on client projects is simple: if fewer than three pages need the code, it does not belong in Site settings.

Do you need a paid plan to use custom code in Webflow?

Yes. Adding Webflow custom code requires a Core, Growth, Agency or Freelancer Workspace, or a site with an active Site plan, and only Site managers and Designers can edit those fields, per Webflow's custom code requirements. The failure mode I see most often in agency handoffs is a site still on a free Starter plan: the custom code sections are not available at all, so the analytics script agreed at kickoff never ships and nobody notices until the client asks why the dashboard is empty. Confirm the plan before promising tracking, chat widget or integration work.

What is the character limit for Webflow custom code?

The character limit for Webflow custom code is 50,000 characters per location, and that figure applies to Head code and Footer code in Site settings, to both Page settings sections, and to the Code Embed element, per Webflow's Code Embed documentation. Webflow raised the ceiling to 50,000 on May 7, 2024, extending it across Site settings, Page settings, Code Embed elements and CMS rich text fields on all paid sites and workspaces (Webflow product updates). Webflow documents three ways out when a script runs longer than the limit:

• Host the script elsewhere and reference the external file from your custom code
• Minify the code with a third-party tool before pasting it in
• Split it across multiple Code Embed elements, as long as the split does not break any JavaScript functions

For scale, the widget engine in this site's footer is 9,708 characters, about one fifth of one field. When I audit a Webflow site, the constraint is almost never the limit; it is how many unrelated scripts sit in one field with no comments explaining any of them.

What is actually possible with Webflow custom code?

Three languages are supported in Webflow custom code and nothing else: HTML, CSS inside style tags, and JavaScript inside script tags. Server-side languages including Perl, PHP, Python and Ruby cannot run in any custom code location, per Webflow's Code Embed documentation, because Webflow serves published sites as static files. That boundary is what separates work you can do inside Webflow from work that needs an external service or an API, which is the line I draw when scoping a Webflow tech stack for a client.

What breaks Webflow custom code most often?

Four specific mistakes account for most broken custom code in Webflow: wrapping the block in html, body or head tags, loading a second copy of jQuery, putting the code in the wrong scope, and forgetting to publish. What I see agencies get wrong underneath all four is treating the custom code field as a junk drawer instead of a reviewed deliverable.

• Wrapping code in html, body or head tags, which Webflow warns will break the site layout outright
• Loading a second copy of jQuery, which conflicts with the jQuery v3.5.1 that has shipped with newly published Webflow sites since August 2020, per Webflow's custom code documentation, and produces unpredictable behaviour
• Putting the code in the wrong scope, such as Page settings on one page when the script needs to run site-wide, so it never fires where you are testing
• Forgetting to publish, because custom code effects show in preview and comment modes but never reach visitors until the site is published

Structured data is where the junk drawer habit costs real money: Webflow now has a native Schema markup field, so JSON-LD pasted into head custom code often duplicates it, as I cover in my guide to schema markup in Webflow. Script weight is the other cost, covered in my 12 fixes for a slow Webflow site.

How do you test custom code without breaking the live site?

Testing Webflow custom code safely relies on the gap between preview and publish: the effects of custom code appear in preview and comment modes, but they do not reach the live site until you publish. That gap is your entire safety net, and three built-in tools documented in Webflow's custom code documentation make it more useful.

• Prettify in the code editor auto-formats your code and validates HTML, CSS and JS, flagging syntax errors before you publish
• The character limit warning appears as you approach the 50,000 character ceiling, rather than failing on save
• An EXCLUDE FROM PREVIEW comment wrapper keeps a script out of preview and comment modes entirely, which is useful for tracking pixels you do not want firing while you work

Publish to the webflow.io staging domain first and check the browser console there. If a script must be tested against real traffic, put it in a page-level embed on one page rather than in Site settings, so a mistake affects one URL instead of the whole site. That discipline matters because Webflow states it cannot guarantee custom code compatibility, and its support team does not troubleshoot custom code because it falls outside the Webflow customer support policy. Whatever you paste in, you own.

Want a second opinion before your custom code ships?

If you are an agency or marketing team sitting on a Webflow site with custom code nobody wants to touch, I will read through it with you. Book a 15-minute call and you will leave with a straight recommendation on each script, a rough hour estimate for the cleanup, and a yes or no on whether it needs a developer at all.