W Webflow

How to add custom code embeds on Webflow

intermediate 8 min read Updated 2026-03-18
Quick Answer

Add custom code embeds in Webflow by using the Embed element for inline code or accessing Project Settings for site-wide code. You can embed HTML, CSS, and JavaScript directly into your pages or across your entire site.

Try Webflow Full Webflow Review

Prerequisites

  • Active Webflow account with a project
  • Basic understanding of HTML/CSS/JavaScript
  • Published Webflow site
  • Custom code ready to embed

Step-by-Step Instructions

1

Access the Webflow Designer

Log into your Webflow account and open the project where you want to add custom code. Click Designer to enter the visual editor interface.
Make sure you're working on the correct project and have the right permissions to edit.
2

Add an Embed Element for Page-Specific Code

In the Designer, click the Add Elements panel (plus icon) on the left sidebar. Scroll down to the Components section and drag the Embed element onto your page where you want the custom code to appear.
The Embed element is perfect for adding widgets, forms, or interactive elements to specific pages.
3

Insert Your Custom Code

Double-click the Embed element or click the Settings tab in the right panel. In the Embed Code field, paste your HTML, CSS, or JavaScript code. Wrap CSS in <style> tags and JavaScript in <script> tags.
You can preview how your code will look by clicking outside the embed field or switching to Preview mode.
4

Configure Site-Wide Custom Code

For code that should appear on all pages, click the Project Settings gear icon in the top-left corner. Navigate to the Custom Code tab. Add code to Head tag for CSS/meta tags or Footer tag for JavaScript that should load after page content.
Use Head tag for analytics tracking codes and Footer tag for performance-heavy scripts.
5

Add Page-Specific Head Code

While in Designer, click Pages in the left panel, then click the Settings gear icon next to any page name. In the SEO Settings section, scroll down to find Inside <head> tag field to add page-specific custom code.
This is ideal for page-specific meta tags, structured data, or tracking codes.
6

Test Your Custom Code

Click Preview in the top-right corner to test your embedded code. Check browser developer tools (F12) to ensure there are no console errors and that your code is executing properly.
Always test on different devices and browsers to ensure compatibility.
7

Publish Your Changes

Once you're satisfied with your custom code implementation, click Publish in the top-right corner. Select your domain and click Publish to Selected Domains to make your custom code live.
Custom code in Project Settings may take a few minutes to appear after publishing.

Common Issues & Troubleshooting

Custom code not appearing on published site

Ensure you've clicked Publish after adding the code. Check if code is wrapped in proper <script> or <style> tags, and verify there are no syntax errors in your code.

JavaScript errors in browser console

Validate your JavaScript syntax and ensure all required libraries are loaded. Move JavaScript code to the Footer tag in Project Settings if it depends on page elements being loaded first.

Embed element showing code instead of executing

Make sure your code includes proper HTML tags. For JavaScript, wrap code in <script> tags. For CSS, use <style> tags. Check that you're not mixing plain text with code.

Custom code affecting site performance

Move heavy JavaScript to load asynchronously by adding async or defer attributes to script tags. Consider loading third-party scripts conditionally or only on specific pages where needed.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Webflow website before purchasing.
Visit Webflow View Webflow Pricing