What is the process for adding HTML and CSS script to a Webflow page using custom code settings?
TL;DR
- Add custom HTML/CSS via Project or Page Settings using the Head Code or Footer Code sections.
- Alternatively, use the Embed element in the Designer for layout-specific code, then publish the site to see changes live.
To add custom HTML and CSS to a Webflow page, you’ll use the Custom Code settings available in your project or specific pages.
1. Access Project or Page Settings
- To add code site-wide: Go to Project Settings > Custom Code.
- To add code to one specific page: Open the Page Settings for that individual page.
2. Add HTML or CSS to the <head> or Before </body>
- For CSS, paste your
<style>code into the Head Code section. - For HTML, add snippets like tracking pixels or other scripts to either:
- Head Code: For things like
<meta>,<link>, or<style>. - Footer Code (Before </body>): For things like
<script>tags or embedded widgets.
Important: Webflow does not allow raw HTML or CSS inside regular elements, so you must use these areas or the Embed element.
3. Use the Embed Component on the Page
- Go to the Webflow Designer.
- From the Add panel (press A), drag in an Embed element from the Components section.
- Paste in your HTML or CSS (inside
<style>tags) directly into the embed window. - Use this for layout-specific customizations like iframes, inline styles, or script tags.
4. Publish the Project
- Custom code only appears on the published site, not in the Designer preview.
- Click Publish in the top-right corner and choose your domain.
Summary
To embed custom HTML or CSS in Webflow, use either the Project/Page Settings > Custom Code sections or add an Embed element within the Designer. Only published pages will reflect these changes live.