Webflow is widely marketed as a no-code development platform, which is considered its biggest advantage. However, that doesn’t mean you can’t add codes to your design.
Although Webflow offers a wide range of design options, you may want to customize your website more. This is where custom codes come in, as adding them allows for more functionality.
Keep reading to learn how to add custom code in Webflow.
Limitations on adding custom code
Before learning how to add custom codes in Webflow, it is important to review some basic rules.
Keep in mind that custom codes are advanced modifications. As such, they can cause conflicts with Webflow functionality, leading to unexpected behavior on your site. Therefore, there is no guarantee that each Custom Code will be fully compatible or functional.
In general, Webflow supports the following types of code:
Adding custom JavaScript codes can add a lot of functionality to your website. For this reason, Webflow also comes with a simpler version of JavaScript called jQuery. You can use it with JavaScript to make the writing process easier.
When importing jQuery, it is essential to pay attention to its version. The version should match the currently imported Webflow version to avoid conflicts and unexpected behavior. Additionally, scripts like onClick and onHover that affect DOM events can also cause unexpected behavior on your site.
When embedding custom code, you may not use any server-side languages, including:
Another critical aspect to consider is the length of the custom code. Webflow imposes the following character limitations:
- 10,000 characters for embedded elements
- 10,000 characters for codes on a single page
- 20,000 characters for codes throughout the website
If the code you want to embed exceeds these character limits, you cannot embed it directly. However, you can store the code on another server and then reference the script in your code. You can also use a third-party tool to minify your custom code.
Most custom code does not affect elements in designer mode to avoid unexpected behavior. Therefore, you will only see results after your website is published.
Unfortunately, if your custom code doesn’t work, the Webflow support team won’t be much help, as custom coding is outside the scope of their customer support policy. Try double-checking your code and visit the Webflow forum for additional help, if needed.
Webflow How to add custom code
Custom codes allow you to tailor your website to your specific needs. Webflow has made sure to support a range of scenarios, allowing users to add custom codes to the entire site or to individual pages only. Moreover, you can also customize specific posts. The best part is that you can add your custom code with just a few clicks, regardless of location.
How to Add Custom Code to an Entire Website
If your custom code needs to apply to every page on your website, “Site Settings” is the place to be. Adding the custom code will ensure a seamless experience across all elements of your website.
Website-wide codes can be placed in the header or footer code section. To add custom code in the Head code section, follow these steps:
- Open the “Site Settings”.
- Go to the “Custom code” tab.
- Add the custom code to the “Head Code” field.
- Press “Save Changes”.
This section lets you use custom styles, link to external resources, and add metadata.
If you want to add a custom code to the Footer Code section, navigate to the “Custom Code” tab again, then follow these steps:
- Add the custom code in the “Footer Code” field.
- Press “Save Changes”.
How to add custom code to a single page
Sometimes you may want to customize one or a few specific pages of your website. Webflow has made this process reasonably simple. After you add the code, it will follow any site-wide code in your website markup.
When you add custom code to a single page, you can choose where to place it.
You should always place HTML and CSS codes inside the tag
. However, JavaScript codes must go in the tag section before the tag . In general, this will improve the performance of the website, because the links