Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Add custom code and scripts that apply to your entire site or individual pages.
Note: We’re transitioning to Workspaces, and are in the process of updating our content. Visit the Workspaces blog post to read more about these updates and changes, or visit our updated lesson on custom code in head and body tags. You can also learn how to check if your account is on Workspaces.
If you have a paid Webflow account or if your project has an active site plan, you can add custom code and scripts that apply to your entire site or individual pages. This can be useful for adding additional HTML, CSS, and JavaScript.
You can also use the Embed element to add custom blocks of HTML code to your site design or rich text elements.
In this lesson:
Important: Custom code is an advanced modification that may conflict with Webflow’s underlying functionality. As such, Webflow cannot guarantee the functionality or full compatibility of any custom code. Additionally, our support team is unable to provide direct help with custom code setup or troubleshooting, as these topics fall outside the scope of our customer support policy. If you run into issues with custom code, please let us know on the Webflow Forum, where the entire Webflow community (staff included) can provide additional help and resources.
The custom code sections in Site and Page settings only support HTML, CSS, and JS. You can’t integrate server-side languages (such as Perl, PHP, Python, or Ruby) in any code section.
Important: If your custom code has opening and/or closing tags, make sure to add those to ensure your code works as expected. Additionally, don’t include <html>, <body>, or <head> tags in your custom code, or your website/layout will break.
The <link> tag defines a link between a document and an external resource and should always go in the <head> code section.
The <meta> tag provides metadata about your site and should always go in the <head> code section.
The <style></style> tag defines additional CSS styles in your site and should always go in the <head> code section.
The <script></script> tag allows you to embed JavaScript in your site and can be added to either the <head> code section or before the closing </body> tag (i.e., the Footer code section). However, adding your <script></script> tags just before the closing </body> tag ensures your site pages load all their content before the JavaScript is processed, which helps with page load speed and provides a better user experience.
Important: As of August 2020, newly published Webflow sites include jQuery v3.5.1. Importing other versions of jQuery with custom code may cause conflicts and unexpected behavior on your site.
Custom code entered in the Head code section appears before the closing </head> tag in your site’s HTML markup and applies to your entire site. The Head code section allows you to link external resources, add metadata, and use custom styles.
To add custom code to the Head tag:
Code entered in the Footer code section appears before the closing </body> tag in your site’s HTML markup and applies to your entire site.
To add custom code to the Head tag:
Important: Custom scripts will only appear on the published site.
The code included in the custom code section of any page will only apply to that page, and will appear after any site-wide custom code in your site’s HTML markup.
<link>, <meta>, and <style></style> tags should always go inside the <head> tag. <script></script> tags can also be added inside the <head> tag, but adding scripts before the closing </body> tag typically improves site performance and provides a better experience for your site visitors.
To add custom code inside the <head> tag of an individual page:
Generally, <script></script> tags should go in this section.
To add custom code before the closing </body> tag of an individual page:
Important: Custom scripts will only appear on the published site.
You can’t integrate server-side languages (e.g., Perl, PHP, Python, Ruby) using custom code. Custom code in Site and Page settings only supports HTML, CSS in <style> tags, and JS in <script> tags.
The Head code and Footer code sections in Site settings can accommodate up to 20,000 characters each, and custom code in the <head> tag and before the </body> tag in Page settings can accommodate up to 10,000 characters each. If the code you want to add to your site is longer, you can store it on another server and reference the script in your custom code. You can also minify your custom code using a third-party tool.
Custom scripts will only appear on the published site. These are disabled in the Designer to prevent any unexpected behavior.
Double-check that your code includes the appropriate opening and/or closing tags and doesn’t include <html>, <body>, or <head> tags.
As of August 2020, newly published Webflow sites include jQuery v3.5.1. Importing other versions of jQuery with custom code may cause conflicts and unexpected behavior on your site. Scripts that affect DOM events like onClick, onHover, etc. may also cause unexpected behavior.
It’s important to keep in mind that custom code is an advanced modification that may conflict with Webflow’s underlying functionality. As such, Webflow cannot guarantee the functionality or full compatibility of any custom code.
Our support team is unable to provide direct help with custom code setup or troubleshooting, as these topics fall outside the scope of our customer support policy. If you run into issues with custom code, please let us know on the Webflow Forum, where the entire Webflow community (staff included) can provide additional help and resources.
