Adding Custom Code to the Head of a Webflow Site

Before you start: what Webflow requires

Custom code is a paid feature on Webflow, but the rule has two parts, because Webflow has both Workspace plans (for your account or team) and Site plans (for each individual site). Webflow's help article on custom code says it is available on "Core, Growth, Agency, or Freelancer Workspaces, or sites with an active Site plan." In other words, either a paid Workspace or a paid Site plan on the site you are working on unlocks it.

Plan names and prices change, so we don't list prices here. Check the options in your own Webflow account. What matters for this guide is that one of the two conditions above is true for the site you want to track.

Have the script ready before you open Webflow. In marketingLABO, for example, you register your site with its name and URL, and the dashboard then shows your tracking tag with a Copy tag button and the instruction to paste it right before </head> on every page. On Webflow, that is exactly what the Head code field in Site settings does, as you will see in Step 2.

Three places for code in Webflow

Webflow gives you three different places to add code, and choosing the right one is most of the job:

For a visitor analytics, heatmap or pop-up tag that should run on every page, use the site-wide Head code field. Adding the tag to each page individually takes longer, and pages you create later would be missed.

Step 1: Open Site settings > Custom code

1. Sign in to Webflow and open the Site settings of the site you want to track.
2. Open the Custom code tab.
3. You will see two sections: Head code and Footer code. If they are missing or locked, recheck the plan and role requirements above.

Before you paste anything, read what is already in both sections. Sites that have been around for a while often have old snippets from tools nobody uses any more, or a copy of the same tool you are about to install.

Step 2: Paste the snippet into Head code

1. Click into the Head code section and paste the snippet exactly as your tool gives it, including the opening and closing <script> tags.
2. If there is already code there, put your snippet on a new line after it. Don't paste into the middle of another snippet.
3. Add a comment above it so your team knows what it is, for example <!-- marketingLABO tag, added Oct 2026 -->. Webflow's custom code fields accept HTML, so an HTML comment is fine, and it makes the code easy to find later.
4. Click Save changes.

Webflow says Head code "appears before the closing head tag" in your site's HTML markup and applies to your entire site. That matches the "right before </head> on every page" instruction many tools give, including marketingLABO, so you don't need anything else for site-wide installation.

Paste the snippet once. If the same tool is also installed in Footer code or in a page's settings, page views can be counted twice.

Head code or Footer code?

Webflow's article gives a performance tip for footer code: placing script tags before the closing body tag lets the page load its content before the JavaScript is processed. For external scripts in the head, Webflow suggests using the async or defer attribute. Here is how that applies in practice:

The rule that beats both: follow your vendor's instructions. If your tool asks for the head, use Head code. marketingLABO asks for its tag right before </head>, so choose Head code. Don't add async or defer to a vendor's snippet yourself; most tracking snippets already decide how they load, and changing the snippet can change when it runs.

Step 3: Publish the site

This is the step people miss. Webflow's help article says the effects of custom code appear in preview mode, but they won't go live until your site is published. Webflow's developer documentation says the same thing about custom code added by apps: "the change only takes effect when the site is published."

1. After saving the custom code, publish your site.
2. Make sure you publish to the domain your visitors actually use. If your site is published to more than one address, test the one you registered in your tool.
3. Remember that publishing pushes all staged changes live, not just the code. If a teammate has unfinished design changes on the site, coordinate with them before you publish.

Until you publish, visitors to the live site don't get the script, and your tool won't receive any data from them.

Why your script seems to do nothing in the Designer

It is common to paste a tag, look at the canvas and conclude it didn't work. Webflow documents why. Its help center says custom code doesn't run in the expand canvas view, and that the effects show up in preview mode but go live only on publish.

For a tracking tag this matters even less, because a tag has nothing to show on the canvas anyway. The test that counts is the published site in a normal browser window, which we cover in Step 4.

Page-level custom code: when you need it

Sometimes you do want code on only one page, for example a conversion script your vendor tells you to place only on a thank-you page. For that, Webflow has custom code fields in Page settings:

1. Open the site in the Designer.
2. Open Page settings for the page.
3. Find the Custom code section, with one field for code inside the <head> tag and one for code before the </body> tag.
4. Paste the code, save, and publish.

Webflow notes that page-level code appears after any site-wide custom code in the HTML. So if a page-level script depends on your site-wide tag, it will find the tag already in place.

For marketingLABO you don't need page-level code at all. The site-wide tag covers every page, and goals such as reaching a specific thank-you page are set up in the marketingLABO dashboard as micro-conversions, not with extra code.

Step 4: Check that it works on the live site

1. Open your published site in a private window, at the domain your visitors use. A private window shows the site the way a new visitor sees it.
2. View the page source (Ctrl+U on Windows, Option+Cmd+U in Chrome on Mac) and search for a recognizable part of your snippet, such as its domain. It should appear inside the head, before </head>.
3. Click through three or four pages, including a CMS item page such as a blog post if your site has them. Site-wide head code should be on all of them.
4. Use your tool's own check. In marketingLABO, open any page of your site, then press Check tracking in the dashboard. If nothing has arrived, the dashboard suggests confirming the tag is right before </head> on every page and your changes are saved (published), then reloading your site and trying again.

After a few minutes of browsing, look for your own visit in the tool. In marketingLABO, the visitor history timeline should list each page you opened, in order.

If you later move the site to a new custom domain, check the tag again on the new address the same day. In marketingLABO, the site URL you registered should also match the domain visitors actually use, so update it there too.

Limits worth knowing

If the tag doesn't load: a troubleshooting table

When you suspect another snippet is causing trouble, remove snippets one at a time from a copy you have saved elsewhere, publish, and test after each change. Because Webflow doesn't offer support for custom code, a careful process like this is the fastest way to find the culprit.

A note on privacy and consent

Webflow's Head code section runs your script for every visitor on every page once the site is published. If you serve visitors in places with consent rules for analytics cookies, decide how consent is handled before adding analytics tags, and follow the instructions of whatever consent solution you choose for how scripts should be added.

What a head tag can do on Webflow, and what it can't

Once the snippet loads on every page, a page-level tool sees what visitors do on those pages. With marketingLABO on a Webflow site, that means:

1. Analytics and heatmaps. Reports by traffic source, page and conversion, plus per-page heatmaps of time on page, scroll depth and clicks. Long landing pages built in Webflow are a natural fit for scroll maps. See our guide to website heatmaps for how to read them.
2. Visitor history. A per-visitor timeline of the pages they viewed.
3. Micro-conversions. Count goals by number of pages viewed, a specific URL, time on page or return visits.
4. Pop-up banners. Show a banner immediately, after a delay, at a scroll depth or on exit intent, targeted by page URL, visit count, days since last visit, pages viewed or not viewed, and traffic source, in modal, floating or bar style.

And what it doesn't do: marketingLABO isn't a Webflow app and doesn't connect to Webflow's CMS, Ecommerce or form submissions, so it doesn't read your collections, cart contents or orders. If you sell on Webflow, keep using Webflow's own reports for orders and revenue, and use page-level data for what happens before checkout.

For campaign traffic, our UTM parameters guide explains how to tag links and match landing messages to them, and targeting returning visitors covers showing different messages on a first and a repeat visit.

Common mistakes

Quick checklist

1. Paid Workspace (Core, Growth, Agency or Freelancer) or an active Site plan on this site.
2. Your role can edit custom code.
3. Snippet copied directly from your tool.
4. Pasted once into Site settings > Custom code > Head code, with a comment above it.
5. Save changes clicked, then the site published to the domain visitors use.
6. Verified in a private window on several pages, plus your tool's own tracking check.
7. A copy of the snippet kept in your team's notes.

FAQ

Can I add custom code on a free Webflow plan? Webflow lists custom code for Core, Growth, Agency or Freelancer Workspaces, or for sites with an active Site plan. If neither applies to your site, the custom code fields aren't available for editing.

Do I need to add the tag to every page? No. Head code in Site settings applies to your entire site, including CMS item pages, so one copy is enough.

Will Webflow support help if the script doesn't work? Webflow says its support team can't provide direct help with custom code setup or troubleshooting. Contact your tool's provider, or ask in the Webflow Forum.

I also run a Wix, Squarespace, Shopify or WooCommerce site. Is it similar? The goal is the same (the tag in the head of every page), but the steps differ. See adding custom code to the head of a Wix site, Squarespace code injection, adding a tracking script to Shopify and adding a script to the head of a WooCommerce store.

marketingLABO's Free plan includes one site with analytics, heatmaps and visitor history, plus one form and one pop-up banner, with no time limit and no credit card required. Compare plans in the pricing section, or sign up free to get your tag.

Sources

All checked on October 12, 2026.

1. Webflow Help Center: Custom code in head and body tags
2. Webflow Developers: Working with Custom Code
3. Webflow Help Center: Downgrade or cancel your Site plan
4. Webflow Help Center: Custom code embed