How to Add Custom Code in Webflow

Sophie Ricci
April 18, 2026
Views : 28,543

Custom code in Webflow is the difference between a decent website and one that actually does what you need.

Maybe you want Google Analytics tracking. Maybe you need a third-party chat widget. Maybe you’re trying to inject a script that Webflow’s designer simply doesn’t support natively. Whatever the reason, adding custom code is one of the most powerful moves you can make inside the platform.

And here’s the thing — it’s not as complicated as it sounds.

This guide breaks down every method, every placement option, and every gotcha you need to know. By the end, you’ll know exactly where to put your code and why it matters.

Why Custom Code in Webflow Matters

Webflow is a no-code builder, but “no-code” doesn’t mean “no flexibility.” Over 3.5 million websites are built on Webflow, and a significant portion of them use custom code to extend functionality beyond what the native designer offers.

Here’s what custom code unlocks:

Analytics and tracking — Google Analytics 4, Facebook Pixel, LinkedIn Insight Tag, and more
Live chat and support tools — Intercom, Drift, Crisp, HubSpot chat
Custom fonts and icon libraries — Font Awesome, Google Fonts API calls
Third-party embeds — Calendly, Typeform, Hotjar heatmaps
Advanced interactions — Custom JavaScript that Webflow’s interaction panel can’t handle
SEO metadata and schema markup — Structured data for rich snippets

According to HubSpot’s State of Marketing report, 74% of businesses use multiple martech tools simultaneously — and almost all of them require some form of script injection to work properly on your website.

The Three Places You Can Add Custom Code in Webflow

Before you paste a single line of code, you need to understand where it goes. Webflow gives you three distinct injection points, and choosing the wrong one causes scripts to either break or load incorrectly.

Site-Wide Custom Code (Head and Body)

This is your global injection layer. Any code you add here runs on every page of your website. It lives inside Project Settings → Custom Code.

Use this for:

Analytics scripts (GA4, Facebook Pixel)
Global CSS resets or custom style overrides
Consent management platforms (Cookiebot, OneTrust)
Any tool that needs to be active across your entire site

Head Code loads before the page renders. This is the right place for stylesheets, meta tags, and scripts that need to run early.

Footer Code loads at the bottom of the <body> tag. Use this for scripts that don’t need to block page rendering — like chat widgets or analytics fires.

Page-Level Custom Code

Need a script that only runs on your pricing page? Or a specific tracking pixel for one landing page? Page-level custom code has you covered.

Find it in Page Settings → Custom Code for any individual page in your project.

This is especially useful for:

Page-specific conversion tracking
A/B testing scripts that only apply to one URL
Unique schema markup per page type
Embedded tools that are relevant to one page only

Embed Elements (Inline Custom Code)

This is your most surgical option. The Embed element lets you drop custom HTML, CSS, or JavaScript directly inside a specific section, div, or location on the page.

You’ll find it in the Add Elements panel — it looks like a pair of brackets < >.

Use this for:

Custom HTML tables or structures
Inline SVG animations
Specific component-level scripts
Embeds like Calendly booking widgets placed inside a section

How to Add Custom Code to Your Entire Webflow Site

This is the most common use case. Here’s exactly how to do it.

Step 1: Open your Webflow project in the Designer.

Step 2: Click the W icon (Webflow logo) in the top-left corner to access the project dashboard.

Step 3: Navigate to Project Settings from the left sidebar.

Step 4: Click the Custom Code tab.

Step 5: You’ll see two text areas — Head Code and Footer Code. Paste your script in the appropriate section.

Step 6: Hit Save Changes.

Step 7: Publish your site. Custom code does not appear in the Designer preview — it only activates on your published site.

Pro tip: Always wrap third-party scripts in a <script> tag if they don’t already include one. Pasting raw JavaScript without the tag will cause errors.

How to Add Custom Code to a Specific Page

Step 1: In the Designer, open the Pages panel (the document icon on the left).

Step 2: Hover over the page you want to edit and click the Settings icon (gear icon) that appears.

Step 3: Scroll down in the Page Settings panel until you see the Custom Code section.

Step 4: Add your code to either the Before </head> tag or Before </body> tag section depending on when you need it to load.

Step 5: Hit Save.

Step 6: Publish the site to see it live.

How to Use the Embed Element for Inline Code

The Embed element gives you granular control over where code renders inside the page layout itself.

Step 1: In the Designer, open the Add Elements panel (the + icon).

Step 2: Scroll down to the Components section and find the Embed element (the < > icon).

Step 3: Drag the Embed element onto your canvas and drop it where you want the code to appear.

Step 4: Double-click the element to open the code editor.

Step 5: Paste your HTML, CSS (wrapped in <style> tags), or JavaScript (wrapped in <script> tags).

Step 6: Click Save & Close.

The element will render a placeholder in the Designer — the actual output only appears on your published or previewed site.

Common Custom Code Use Cases (With Examples)

Adding Google Analytics 4

Paste this inside your Head Code in Project Settings. Replace G-XXXXXXXXXX with your Measurement ID.

<!– Google tag (gtag.js) –>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag(‘js’, new Date());

gtag(‘config’, ‘G-XXXXXXXXXX’);

</script>

Adding a Facebook Pixel

Paste inside your Head Code. Replace YOUR_PIXEL_ID with your actual pixel ID.

!function(f,b,e,v,n,t,s)

{if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};

if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;

n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];

s.parentNode.insertBefore(t,s)}(window, document,’script’,

‘https://connect.facebook.net/en_US/fbevents.js’);

fbq(‘init’, ‘YOUR_PIXEL_ID’);

fbq(‘track’, ‘PageView’);

</script>

Adding Custom CSS

You can add site-wide custom styles directly in the Head Code:

<style>

/* Override Webflow’s default link color */

a {

color: #2A5AF8;

text-decoration: none;

}

/* Custom scrollbar */

::-webkit-scrollbar {

width: 6px;

}

::-webkit-scrollbar-thumb {

background: #2A5AF8;

border-radius: 3px;

}

</style>

Embedding a Calendly Widget

Use an Embed element placed inside a section:

The Right Load Order: Head vs. Footer

One of the most common mistakes people make is putting everything in the head. Here’s when each placement actually makes sense.

Script Type	Recommended Placement
Analytics & tracking	Head Code
CSS stylesheets	Head Code
Schema / structured data	Head Code
Chat widgets	Footer Code
Conversion scripts	Footer Code
Heavy third-party tools	Footer Code
Page-specific embeds	Embed Element

Scripts in the <head> block page rendering until they load. Scripts in the footer don’t. For tools that don’t need to be active before the user sees content — like a chat widget — always go footer.

According to Google, a 1-second delay in page load time results in a 7% reduction in conversions. Loading heavy scripts in the head is one of the fastest ways to tank that number.

Can You Use JavaScript Frameworks in Webflow?

Yes — with conditions.

Webflow supports vanilla JavaScript fully. You can write custom JS directly in the Embed element or in site-wide footer code without any restrictions.

For frameworks like React, Vue, or Alpine.js — it’s possible but requires care:

Alpine.js works cleanly via CDN. Load it in the head and use x-data attributes directly in your Webflow elements via custom attributes.
Vue.js can be used inside an Embed element for isolated components.
React is more complex. You’d typically mount a React component into a specific div with a known ID. This is doable but adds build complexity since Webflow doesn’t support bundlers natively.

For most use cases — form validation, simple animations, tracking — vanilla JavaScript is all you need.

Webflow Custom Code: Plan Restrictions You Need to Know

Not all Webflow plans are created equal when it comes to custom code.

Webflow Plan	Custom Code Access
Free (Starter)	❌ Not available
Basic	✅ Site-wide only
CMS	✅ Site-wide + Page-level
Business	✅ Full access
Enterprise	✅ Full access + Priority support

If you’re on the free plan and custom code isn’t available, you’ll need to upgrade to at least the Basic plan to unlock site-wide injection.

According to Webflow’s own data, over 60% of professional Webflow users are on CMS or Business plans — primarily because of the need for custom code and CMS functionality.

Debugging Custom Code in Webflow

Your code is in. You’ve published. Nothing’s working. Here’s how to diagnose it.

Use browser DevTools. Open Chrome DevTools (Cmd+Option+I on Mac, F12 on Windows), go to the Console tab, and look for errors. Red error messages usually point directly to the problem.

Check the Network tab. If a third-party script isn’t loading, the Network tab will show a failed request. This often happens when a CDN URL is wrong or blocked.

Verify publish status. Custom code doesn’t activate in the Designer preview — only on the published site. Many people troubleshoot for 20 minutes before realizing they just forgot to publish.

Check for conflicting scripts. If two scripts are both trying to control the same DOM element, they’ll fight. Look for duplicate IDs or overlapping event listeners.

Use console.log to test. Add a simple console.log(‘script loaded’) inside your custom script. If you don’t see it in the console, the script never ran.

How to Add Google Tag Manager to Webflow

GTM is the preferred method for managing multiple scripts without touching Webflow’s custom code panel repeatedly.

Step 1: Create a GTM account and container at tagmanager.google.com.

Step 2: Copy the Head snippet (the <script> tag).

Step 3: Paste it into Webflow’s Project Settings → Custom Code → Head Code.

Step 4: Copy the Body snippet (the <noscript> tag).

Step 5: Paste it into Footer Code in the same panel.

Step 6: Publish your site.

Now manage all your tracking pixels, GA4, conversion scripts, and retargeting tags through GTM — without ever touching Webflow again.

This approach is used by 29% of all websites globally, making it the most common tag management solution on the internet.

Custom Code on Webflow CMS Collection Pages

If you’re using Webflow’s CMS, you can add dynamic values to your custom code using Collection Page fields. This allows you to inject custom metadata, structured data, or tracking parameters that change per CMS item.

Example: Adding a dynamic og:title meta tag on a blog post collection page.

Open the Page Settings for your Collection template page, go to Custom Code, and add:

Replace [Blog Post Name field] with the actual CMS field binding by clicking the + icon that appears when editing inside a Collection page context.

This is particularly powerful for:

Per-post schema markup (Article, BlogPosting structured data)
Dynamic Open Graph images
Page-specific tracking events (e.g., firing a pixel only when someone views a specific product category)

Custom Code Best Practices

Keep it lean. Every script you add increases page load time. Audit your custom code section quarterly and remove anything that’s no longer active.

Comment your code. Add short comments explaining what each script does and when it was added. Future you will thank present you.

<!– Hotjar tracking — added Jan 2025 — remove after Q2 audit –>

Test on staging first. Use Webflow’s staging URL to verify custom code works before pushing to production.

Use async and defer attributes. For scripts that don’t need to block rendering:

<!– or –>

Sanitize inputs. If your custom code handles user-submitted data (form inputs, URL parameters), always sanitize before processing to prevent XSS vulnerabilities.

Conclusion

Adding custom code in Webflow is straightforward once you understand the three injection points: site-wide Head and Footer code, page-level settings, and inline Embed elements. Each has a specific purpose, and using the right one for the job keeps your site fast, clean, and functional.

The key things to remember:

Site-wide scripts (analytics, pixels) → Project Settings → Custom Code
Page-specific scripts → Page Settings → Custom Code
Inline components and widgets → Embed element
Always publish before testing — Designer preview doesn’t show custom code
Use Google Tag Manager to centralize script management at scale

Your Webflow site can do a lot. But if your growth strategy depends on people organically finding it, you’re leaving pipeline on the table. At SalesSo, we build outbound lead generation systems on LinkedIn and cold email that get your offer in front of the right decision-makers — no relying on algorithms or ad spend. Book a strategy meeting and we’ll show you exactly how.

🚀 Skip the Website Friction

Turn your Webflow visitors into booked meetings — without relying on forms or SEO alone. We build complete LinkedIn outbound systems: precision targeting, campaign design, and scaling methods that land you 15–25% response rates.

7-day Free Trial |No Credit Card Needed.

FAQs

What is the best way to add custom code in Webflow without breaking the layout?

The safest way to add custom code in Webflow without breaking your layout is to use the correct injection point for the job. CSS and analytics scripts belong in the Head Code section inside Project Settings — they run before the page renders and don't interact with your visual layout. JavaScript that needs to manipulate DOM elements should go in Footer Code so it loads after your HTML is fully in place. For inline changes — like embedding a booking widget or adding a custom component inside a section — use the Embed element so the code is scoped to that location only. One common layout-breaker: pasting raw CSS without tags, or raw JS without tags. Webflow doesn't wrap your code for you. Always use the correct tags, test on the published URL (not the Designer preview), and check the browser console for errors before assuming something's broken. If you're investing time in building out your Webflow site but still relying on inbound traffic alone to fill your pipeline, there's a faster path. At SalesSo, we run complete LinkedIn outbound systems — from precision targeting to campaign design and scaling — that consistently generate 15–25% response rates. Book a strategy meeting to see how we build your outbound engine.

Does Webflow support JavaScript frameworks like React or Vue?

Webflow supports vanilla JavaScript natively and without restrictions. React and Vue are possible via CDN or Embed elements, but Webflow doesn't support build tools or bundlers natively, which limits how deeply you can integrate them.

Why is my custom code not showing in the Designer?

Custom code does not render inside the Webflow Designer preview. It only activates on your published or staging URL. Always publish and check the live site to verify your code is working.

Can I add custom code on the free Webflow plan?

No. Custom code requires at least the Basic paid plan. The Starter (free) plan does not include site-wide or page-level code injection.

We deliver 100–400+ qualified appointments in a year through tailored omnichannel strategies

What to Build a High-Converting B2B Sales Funnel from Scratch

blog
Sales Development
How to Add Custom Code in Webflow

Sales Development

Outreach

Deliverability

Lead Finder

Integrations

By Industry

By Need

Learn

Grow

Support

Latest From Blogs