Webflow's custom code features allows you to add custom CSS, javascript, and HTML your Webflow sites.
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;
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.
