Intermediate
How to add custom code embeds on Webflow
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.
Prerequisites
- Active Webflow account with a project
- Basic understanding of HTML/CSS/JavaScript
- Published Webflow site
- Custom code ready to embed
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.
Tip
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.
Tip
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.Tip
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.
Tip
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.
Tip
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.
Tip
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.
Tip
Custom code in Project Settings may take a few minutes to appear after publishing.
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.Ready to get started with Webflow?
Put this tutorial into practice. Visit Webflow and follow the steps above.
Visit Webflow →