Webflow's custom code features allows you to add custom CSS, javascript, and HTML your Webflow sites.
Where can I embed code?
On each page, Webflow has two designated areas for inserting code. You'll find this under page settings, titled before </head>, and before </body> ends.
Custom code and CSS entered into the first section will place it inside of your <head> element on your published page, which is necessary for certain early-loading libraries and CSS styling.
Code placed in the second section will be positioned at the end of your page.
Always remember that Javascript code must be within a <script> element, and CSS styling must be within a <style> element.
Code placed on a specific page in the designer will only run on that page. Code placed on a collection page will run on all instances of that collection page, for example, every blog post will have that code.
If you want code to run on every page, you can make it site-wide under your site settings.
You can also position scripts, HTML, and CSS directly in the page using the HTML Embed element. This allows you to add custom code at a specific point in your layout.
Important notes;
- Being able to find your code later is important. In general, place it where it's easy to locate later. The HEAD and BODY custom code areas are ideal for this.
- You must publish your site for code changes to take effect.
- Code in the HEAD and BODY, both on-page and site-wide, will only execute in the published site, so view the published site to see their effect.
- CSS styling in the HTML Embed will actually be visible in the designer, which is incredibly powerful for making special CSS adjustments that Webflow's styling panels may not expose.
- HTML Embeds can be place inside of a Webflow component ( prev "symbol" ) which makes it easy to add to several pages.
- CSS must be wrapped in a <style> element or referenced using a <link>.
- Javascript must be wrapped or referenced using a <script> element.
- jQuery must go in the /BODY part of the page or site.
- CMS content can be embedded into your custom code, but only in areas of your page that have a CMS context - inside of a collection list, or on a collection page.
What else can I do?
- Embed rich markup, like JSON+LD
- Embed special META tags, for favicons
Limitations
Custom code is client-side only, which means no server-side logic, no NPM packages, no ability to process data securely or to hit secured API endpoints.
